当前位置：首页 > JavaScript

js 实现button拖动

2026-03-15 14:59:55JavaScript

实现按钮拖动的 JavaScript 方法

通过 JavaScript 实现按钮拖动功能，主要涉及鼠标事件监听和元素位置更新。以下是核心实现步骤：

监听鼠标按下事件

为按钮添加 mousedown 事件监听器，记录初始位置和鼠标按下时的偏移量：

button.addEventListener('mousedown', function(e) {
  // 计算鼠标相对于按钮左上角的偏移
  const offsetX = e.clientX - button.getBoundingClientRect().left;
  const offsetY = e.clientY - button.getBoundingClientRect().top;

  // 标记为可拖动状态
  isDragging = true;

  // 存储初始数据
  initialData = { offsetX, offsetY };
});

跟踪鼠标移动

在 mousemove 事件中更新按钮位置，需注意性能优化（如使用 transform）：

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

  // 计算新位置（考虑滚动偏移）
  const x = e.clientX - initialData.offsetX + window.scrollX;
  const y = e.clientY - initialData.offsetY + window.scrollY;

  // 使用 CSS transform 避免重排
  button.style.transform = `translate(${x}px, ${y}px)`;
});

释放拖动状态

通过 mouseup 事件结束拖动：

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

完整代码示例

<!DOCTYPE html>
<style>
  #draggable {
    width: 100px;
    height: 40px;
    background: #3498db;
    color: white;
    text-align: center;
    line-height: 40px;
    cursor: move;
    position: absolute;
  }
</style>

<div id="draggable">Drag Me</div>

<script>
  const button = document.getElementById('draggable');
  let isDragging = false;
  let initialData = { offsetX: 0, offsetY: 0 };

  button.addEventListener('mousedown', function(e) {
    isDragging = true;
    initialData = {
      offsetX: e.clientX - button.getBoundingClientRect().left,
      offsetY: e.clientY - button.getBoundingClientRect().top
    };
  });

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

  document.addEventListener('mouseup', function() {
    isDragging = false;
  });
</script>

优化建议

边界检查：添加限制防止按钮被拖出视口

// 在 mousemove 事件中添加
const maxX = window.innerWidth - button.offsetWidth;
const maxY = window.innerHeight - button.offsetHeight;
x = Math.max(0, Math.min(x, maxX));
y = Math.max(0, Math.min(y, maxY));