js实现 拖动

实现拖动的核心步骤

监听鼠标事件 在可拖动元素上添加mousedown事件监听器，记录初始位置和鼠标位置。

element.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - element.offsetLeft;
  startY = e.clientY - element.offsetTop;
});

处理鼠标移动 在文档上添加mousemove事件，计算元素新位置并更新样式。

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  element.style.left = `${e.clientX - startX}px`;
  element.style.top = `${e.clientY - startY}px`;
});

结束拖动 通过mouseup事件清除拖动状态。

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

完整实现示例

const draggableElement = document.getElementById('draggable');
let isDragging = false;
let startX, startY;

draggableElement.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - draggableElement.offsetLeft;
  startY = e.clientY - draggableElement.offsetTop;
  draggableElement.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  draggableElement.style.left = `${e.clientX - startX}px`;
  draggableElement.style.top = `${e.clientY - startY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  draggableElement.style.cursor = 'grab';
});

注意事项

CSS准备 确保元素具有position: absolute或position: fixed样式，并设置初始定位。

#draggable {
  position: absolute;
  cursor: grab;
  user-select: none;
}

性能优化 对于频繁触发的mousemove事件，可以考虑使用防抖或节流技术。

触摸屏支持 需要额外添加touchstart、touchmove和touchend事件处理程序以实现移动端兼容。

边界限制 可以通过添加位置判断逻辑来限制元素移动范围，防止拖出可视区域。