当前位置：首页 > JavaScript

js实现drag

2026-04-07 00:56:15JavaScript

实现拖拽功能的基本步骤

通过原生JavaScript实现拖拽功能需要处理鼠标事件，并动态更新元素位置。以下是核心实现逻辑：

HTML结构准备

<div id="draggable" style="width: 100px; height: 100px; background: red; position: absolute;"></div>

JavaScript事件处理

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - draggable.offsetLeft;
  offsetY = e.clientY - draggable.offsetTop;
});

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

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

进阶功能优化

边界限制 防止元素被拖出可视区域：

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

  let x = e.clientX - offsetX;
  let y = e.clientY - offsetY;

  x = Math.max(0, Math.min(x, window.innerWidth - draggable.offsetWidth));
  y = Math.max(0, Math.min(y, window.innerHeight - draggable.offsetHeight));

  draggable.style.left = `${x}px`;
  draggable.style.top = `${y}px`;
});

拖拽手柄 只有特定子元素可触发拖拽：

const handle = document.querySelector('.handle');
handle.addEventListener('mousedown', initDrag);

现代API方案

使用HTML5 Drag API简化实现：

<div draggable="true" id="dragItem">Drag me</div>
<script>
  const item = document.getElementById('dragItem');
  item.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 draggable = document.getElementById(id);
    draggable.style.left = `${e.clientX}px`;
    draggable.style.top = `${e.clientY}px`;
  });
</script>