反应动态更改自定义拖动图像

Question

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

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

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

Answer 1

我用谷歌搜索了一下，找到了这篇文章。 这是片段：

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，正如您在运行上述更新的代码段时在控制台中看到的那样。
在这里你可以看到dragstart、drag、dragend被触发在可拖动元素上。
老实说，我不知道为什么dragstart或drag不适合你！更详细的代码片段会有所帮助