允许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中一起破解了一些东西，我没有在任何其他浏览器中测试它。 此演示文稿位于此fiddle。

有两件事很重要：

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