html - 允许 html5 拖动并显示图标 onDrag

Question

我有一个带有锚点和图标的 div。

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

我拖动它并想将它放在 OpenLayers 地图上。因为 img 默认是可以拖拽的，所以我这里就不设置了。现在，当我拖动图标时，img 不会被拖动，所以我只看到光标。如何显示拖动的东西的图标。这是我的代码，但它不起作用。

$('#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);
    });

代码本身可以工作，但是拖动时不显示img

Answer 1

我一起破解了一些可以在 Chrome 中运行的东西，我没有在任何其他浏览器中测试它。演示在这个小提琴中。

有两件事很重要：

• 一个任意元素应该设置draggable="true"
• 要在拖动时显示的图像应该预先加载，否则它不会第一次显示。