当前位置：首页 > JavaScript

js实现drag

2026-02-02 07:35:13JavaScript

实现拖拽功能的基本步骤

使用原生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 newX = e.clientX - offsetX;
  let newY = e.clientY - offsetY;

  // 限制在视口内
  newX = Math.max(0, Math.min(newX, window.innerWidth - draggable.offsetWidth));
  newY = Math.max(0, Math.min(newY, window.innerHeight - draggable.offsetHeight));

  draggable.style.left = `${newX}px`;
  draggable.style.top = `${newY}px`;
});

拖拽手柄 只在特定元素上触发拖拽：

<div id="draggable" style="position: absolute;">
  <div id="handle" style="cursor: move;">拖拽这里</div>
  <div>其他内容</div>
</div>

const handle = document.getElementById('handle');
// 将mousedown事件监听器绑定到handle而非整个draggable
handle.addEventListener('mousedown', (e) => {
  // 拖拽逻辑相同
});

使用HTML5 Drag API

HTML5提供了原生拖拽API，适合更复杂的拖放场景：

<div id="draggable" draggable="true" style="width: 100px; height: 100px; background: blue;"></div>
<div id="dropzone" style="width: 200px; height: 200px; background: lightgray;"></div>

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

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

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  e.target.appendChild(draggedElement);
});

性能优化建议

对于频繁触发的mousemove事件，使用requestAnimationFrame优化：

function moveElement(e) {
  if (!isDragging) return;
  requestAnimationFrame(() => {
    draggable.style.left = `${e.clientX - offsetX}px`;
    draggable.style.top = `${e.clientY - offsetY}px`;
  });
}

document.addEventListener('mousemove', moveElement);

浏览器兼容性处理

考虑添加touch事件支持以实现移动端兼容：

draggable.addEventListener('touchstart', (e) => {
  isDragging = true;
  const touch = e.touches[0];
  offsetX = touch.clientX - draggable.offsetLeft;
  offsetY = touch.clientY - draggable.offsetTop;
  e.preventDefault();
});

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

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

js实现drag