当前位置：首页 > JavaScript

js实现拖动

2026-03-15 08:27:13JavaScript

实现基本拖动功能

使用HTML5的拖放API可以快速实现元素拖动。为元素添加draggable="true"属性，并监听相关事件：

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

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`;
});

自定义拖动逻辑

通过鼠标事件实现更灵活的拖动控制：

let isDragging = false;
let offsetX, offsetY;

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

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

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

限制拖动范围

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

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

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

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

拖动手柄实现

只允许通过特定元素触发拖动：

const handle = document.querySelector('.drag-handle');

handle.addEventListener('mousedown', startDrag);
element.addEventListener('mousedown', (e) => {
  if (e.target !== handle) return;
  startDrag(e);
});

触摸设备支持

添加触摸事件处理实现移动端兼容：

js实现拖动

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

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

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