使用HTML5拖放操作时，如何在拖放区域上拖动图像？

Question

所以这就是我想要做的。我希望能够拖动元素，并使其在拖放区域之上时将其默认拖动图像动态更改为不同的图像。

Answer 1

您可以使用dataTransfer.setDragImage方法设置拖动图像。它存在于所有拖动事件的事件对象中，包括dragover事件。

一些基本的代码如下：

dropElem.ondragover = function(e) { 
    if (e.stopPropagation) { 
     e.stopPropagation(); //Stops some browsers from redirecting. 
    } 
    var dragIcon = document.createElement('img'); 
    dragIcon.src = 'image.png'; 
    dragIcon.width = 100; 
    e.dataTransfer.setDragImage(dragIcon, 0, 0); 
};