当前位置：首页 > JavaScript

js实现按钮拖拽

2026-02-02 16:37:07JavaScript

实现按钮拖拽的基本思路

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

HTML 结构

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

<button id="draggable-btn" style="position: absolute;">拖拽我</button>

JavaScript 实现

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

// 鼠标按下时触发
btn.addEventListener('mousedown', (e) => {
  isDragging = true;
  // 计算鼠标位置与按钮左上角的偏移量
  offsetX = e.clientX - btn.getBoundingClientRect().left;
  offsetY = e.clientY - btn.getBoundingClientRect().top;
  // 防止拖动时选中文本
  e.preventDefault();
});

// 鼠标移动时触发
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  // 更新按钮位置
  btn.style.left = `${e.clientX - offsetX}px`;
  btn.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 - btn.offsetWidth;
  const maxY = window.innerHeight - btn.offsetHeight;

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

支持触摸设备

添加触摸事件支持：

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

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

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