即时响应更改自定义拖动图像

Question

是否有机会更改在onDragStart 事件中设置的自定义拖动图像 在 DnD 过程中使用e.dataTransfer.setDragImage(image, 0, 0)？例如，在onDragEnter ?

规范说，dataTransfer 仅对 dragStart 事件具有写入权限，但可能有人知道另一种方法来更改它或设置没有 dataTransfer 接口的自定义拖动图像？ 需要DnD逻辑，因为拖拽过程支持cross-tab+onDrop事件有很多复杂的逻辑，所以我不能简单地为mousemove事件添加监听器并将图像附加到当前鼠标位置。

问题是将已经在 dragStart 事件中设置的拖动图像更改为 dragEnter 事件中的另一个图像。我很确定通过 DnD API 是不可能的，但可能有人遇到了同样的问题并通过另一种方式解决了它。

Answer 1

我用谷歌搜索并找到了this article。 这是sn-p：

document.getElementById("drag-with-image").addEventListener("dragstart", function(e) {
    console.log('dragstart');
    var img = document.createElement("img");
    img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);
document.getElementById("drag-with-image").addEventListener("drag", function(e) {
    console.log('drag')
    var img = document.createElement("img");
    img.src = null;
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

.dragdemo {
  background-color: blue;
  border-radius: 5px;
  color: white;
  padding: 10px 30px;
  text-align: center;
  width: 80px;
}

<div id="drag-with-image" class="dragdemo" draggable="true">drag me</div>

它有很多有用的例子！

编辑 1： dragenter 事件在可拖动元素位于放置目标元素上时触发，而不是在可拖动元素本身上。 dragstart 之后调用的是 drag，正如您在运行上面更新的 sn-p 时在控制台中看到的那样。
Here 您可以看到 dragstart、drag、dragend 被触发在可拖动元素上。
老实说，我不知道为什么 dragstart 或 drag 不适合你！更详细的代码 sn-p 会有所帮助