当前位置：首页 > JavaScript

js实现弹窗的拖拽效果

2026-04-04 22:07:30JavaScript

实现弹窗拖拽的基本思路

弹窗拖拽功能主要通过监听鼠标事件实现。核心逻辑包括：鼠标按下时记录初始位置，鼠标移动时计算偏移量并更新弹窗位置，鼠标松开时移除事件监听。

HTML结构准备

创建一个基本的弹窗结构，包含标题栏（用于拖拽区域）和内容区域：

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

CSS样式设置

为弹窗添加基础样式，特别注意设置position: absolute：

.dialog {
  position: absolute;
  width: 300px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dialog-header {
  padding: 10px;
  background: #f5f5f5;
  cursor: move;
  user-select: none;
}

JavaScript实现代码

完整拖拽功能实现：

const dialog = document.getElementById('dialog');
const header = dialog.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;
  dialog.style.cursor = 'grabbing';
});

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;
  dialog.style.cursor = '';
});

边界限制处理

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

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('mousedown', (e) => {
  if (!e.target.classList.contains('dialog-header')) return;

  const dialog = e.target.closest('.dialog');
  const rect = dialog.getBoundingClientRect();
  const offsetX = e.clientX - rect.left;
  const offsetY = e.clientY - rect.top;

  function move(e) {
    dialog.style.left = `${e.clientX - offsetX}px`;
    dialog.style.top = `${e.clientY - offsetY}px`;
  }

  function up() {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', up);
  }

  document.addEventListener('mousemove', move);
  document.addEventListener('mouseup', up);
});

兼容触摸设备

添加触摸事件支持：

js实现弹窗的拖拽效果

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

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

document.addEventListener('touchend', () => {
  offsetX = offsetY = null;
});