当前位置：首页 > JavaScript

js实现弹窗的拖拽效果

2026-03-01 21:18:35JavaScript

实现弹窗拖拽效果的方法

弹窗拖拽功能通常需要监听鼠标事件，计算位移并更新弹窗位置。以下是基于原生JavaScript的实现方法：

HTML结构

<div class="modal" id="draggable-modal">
  <div class="modal-header" id="drag-handle">可拖拽标题栏</div>
  <div class="modal-content">弹窗内容</div>
</div>

CSS样式

.modal {
  position: absolute;
  width: 300px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.modal-header {
  padding: 10px;
  cursor: move;
  background: #f0f0f0;
  border-bottom: 1px solid #ddd;
}

JavaScript实现

const modal = document.getElementById('draggable-modal');
const dragHandle = document.getElementById('drag-handle');

let isDragging = false;
let offsetX, offsetY;

dragHandle.addEventListener('mousedown', (e) => {
  isDragging = true;

  // 计算鼠标位置与弹窗左上角的偏移量
  offsetX = e.clientX - modal.offsetLeft;
  offsetY = e.clientY - modal.offsetTop;

  // 防止文本选中
  e.preventDefault();
});

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

  // 计算新位置
  modal.style.left = `${e.clientX - offsetX}px`;
  modal.style.top = `${e.clientY - offsetY}px`;
});

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

边界限制改进版

为防止弹窗被拖出可视区域，可添加边界检查：

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

  let newLeft = e.clientX - offsetX;
  let newTop = e.clientY - offsetY;

  // 限制在视窗范围内
  newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - modal.offsetWidth));
  newTop = Math.max(0, Math.min(newTop, window.innerHeight - modal.offsetHeight));

  modal.style.left = `${newLeft}px`;
  modal.style.top = `${newTop}px`;
});

使用事件委托的优化方案

对于动态创建的弹窗，建议使用事件委托：

js实现弹窗的拖拽效果

document.addEventListener('mousedown', (e) => {
  if (e.target.classList.contains('drag-handle')) {
    const modal = e.target.closest('.modal');
    // 拖拽逻辑同上
  }
});