当前位置：首页 > JavaScript

js实现按钮拖拽

2026-04-07 10:18:05JavaScript

实现按钮拖拽的基本思路

通过监听鼠标事件（mousedown、mousemove、mouseup）实现拖拽效果。核心是计算鼠标移动的偏移量，动态更新按钮位置。

HTML 结构

创建一个可拖拽的按钮元素：

<button id="draggable-btn">拖拽我</button>

CSS 样式

为按钮添加基础样式和定位：

#draggable-btn {
  position: absolute;
  cursor: move;
  padding: 10px 20px;
}

JavaScript 实现

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

btn.addEventListener('mousedown', (e) => {
  isDragging = true;
  // 计算鼠标相对按钮左上角的偏移
  offsetX = e.clientX - btn.offsetLeft;
  offsetY = e.clientY - btn.offsetTop;
});

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

  // 计算新位置
  const newX = e.clientX - offsetX;
  const newY = e.clientY - offsetY;

  // 应用新位置
  btn.style.left = `${newX}px`;
  btn.style.top = `${newY}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 - btn.offsetWidth));
  newY = Math.max(0, Math.min(newY, window.innerHeight - btn.offsetHeight));

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

触摸屏支持（可选）

添加触摸事件支持：

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

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const touch = e.touches[0];
  // 移动逻辑与鼠标相同
  // ...
  e.preventDefault();
});

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

性能优化建议

对于频繁触发的mousemove事件，可以使用节流(throttle)优化：

js实现按钮拖拽

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return fn(...args);
  }
}

document.addEventListener('mousemove', throttle((e) => {
  // 拖拽逻辑
}, 16)); // 约60fps