How To Enable The Ghost Effect On A Table Row In Safari Html5?

I don't have the ghost effect when I drag item (table row) on Safari. I use table so this is a tr. The ghost effect is when you can see your item which follow your mouse. On Chr

Solution 1:

On OSX Safari the drag helper (ghost effect) shows up as soon as you attach drag&drop related event listeners to the table rows.

<table><trid="row1"draggable="true"><td>1</td><td>2</td><td>3</td></tr><trid="row2"><td>4</td><td>5</td><td>6</td></tr></table>

With only this, drag helper won't show up.

But as soon as you attach an event, it will:

var row1 = document.getElementById('row1');
row1.addEventListener('dragstart', function(e) {
    //Dragstart code here
}, false);

Hope this helps.

Solution 2:

Very late answer, but I've just been dealing with this issue myself, and hopefully this might be useful to someone else discovering this question.

According to this answer, there's a bug in Safari when generating the drag ghost for elements with display: table-row within a <table> (it also appears to apply to display: table-group.) That answer suggests changing the display property to something else, which does indeed cause a correct drag ghost to be created, although it of course changes the layout in (probably) unwanted ways.

The trick I've found is to change the style in my onDragStart handler, and use a timeout to (almost) immediately reset it. I also temporarily hard-code to the row and cell widths to match their current sizes as these are otherwise recalculated. Finally, I explicitly set the drag image to ensure that it's correctly positioned under the mouse pointer. Here's a function which does the trick when passed the drag event:

functionhackRowForDragInSafari(event) {
    let row = event.targetfor (let cell of row.cells) {
        cell.style.setProperty('width', cell.offsetWidth + 'px', 'important')
    }

    row.style.setProperty('width', row.offsetWidth + 'px', 'important')
    row.style.setProperty('display', 'block', 'important')

    setTimeout(() => {
        for (let cell of row.cells) {
            cell.style.removeProperty('width')
        }

        row.style.removeProperty('display')
        row.style.removeProperty('width')
    })

    event.dataTransfer.setDragImage(event.target, event.offsetX, event.offsetY)
}

Ideally, you'd only trigger this if the UA is Safari, and you'll want to adapt this to your use case if you're using a drag handle in a cell, or if you're already using staying on your table this would break, etc.