原生 JavaScript 实现元素拖拽：解锁 Web 交互新境界

2024-01-22 02:32:18

元素拖拽：提升 Web 交互的魅力

在当今的网络开发世界中，元素拖拽已成为一种必不可少的技术，它为用户提供了无缝且直观的交互体验。从移动图像到重新排列复杂数据，元素拖拽功能使交互操作变得轻而易举，大幅提升了用户满意度。

揭秘原理：元素拖拽是如何实现的？

元素拖拽的关键在于监听鼠标事件。当鼠标指针悬停在可拖拽元素上时，需要监听鼠标按下事件，为拖拽操作做好准备。通过计算鼠标指针相对可拖拽元素的位置偏移，在拖拽过程中保持相对位置。

当拖拽操作开始后，需要监听鼠标移动事件，根据鼠标指针的移动，调整可拖拽元素的位置。最后，当拖拽操作结束时，需要监听鼠标松开事件，释放鼠标捕获，完成拖拽操作。

代码实现：亲手打造拖拽功能

// 1. 鼠标事件侦听
const draggableElement = document.querySelector(".draggable");
draggableElement.addEventListener("mousedown", startDrag);

// 2. 拖拽准备
function startDrag(event) {
  const offsetX = event.clientX - draggableElement.offsetLeft;
  const offsetY = event.clientY - draggableElement.offsetTop;

  // 3. 鼠标移动侦听
  document.addEventListener("mousemove", moveDrag);

  function moveDrag(event) {
    draggableElement.style.left = event.clientX - offsetX + "px";
    draggableElement.style.top = event.clientY - offsetY + "px";
  }

  // 4. 鼠标松开事件
  document.addEventListener("mouseup", stopDrag);

  function stopDrag() {
    document.removeEventListener("mousemove", moveDrag);
  }
}