防止 HTML5 拖拽重影图像飞回答案

【问题标题】：Prevent HTML5 Drag Ghost Image Flying Back防止 HTML5 拖拽重影图像飞回
【发布时间】：2019-10-03 03:16:10
【问题描述】：

我正在构建一个使用 HTML5 拖放的可排序列表。它工作得很好，但是当涉及到重影图像时，我遇到了一个令人沮丧的问题。鬼影总是想飞回它来的地方。结果是如果一个列表项改变了位置，鬼影就会飞回错误的列表项。

理想情况下，重影图像应该在onDragEnd 事件之后根本不显示。我尝试在 dragEnd 上将图像设置为空图像

handleDragEnd(e) {
    e.dataTransfer.setDragImage(new Image(0, 0), 0, 0);
    ...

但我认为你只能在onDragStart中使用setDragImage。

有没有办法隐藏鬼影onDragEnd，或者至少让它飞回正确的位置？

【问题讨论】：

你如何交换项目？我正在实现一个类似的功能，在实现实际交换之前，幽灵图像的行为是这样的，但是在实现交换之后，图像不再飞回。我认为浏览器可以检测到初始项目是否已被移动，然后它可以按预期工作。
请添加一些示例代码以充分说明问题

标签： html safari drag-and-drop

【解决方案1】：

还原效果是 Safari 上的默认行为，但您可以在您控制的 HTML 中控制此默认行为。您只需要在要阻止此还原效果的区域上添加 dragover 事件并调用 e.preventDefault()。唯一的限制：当用户将元素拖出浏览器或您控制的框架时，您将无法控制。

但是这样的事情可以解决您所描述的问题：

var draggedId;
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAO0lEQVR42u3OMQ0AMAgAsGFiCvCvDQeggoSjVdD4lf0OC0FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBwR0DX1VWkeseHpAAAAAASUVORK5CYII=";

document.getElementById('a').ondragstart = dragstart_handler;
document.getElementById('b').ondragstart = dragstart_handler;

document.ondragover = (e) => {
  if (draggedId === "a") {
    e.preventDefault();
  }
}

function dragstart_handler(e) {
  draggedId = e.target.id;
  e.dataTransfer.setDragImage(img, 0, 0)
}

div {
  cursor: pointer;
}

div:hover {
  color: blue;
}

<div id=a draggable=true>
  This element won't revert on dragend.
</div>

<div id=b draggable=true>
  This one will revert.
</div>

【讨论】：