当前位置：首页 > JavaScript

js实现弹窗的拖拽效果

2026-01-31 06:07:14JavaScript

实现弹窗拖拽的基本思路

弹窗拖拽的核心是通过监听鼠标事件（mousedown、mousemove、mouseup）计算位移差值，动态修改弹窗的定位样式（如 left 和 top）。以下是具体实现方法：

HTML 结构

弹窗需设置为 position: absolute 或 position: fixed，并包含可拖拽的标题栏：

<div class="dialog">
  <div class="dialog-header">拖拽标题栏</div>
  <div class="dialog-content">弹窗内容</div>
</div>

CSS 样式

确保弹窗可定位，标题栏为拖拽区域：

.dialog {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 300px;
  border: 1px solid #ccc;
  background: white;
}
.dialog-header {
  padding: 10px;
  cursor: move;
  background: #f0f0f0;
}

JavaScript 实现

通过事件监听实现拖拽逻辑：

const dialog = document.querySelector('.dialog');
const header = document.querySelector('.dialog-header');

let isDragging = false;
let offsetX, offsetY;

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

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  // 更新弹窗位置
  dialog.style.left = `${e.clientX - offsetX}px`;
  dialog.style.top = `${e.clientY - offsetY}px`;
});

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

边界限制（可选）

防止弹窗被拖出可视区域：

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

  let left = e.clientX - offsetX;
  let top = e.clientY - offsetY;

  // 限制在窗口内
  left = Math.max(0, Math.min(left, window.innerWidth - dialog.offsetWidth));
  top = Math.max(0, Math.min(top, window.innerHeight - dialog.offsetHeight));

  dialog.style.left = `${left}px`;
  dialog.style.top = `${top}px`;
});

完整代码示例

结合上述逻辑的完整实现：

<!DOCTYPE html>
<style>
  .dialog { position: absolute; left: 100px; top: 100px; width: 300px; border: 1px solid #ccc; background: white; }
  .dialog-header { padding: 10px; cursor: move; background: #f0f0f0; }
</style>

<div class="dialog">
  <div class="dialog-header">拖拽标题栏</div>
  <div class="dialog-content">弹窗内容</div>
</div>

<script>
  const dialog = document.querySelector('.dialog');
  const header = document.querySelector('.dialog-header');
  let isDragging = false;
  let offsetX, offsetY;

  header.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - dialog.offsetLeft;
    offsetY = e.clientY - dialog.offsetTop;
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    let left = e.clientX - offsetX;
    let top = e.clientY - offsetY;
    left = Math.max(0, Math.min(left, window.innerWidth - dialog.offsetWidth));
    top = Math.max(0, Math.min(top, window.innerHeight - dialog.offsetHeight));
    dialog.style.left = `${left}px`;
    dialog.style.top = `${top}px`;
  });

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