当前位置：首页 > JavaScript

js实现按钮拖拽

2026-03-15 16:54:10JavaScript

实现按钮拖拽的基本思路

要实现按钮拖拽功能，需要监听鼠标事件并更新按钮的位置。核心步骤包括监听 mousedown、mousemove 和 mouseup 事件，计算鼠标移动的偏移量并更新按钮的 style.left 和 style.top 属性。

js实现按钮拖拽

HTML 结构准备

创建一个可拖拽的按钮元素，确保其 position 属性为 absolute 或 relative，以便通过 CSS 控制位置。

js实现按钮拖拽

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

JavaScript 实现拖拽逻辑

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

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

// 鼠标移动时触发
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  // 更新按钮位置
  draggableBtn.style.left = `${e.clientX - offsetX}px`;
  draggableBtn.style.top = `${e.clientY - offsetY}px`;
});

// 鼠标释放时触发
document.addEventListener('mouseup', () => {
  isDragging = false;
  draggableBtn.style.userSelect = '';
});

优化拖拽体验

为防止快速拖动时鼠标脱离按钮范围，可以将 mousemove 和 mouseup 事件绑定到 document 而非按钮本身。同时，恢复按钮的文本选中功能。

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拖拽按钮示例</title>
  <style>
    #draggable-btn {
      position: absolute;
      cursor: move;
    }
  </style>
</head>
<body>
  <button id="draggable-btn">拖拽我</button>

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

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

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

    document.addEventListener('mouseup', () => {
      isDragging = false;
      draggableBtn.style.userSelect = '';
    });
  </script>
</body>
</html>