js实现拖拽

实现拖拽的基本原理

拖拽功能主要通过监听鼠标事件实现，包括mousedown、mousemove和mouseup。当元素被按下时开始跟踪移动，移动过程中更新元素位置，释放鼠标时结束拖拽。

基础拖拽实现代码

const draggableElement = document.getElementById('draggable');

let isDragging = false;
let offsetX, offsetY;

draggableElement.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
  draggableElement.style.cursor = 'grabbing';
});

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

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

拖拽边界限制

为防止元素被拖出可视区域，可以添加边界检查：

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const x = e.clientX - offsetX;
  const y = e.clientY - offsetY;
  const maxX = window.innerWidth - draggableElement.offsetWidth;
  const maxY = window.innerHeight - draggableElement.offsetHeight;

  draggableElement.style.left = `${Math.max(0, Math.min(x, maxX))}px`;
  draggableElement.style.top = `${Math.max(0, Math.min(y, maxY))}px`;
});

拖拽事件优化

使用transform代替top/left可以获得更好的性能：

let posX = 0, posY = 0;

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  posX = e.clientX - offsetX;
  posY = e.clientY - offsetY;
  draggableElement.style.transform = `translate(${posX}px, ${posY}px)`;
});

拖拽放置区域实现

实现拖拽元素到特定区域放置的功能：

const dropZone = document.getElementById('drop-zone');

draggableElement.addEventListener('dragstart', () => {
  draggableElement.classList.add('dragging');
});

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.classList.add('drag-over');
});

dropZone.addEventListener('drop', () => {
  dropZone.appendChild(draggableElement);
  dropZone.classList.remove('drag-over');
});

触摸屏拖拽支持

添加触摸事件支持使功能在移动设备上可用：

draggableElement.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  offsetX = touch.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = touch.clientY - draggableElement.getBoundingClientRect().top;
  isDragging = true;
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const touch = e.touches[0];
  draggableElement.style.left = `${touch.clientX - offsetX}px`;
  draggableElement.style.top = `${touch.clientY - offsetY}px`;
  e.preventDefault();
});

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

CSS样式建议

为拖拽元素添加基本样式提升用户体验：

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

#draggable:active {
  cursor: grabbing;
}

#drop-zone {
  border: 2px dashed #ccc;
  min-height: 100px;
}

.drag-over {
  background-color: #f0f0f0;
}