防止HTML5拖动Ghost图像飞回

Question

我正在建立一个使用HTML5拖放的可排序列表。它运作良好，但是当涉及到幻影图像时，我遇到了一个令人沮丧的问题。鬼影始终希望飞回其原始位置。结果是，如果列表项更改位置，则幻影图像将飞回错误的列表项。

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

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

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

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

Answer 1

恢复效果是 Safari 上的默认行为，但您可以在您控制的 HTML 中控制此默认行为。您只需在要防止此恢复效果的区域上添加一个拖拽事件并调用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>