JavaScript 如何实现拖拽功能

JavaScript实现拖拽功能主要依赖于三个事件：mousedown、mousemove、mouseup。首先，当鼠标按下（mousedown）时，标记拖拽开始，并记录元素当前位置。随后，在鼠标移动（mousemove）时更新元素的位置。最后，当鼠标释放（mouseup）时，完成拖拽动作，停止元素的移动。这里的关键在于适当地监控鼠标的事件与元素位置的实时更新。

一、定义HTML和CSS结构

创建一个可拖拽元素的HTML代码，如下所示：

<div id="draggable" class="draggable">
  拖拽我
</div>

接着，使用CSS赋予这个元素基础样式：

.draggable {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move; /* 可拖拽的光标样式 */
  position: absolute; /* 绝对定位，为拖拽做准备 */
}

二、编写JavaScript实现拖拽

初始化变量

let isDragging = false;
let originalX, originalY, mouseX, mouseY, currentX, currentY;

在这里，isDragging用于标志是否处于拖拽状态，originalX和originalY记录元素的原始坐标，mouseX和mouseY存储鼠标按下的起始坐标。

实现鼠标按下事件

const draggable = document.getElementById('draggable');
draggable.addEventListener('mousedown', function(e) {
  isDragging = true;
  originalX = this.offsetLeft;
  originalY = this.offsetTop;
  mouseX = e.clientX;
  mouseY = e.clientY;
});

当鼠标按下元素时，记录元素当前的位置，并获取鼠标的起始坐标。这些信息用来计算拖拽过程中元素的新位置。

处理鼠标移动事件

document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  let deltaX = e.clientX - mouseX;
  let deltaY = e.clientY - mouseY;
  currentX = originalX + deltaX;
  currentY = originalY + deltaY;
  draggable.style.left = `${currentX}px`;
  draggable.style.top = `${currentY}px`;
});

只有在标志位isDragging为真时，才处理mousemove事件。元素的新位置是由原始坐标加上鼠标移动的距离(deltaX和deltaY)。

处理鼠标释放事件

document.addEventListener('mouseup', function() {
  isDragging = false;
});

当鼠标释放时，设置isDragging为假，表示拖拽结束。

三、优化拖拽体验

在上述基础的拖拽功能实现之后，还可以进一步优化用户体验。

添加边界限制

document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  let deltaX = e.clientX - mouseX;
  let deltaY = e.clientY - mouseY;
  let newLeft = originalX + deltaX;
  let newTop = originalY + deltaY;
  // 边界处理
  newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - draggable.offsetWidth));
  newTop = Math.max(0, Math.min(newTop, window.innerHeight - draggable.offsetHeight));
  draggable.style.left = `${newLeft}px`;
  draggable.style.top = `${newTop}px`;
});

此段代码确保拖拽的元素不会超出视窗的边缘。

防止文本选择

当进行快速且大范围的拖拽时，可能会导致页面上的文本被意外选择，影响体验。可通过CSS的user-select属性防止这种情况。

.draggable {
  user-select: none; /* 阻止文本被选择 */
}

提高性能：减少重绘和回流

尽量减少在mousemove事件处理函数中的DOM操作，因为频繁的操作将导致多次重绘和回流，降低性能。可以通过使用requestAnimationFrame来进行优化。

let updatePosition = () => {
   draggable.style.left = `${currentX}px`;
   draggable.style.top = `${currentY}px`;
};
document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  let deltaX = e.clientX - mouseX;
  let deltaY = e.clientY - mouseY;
  currentX = originalX + deltaX;
  currentY = originalY + deltaY;
  window.requestAnimationFrame(updatePosition);
});