如何访问 HTML 中的拖放元素？

Question

当拖动的元素进入放置元素时，会触发 'dragenter' 事件。该事件附加到 drop 元素，因此我可以访问它。被拖拽的元素在哪里？

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations

Answer 1

根据 文档，只需点击一下您引用的 URL：

您必须自己使用 Dragstart 事件来跟踪它。

let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // store a ref. on the dragged elem
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // prevent default to allow drop
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged element to the selected drop target
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});