Reputation: 721

HTML5 Drag and Drop - How to remove the default ghost image on IE

I have implemented the drag and drop API of HTML5 in my app, and I need to disable the default ghost image when the user drag an item.

The items aren't images but row from a table like :

<table>
  <tr draggable droppable ><td></td></tr>
  <tr draggable droppable ><td></td></tr>
  <tr draggable droppable ><td></td></tr>
</table>

Each row can be draggable in to another one (see it as a filesystem with folder and files).

In my dragstart I've done something like this to hide the default ghost image :

e.originalEvent.dataTransfer.setDragImage(disableImg[0], 0, 0);

Where diableImg is a dom element with 0 width and 0 height opacity 0 etc...

The issue here is that this is not working for IE since it doesn't support the setDragImage.

Is there another way to disable this ghost image of my row on drag ?

I just need to have it working from IE 11 -> Edge.

Thanks.

Upvotes: 2

Answers (2)

Delta

Reputation: 851

I was having this problem as well. I simply set the display to none before the drag.

    if (event.dataTransfer.setDragImage)
    {
        let dragImage = document.createElement("div");
        dragImage.style.visibility = "hidden";
        event.dataTransfer.setDragImage(dragImage, 0, 0);
    }
    else
    {
        //Well if we cannot remove the ghost image then we need to make the initial image invisible when a ghost image would be captured
        //then make the item visible again.
        var initialDisplay = event.srcElement.style.display;
        event.srcElement.style.display = "none";
        window.setTimeout(() =>
        {
            event.srcElement.style.display = initialDisplay;
        });
    }

Seems after 1 frame (notice the settimeout doesn't specify a delay time) the display went back to normal, but when the ghost image was captured it was invisible.

Upvotes: 1

MANOJ MUKHERJEE

Reputation: 344

Example of set custom ghost image in IE.

    var ghostImg = document.getElementById("ghostImg"); 

    document.getElementById('dragme').addEventListener('dragstart', function(e) {
        var target = e.srcElement || e.target;
        var cloneNode = target.cloneNode(true);
        target.parentNode.insertBefore(cloneNode, target);
        target.style.display = "none";
         window.setTimeout(function() {
            target.parentNode.removeChild(cloneNode);
            target.style.display = "block";
        }, 0);
         ghostImg.style.zIndex = '99';
         ghostImg.style.visibility = 'visible'
        ghostImg.style.top = e.clientY + 'px';
        ghostImg.style.left = e.clientX + 'px';  

    })
    document.getElementById('dragme').addEventListener('drag', function(e) {
        ghostImg.style.zIndex = '99';
        ghostImg.style.top = e.clientY + 'px';
        ghostImg.style.left = e.clientX + 'px';
    });
    document.getElementById('dragme').addEventListener('dragend', function(e) {
        ghostImg.removeAttribute('style');
    });

#dragme {
        width: 100px;
        height: 100px;
        background: #78ebff;
        border: 1px solid #56bdff;
        text-align: center;
        line-height: 100px;
        border-radius: 10px;
    }

    #ghostImg {
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
        visibility: hidden;
    }

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="dragme" draggable="true">
    Drag me
</div>

<img id="ghostImg" src="data:image/png;base64,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"/>
</body>
</html>

On dragStart event, implement:

function dragStart(e) 
{
    var target = e.srcElement || e.target;
    if (isIEBrowser()) // check its IE browser
    {
          var cloneNode = target.cloneNode(true);
          target.parentNode.insertBefore(cloneNode, target);
          target.style.visibility = "collapse";
          window.setTimeout(() => {
          target.parentNode.removeChild(cloneNode);
          target.style.visibility = "visible";
          }, 0);              
     }
}

Upvotes: 4

HTML5 Drag and Drop - How to remove the default ghost image on IE

Answers (2)

Related Questions