如何使可拖动元素在放置时保持在新位置（HTML5 而不是 jQuery）？

Question

我刚刚学习了 HTML5 可拖放 API 的基础知识。我不知道如何将拖动的位置保留在其放置的位置。掉落时它会改变其位置。

这是基本的 HTML（仅相关元素）：

onDragStart = function(ev) {
  //...
}

drop_handler = function(ev) {
  ev.preventDefault();
  ev.target.appendChild(document.getElementById("id1"));
}

dragover_handler = function(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
}

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div</div>


<div id="id2" style="position:absolute;left:100px;top:200px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>

我希望拖动的元素保持在其被放置的最终位置。任何指示将不胜感激。

Answer 1

正如我的评论中提到的，<div id="id1" ...>仍然有默认定位static。一旦将其附加到 dropDiv，它就会呈现正常的文档流行为。因为它是一个块元素，所以它位于已有文本的下方并填充块的宽度。

如果您希望它在放下时保持在原来的位置，则需要给予它position: absolute并考虑鼠标在屏幕上拖动时的移动方式。在这种dragStart情况下，我们捕获 DragDiv 的原始坐标并考虑鼠标相对于左上角的位置。当我们将 DragDiv 放入 dropDiv 中时，我们设置绝对定位并考虑鼠标在拖动过程中移动的距离。

由于 DragDiv 现在是 dropDiv 的子级，因此我们需要新的顶部和左侧值相对于 dropDiv 的坐标而不是整个屏幕，因此我们减去 dropDiv 的顶部和左侧值。请注意，其中一些方法可能不会考虑元素周围的边界，这可能会使元素看起来像一个或两个像素 - 要解决这个问题，您可以在计算中减去一个或两个像素，或者给出它们box-sizing: border-box。

let offsetX;
let offsetY;

onDragStart = function(ev) {
  const rect = ev.target.getBoundingClientRect();

  offsetX = ev.clientX - rect.x;
  offsetY = ev.clientY - rect.y;
};

drop_handler = function(ev) {
  ev.preventDefault();

  const left = parseInt(id2.style.left);
  const top = parseInt(id2.style.top);

  id1.style.position = 'absolute';
  id1.style.left = ev.clientX - left - offsetX + 'px';
  id1.style.top = ev.clientY - top - offsetY + 'px';
  id2.appendChild(document.getElementById("id1"));
};

dragover_handler = function(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
};

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div</div>


<div id="id2" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>