Question

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

理想情况下，在onDragEnd事件之后，重影图像应该根本不显示。我已尝试使用

将图像设置为dragEnd上的空图像

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

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

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

Answer 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>

防止HTML5拖动鬼图像飞回

1 个答案: