HTML5 拖放 - 如何删除 IE 上的默认重影图像答案

【问题标题】：HTML5 Drag and Drop - How to remove the default ghost image on IEHTML5 拖放 - 如何删除 IE 上的默认重影图像
【发布时间】：2016-08-28 10:21:07
【问题描述】：

我已经在我的应用中实现了HTML5的拖拽API，我需要在用户拖拽一个item的时候禁用默认的ghost image。

这些项目不是图像，而是来自表格的行，例如：

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

每一行都可以拖入另一行（将其视为包含文件夹和文件的文件系统）。

在我的 dragstart 中，我做了这样的事情来隐藏默认的幽灵图像：

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

其中 diableImg 是一个 0 宽度和 0 高度 opacity 0 等的 dom 元素...

这里的问题是这不适用于 IE，因为它不支持 setDragImage。

还有其他方法可以在拖动时禁用我的行的这个重影吗？

我只需要让它在 IE 11 -> Edge 上运行。

谢谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

在 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,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAVL0lEQVR4Xu2dd3QV1drGnzlnZk4qRQQpgihFgpRIkyI2ulIMlosKAQKigBjwXqQTqn73+y5SBaULXEILTbk0uVKU3gVsNIkgFiAEyCkz58z37FmctTAmIddLYsr+rfWuk8yBP7LeZ7/73e9+9x7FsiwUXiQOFBAkUgASKQCJFIBECkAiBSCRApBIAUikACRSABIpAIkUgEQKQCIFIJECkEgBSKQAJFIAEikAiYocRzJ37tweISEhL3i93jRFUdIApFmWJT6DdoNmf0cT37kDgYDb4XC4AXhofv7uM03zdK9evYx8JgAJHXnD6XS20nUdQeho3AqdHvwUZn8fNDr/MJ/9HcDpfBgBJHTeXjcBEJqdLmyKBZqmwTCMM3T+ZJ/PN58j/yoyRwrA5XLVshTl0UAA1QGrGKC4FcVxEk58Ybrde+kEH3KJ9evXuy5dulTR7/fXpsMfYQRoQEdq2YgUQcefp9On8fdZXbt2vYTMkQLQwsIehT8wxPT5mtk6CA0TYhCjB+4bNwBYcKrafldY2ARvWtoS5ACJiYl3c4BXU1W1rnA4nR0N4H46M0Q4lUIAn2XH8b/QPmQEmN65c+cfkQvk64MhrtDQIT6vL0HTdVfLFi3QsWMMomvXRpEiReHxuPHNt99i3SfrsGrNaqRcvgxND1lo+Dx96aRr+IMsX75cZzJXgY6uRacKZ9fnPB0FoLSY4/n8VofbzqVDIeCoBvlNHsD/I55f5c9z6Ysp3bp1O4vbIwVA54/3ebxDq0VVw8SJE9G6VStkxrFjx/C3gQOxccMGqK7QdabX/aKdhWeDOXPm3EUHVqWD7NFNexjAAxyxYXSu7Wg6PJi4BR1uP+do9vLZ9wAO8vufAfSlOfksOOJF1r+IgnkvLi7uG2QPKQCG8050fmJ0dDTWrF6FChUq4HZ4PB7E9eiJxMX/hOYKneTzpA1AOrZu3aomJyeXN02zFh3TgE5rAKA6rWwwg89odNOJwplCBJcAfM3PA3y2h5+HU1JSzgwYMMDNyBF6/fr101wOlvYRAMvo+H/Q8UeQfaQAFKXoXQ7Nc6B40aIVt239DA899BCyy7Vr1/BUs+Y4cGC/EeJyNU1KSvrqp59+epCOrEOnNgTwMJ1WiXN5BB37m9Et4DPh9GA4N/jz9xTDlzedvY+fJxjCL2ZRD1jPkW/Q8e/w3+3Gf44UgB4S8prh9X6QMGoURiUkICOE4w4fPoK0tBt4+OE6CA8PQ5ANnAaeeaYtatSs8d3bAwdqdGQFjm4HSNDhwfk56HBGBPHdFQDf0oKj+xC/P92lS5cbyCbz588vbQvkjyMFoGquDRGREa0O7NuLSpUqZTjfx/fvj39v2QJB3Xr1sfifi1C1alUQO1TXf6QhLly4gPFjxyCYuKUb3X46ORnAl2INz+d7+ftxLskuWAR/DlIAdEIRQDnWsFGj8l98vsN22K0cPXoUT3N0n/8hGS+9/DIiIiIxa+aHePyJJ5kArreXh4J+b8bj/WnTrPHvjFfuY/4gsnAAJ+nkA/TvHgAHOeJPcX6+JvcC8hYaYBUtX77875x//fo19OzVCxfOn8eMDz7A66+9FhzxmD9vLmbPmYO+ffpAUOmBB2BZARw4eHAOf17JsH/s9OnTPyQkJASQt5ACmDlzpsaRW4GJWa3Ro0c/OXbcuFBkwIYNm7Bvzx680a+f7fwg4xjmN27ciHHjxqND+/a49957oTgUECVp+fKlK5Yt2yy3g/MQixcvLj5v3rxHmDD1+YhwjhZh+QiAlWXLlu0XHhGpJf/wA9JPXSlXUyBo0rgxbqVcuXIYMWI4Lv54ARQPBGfPfg9iaVpoKu4sUgB03BO0Ytmsqjlnz559/8KFC9vR6ePo742cj8Wyapemae9z1Mcy1NcEEC5COdfQqHjffThx/DjOJSfjVsRzwfETJ5CeuO7d0bBRY8ybNx/btm3jMvAAoDhYdlVPSgHcIei8xxYsWLCODtsCoGYm4bwo18L16OheFMmcGzdu7KeTjwBYyzA/jJl4Szq/HACFDreXZfweFAOIwe9Oli9/78FUjvbExCW4laioKESwBLxr1+6MNoownqNfRI3Ybt1w6PBhaJr+mWWlXpIC+C9hqbQBHbocwL/p/KfpMMfNcqnCkV2Bjn6awkjg5zqG86NiDU2nfkinxtHh0QAimYRBOFzA58EE7wqf7+XzGYwK3fisXtGiRWt/8vHHrRxO9cLkyZNx6tQpBOH0gIejo+3RffHiRaTnqaeeRKdOnXDu7FlRFXRbTmUq/jhyGUiH1gTwVzq0Ex3qulkKxc36+ClRFuXPD9LJRW9XVaOT/QCSKY5jYt0tjM4/3rNnz/MALKRDDw2NMzzeOU0ebYKVSUkoVaoUBGPGjkXCyJFIWrkSHWNikJ7vvvsODZkjpKSkng+YvhoUagogBfCfOr4KHTWA1oVOjAg6/haC9fEMq2p8JixV+IN2UEQE2kHTNE9md92tENbzpxhe9xt16tbD1ClT0LhxIxxhHaBunbqI7doVc+fMRkaMHjPGriCyojja63aPAqQAsrscq8C5tB+AHgzTxRmWkZV4GBVsh1MgAQDnaceDVTU6+1iRIkV+eOGFF/z/RVHIqYdwR9DrHRgWHuaIeTYG7du1xcBBg+01/pdHjoBTBtJz5coVRoEm+O7bb1N0Ta3P6eDk7wVWrDgIA8SVQi8AZun30Jm9Oehep+PvCSZnt2tp4ij/jJ9L+W8PitHOGniOhFs1JKQNAhjqN7xN4HAqFCl8Xg8+XruWNf9nkBELFy1CbGwsNM210Od1x6abXnqZhjnC8vsVTXdth1OZ5EtL21vYBBB0fA86/g2O/DJ0vHAqgmQlHOEENk28271796G5VCJ2qqGhDeG3nqSk65peb/u4Hj0cc2ZnPA0IEbdo1RrcTTRUl6uZ4XbvAFHCw8s4DeNE2bLlion6wb59++A3Tbfu0rl97BkrunULhQCYtTcAMIjf1eMIdgIQptF0msbnKoWhihDPz98ZhQMu8Q6eO3eufm6XVxWBQz1a7t5yNQ4fPIASJUogI7Zt346WLVsxmlnbTcPbjM41tdDQ5qbHs3nUqNEYPnyY6O3DCCaVhw8dAoXyGf/onmz9Ol3gBcBELwQ3CQ8PVzlixLapi6YTF4CQoFEgoXS6sPCbP4fTwigSs3Tp0lPbtGnjRS7DBHE0nTqSvXro9Je/IDNEsrhwwQIR9l9hv+BilyvsOZ/PveL96dPRp3fvYM6AQYMHY9as2XCo6hmH6nzFSEvbVaD3Ajhfe5CPcSCQBMsavHTpMj0LAXCUD8e6df9CSurVBIp2tdPlcqfv3StevDhmfvghqkdVx+Ahg+9nH8gnzDtiGSnW3RJ1VAB+i8i9gDwAHXjMqWq7t7Lsy10+ZEbVKlXQp09vBAyjKnsFezsCgfMgP//8M9LTv3+8HS2KRETcFTDMpYwWHTllPMWpYTUUxwE4nftU3bWIzztREJFSAH/uQYyAw+lITLl8CatWrUZWxMfH44HKleE3fAMtp7M4gNQzZ84iI7hsxbJly5hX3BXuM32LEbDWR0ZEdnioRo1aVSpXqatp2iucQhIVVdvDaUUk0KoUwJ+E4XSugeK4vJQOMwwfMuNuJolDBg2CFfDfowTQE1DOn2SJWax4MoCJYwskrViBUiVLukyfV2/TujWOHDqIQwf244sd2+3u45IlSkQZHs9sVXOtZ84ULTuC/iR0l2uBBXTZsnkzHnvsMWSG1+PF4089hT27d7sdTucNrhzuFk4tU6YMMmP7jh147rnn4XG7xRY22rEIFeTkyVMYy7L0InYgc5VxVdX0MWxFnyISYymAXOTmsm5Tz1d7KaI1LCs2bNhIJ7YD7L0MP4RonnjiCWTFpk2b0IEVSLFNfeTwod+1p69YkYS3GV3OnD4F5gcbHLAGsj5yTE4BuQSdv4Pz8ZefrFtn7xBmRatWLdGOHUMM6wiYJvbu3YfbwOmgJWZSWEMGD84wWjz//HPYvm0rXnmlM0zTaO0zzR080DJSYa1ZRoBcQgsJG8jw+7/BtX1WHOH+waNNH8P1a6lo/+yzWLNqFe4US5YsgWhl//abb+DQtBOqoo7idQHLZQTIYTQHlkJxXF24cJFdAs6K2jxXyPI1BIdY/RNFoDuF6EXY+fkXGMbaQ5GIyOpcLSzTXCFJLJtXkwLIQdLS0s5pmv7J/v37sXPnTtyOtwf+DWXKlkPy9+ewh02md5ISd5fAOCaH3INA+w4dYBpGR5/p/1wPCYvPwSWjvCPIcmC2afgCc+bOw+1g17Bd9IksEomfWBDKCWrVqoXVnF4++mg+7qtQvgT7GiaxoPRJDkUDKQAmg5+zMnhAJINnzpzB7RDnBw6ytaxrbGxOblohtksX7OCm1CudO4to0MrwB7azgBQrk8AcgJW5V1mcmSk6gkaOGIG8xvz5H9mbTj//dFFsZk1jVBC7sWkyAtwhDI9rheJw/rCAyeDVq1eR1+jWrSvPM36KJo82hWh145SwVgkLu1dGgDtbGBrP6WCoOCbWIy4OeRFxhP2tt94SDTlQdf24A3iexaOvZQS4A6jAbEVxpM6Y8YFoDUdeJDIykr0HszBmzFgE/IGH/BZEchglBZB5+1lNbsHG0DppISEtRFsXMoHdPGc4qhLF2YG17BnMy4jjbBMm/AOwApUCFlak+7ukAJSIiHvo8DXc+9/PospKWiJ7ATfB7TnMlu8J3JIvmfGcF5gCJlcfzpptN7fmZfrHx4MtdWKFUF31+2eI3kcpgJs4TTPBAaV923bt9cmTp4Dzul1qrVW7dinD633Lofl2iIYNpIPz6Qmnrm3ZtWsXTvAcYV5n2NChiOkYA9Pr66Droc9JAdyE82ONosWKYQGLKW++2U8kdfaBj8+3b+NW7DiE6PqDJtu3GA16Z3Av3wr3jevY/Omn+eGaWYzj31OEf6s/YL6uECkAojkcuy79+gvmzpuXPomyO3rt28PKlw81vL7p3IEbi1twAp8DSNu+fQfyA9WrR6F+/XqiRb0WIiJKSgEQVXVO5rr+7KiEURDhPD3Nmze3r4WJfjga7Okfznr7JNEwDsIVwDkojlMnvvpK7BUgP/BglaoArGK6z1daCoDw3MEFxaG8xrv3jDfj+4OfSE+1atXA08Ro3ORRUVyJZ4VtqhCB6MxxqurXvCLO7hPID4iNJOIMOJ1FpABuYrDbR3Pp0/fv24uJkyYhI8QJn1Urk9CULWEUQR+KYAIIdXBSiObHH/OHAETXkY1laVIAt2B4XWMcmnbyvfcmZprVi+PjK5YvR6PGTYQI+nN1MERRrHN+w8Cvl35FfkBTtaAAXFIAt2BZVy+rijo05cplDB8xkr9bmYpg+bJlzAnqiN3BcVCUboCF1NRU5AdKliwZ3EUsIwWQDhaBklTdtW7NmjVYyzmfZDIdlGUkWIbKVas6uDp4BMQ0DOQHeLMp2EEkilfNpQAyOggCdWjACtwYmTDKTggzQ9wuujQx0Y4IwaPs+YFaNWuiXt268PsMFoTC60kBpMPrvX5U07QPjh4+ZF8UmRV16tTBfNYPXEysIiOLID+g6zqGDRsKrl7CLZizlMjIUlIA6TA07e8Op5Y8YcJ74NF0ZEWbNq252TIBd3N5lV945umnMWjQ2zANX7RqmCvZL1BOCuAWrGvXfnFqznE/XfwR4995J1utX40aNUJ+Yszo0bzr+E2YXk8T1fRv0vWwBlIAv60NfOTU9D0LFi5Md2dg5ncZ5SdEzjKZNQ+x36EoqG74fZv1kPC+siPot50/zUyPd2PzFi2c6/+1znZyQWTV6tWIZxU0+dz30PSQxYZP7W9Z134p9B1Bhtu9RdNdyz/lbt8yFoAKKjE8vcQzBvYLMAyf52VV823Rw+0VgmwJcyiWuPXjqrg8ku/tQUHl/vvvx6pVKzFyZIIoEtVk38BGdkc9Dxt5Ong0q34jg6+XKeiIaNeHie2lS5cNRsC3fJ60aYX9dPBEsU8wZcpUfMNDmQWdF3mDyceshFasWFEzvJ6pPBj7VqEWgLgLmAngiCuXL4FhAIWBRg0bcgt8LSpXqSKOuv8fm2E6F+q2cJ/bvVzVXZv4ijj7RrDCAF+lZ298sdztMAxjJreSHyy0AmAU8CuWc0jA73cPHjLEPvJdGIiOrg3elOqv/MAD74vX1xf6k0EMhWPYGjaic5dY8RIpu6BSwBFKj6cl0sxCfzKIzh+vulzrFy1cYN/kVcCF/x3tadpCmimPhhE63Gvqeqyqh+yeNHEi+vR9Q5wRQAFkK605bbc8G5gOKzX1V1NzxqiukG0fzJiOF158kT2BP6IAMY/WjnZOHg7NBOv69YumN7QDa+dLxDsFmjVrLt4ajnyOnzaMFke7LkvBt8GyLl9l7byzroeM+Orrr33PtG1nv0qGh0eRD0mhdaa9I3cD/wDiRHEgYE0OGL6oxk2a4H/efRdNmzZFPuEkrQttt+wH+OP9A5sDLv1xnheYvvOLnWar1m3sC6QvnL9QcJI9GQGyf7Ws5Q+84zd89SvcVxF/5U0dcXHdERERgTzGfFo/2nXZEnZn+wg+pfNFNBiQnJx8Pj7+TfvmUL5kKq8sGf204emTvRyIAJIwNlyagcAAw2f0hGUVbfDII+hPQcTE2JdD/1nJXm/akly8JEoiLm+0FMcAw+t9GUBE3Xr10Pv11+2LoPlewtxM9mJpu/68W8KkEB6yFGdfw+d9CVag2IPVohAb2wUvv/SS2H/P6WSvG+17eU1c3jilW9mvKD1Nn9EZAX+5kqXuQbu2bdGlS2c04TJS07TcT/ZyXwAScTJHM/wvmn6zm2UadVVNty+jeC4mxn5jafWoKDhV9b9J9hJuFnesPHxRpERRFJ27jI9zIHX2G2YbWIGSYRGRtgDat2+HV3u+itKl78n9ZC/3BSAJ511+RiDQkid42/l9RmPAKlOpcmVMmzoNrVu3yoFkL08LQE4Rqs/f3TS8I8LDwsIXsA+hY0xMtpM9KYACtNfAqWFpsWLFin+6eZM4mZwDyV6ergTKvQZN1V9lZ7LZ941+4layLCt7BVAAEq83LYnl5Vm7d+0UN5qm38YdT7MK+DuDJIbqGKM4nBffnz5DXE13CsAz6TJ9KYCC3onkVLUZZ86e3d22bdsXAexEHkBFriExfZ53AYzjG8wCuLPIVYBETgESKQCJFIBECkAiBSCRApBIAUikACRSABIpAIkUgEQKQCIFIJECkEgBSKQAJFIAEikAyf8DWKwZjLeDLnkAAAAASUVORK5CYII="/>
</body>
</html>

在 dragStart 事件上，实现：

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);              
     }
}

【讨论】：

【解决方案2】：

我也遇到了这个问题。我只是在拖动之前将显示设置为无。

    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;
        });
    }

似乎在 1 帧之后（注意 settimeout 没有指定延迟时间）显示恢复正常，但是当捕捉到重影图像时它是不可见的。

【讨论】：