js 实现拖拽

实现拖拽的基本步骤

在JavaScript中实现拖拽功能通常涉及监听鼠标事件（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';
});

使用CSS优化拖拽体验

为拖拽元素添加基础样式，确保其可定位且交互友好：

#draggable {
  position: absolute;
  cursor: grab;
  user-select: none; /* 防止拖动时选中文本 */
  width: 100px;
  height: 100px;
  background-color: #3498db;
}

处理边界限制

防止元素被拖出可视区域：

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

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

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

使用HTML5 Drag API简化实现

对于更复杂的场景（如跨浏览器拖放），可使用HTML5原生拖拽API：

draggableElement.setAttribute('draggable', 'true');

draggableElement.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

document.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须阻止默认行为以允许放置
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const element = document.getElementById(id);
  element.style.left = `${e.clientX}px`;
  element.style.top = `${e.clientY}px`;
});

性能优化建议

• 使用transform: translate()代替top/left定位以触发GPU加速：

  draggableElement.style.transform = `translate(${e.clientX - offsetX}px, ${e.clientY - offsetY}px)`;

• 对于大量可拖拽元素，使用事件委托减少监听器数量。