允许html5拖动并显示图标onDrag

我有一个带锚和图标的div

<a id="createWave_addStation"><img class="createWaveToolBarImg" 
src="img/mapIcons/ico_station.png"></a>

---

代码本身是可以工作的，但是在拖动的时候img没有显示出来。我在Chrome上拼凑了一些东西，我没有在其他浏览器上测试过。 这是一个演示

有两件事很重要：

• 任意元素应设置

  draggable=“true”

• 拖动时要显示的图像应预加载，否则它将不会第一次显示

---

什么是

启用GetMouseUpEvent（）

？@maenu:这是一个自定义函数，用于启用onmouseup事件。我尝试在Chrome中运行它，但没有成功。当然，您应该根据将

setDragImg

替换为

setDragImage

，并且您可能需要将拖动图像附加到DOM。不管怎么说，HTML5拖放仍然是一团糟，很难获得跨浏览器的解决方案。

$('#createWave_addStation').bind("dragstart", function(ev){
        ev.preventDefault();
        console.log("drag start");
        enableGetMouseupEvent();
        var dragIcon = document.createElement('img');
        dragIcon.src = ICO_STATION;
        dragIcon.width = 100;
        ev.originalEvent.dataTransfer.setDragImg(dragIcon, -10, -10);
    });