使用 HTML5 拖放，如何在拖放区上方更改拖动图像？

【问题标题】：With HTML5 drag and drop, how can I change the drag image when it's over the drop zone?使用 HTML5 拖放，如何在拖放区上方更改拖动图像？
【发布时间】：2011-08-30 01:08:08
【问题描述】：

这就是我想要做的。我希望能够拖动一个元素，并让它在放置区域上方时动态地将其默认拖动图像更改为不同的图像。

【问题讨论】：

请对每个问题提出一个问题，并使用描述性标题（例如，“如何在 HTML5 中将鼠标悬停在拖放区上时更改拖动图像？”）
抱歉，我编辑为只包含一个问题。
谢谢 - 当人们在一个问题中提出多个问题时会出现问题，因为如果有人只回答了一半，而另一个人回答了另一半，你就不能同时接受这两个问题，或者您最终可能会得到一个看起来在索引中已回答但实际上只回答了一半的问题，等等。请随时与您的其他问题同时打开另一个问题。
没问题，非常感谢！看起来这个问题很难。
是的 - 不幸的是我不是 HTML 类型，所以我自己无法回答：/

标签： image html drag-and-drop

【解决方案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);
};

【讨论】：

有人成功应用过这个吗？在dragstart 事件之后设置拖动图像不适用于我，任何浏览器。
@MichaelSchmid 已回答 here 由于安全原因，我们无法更改此设置。