Bootstrap Modal不支持原生拖拽，因draggable="true"对div无效且其position: relative与HTML5拖放逻辑冲突；jQuery UI方案最省事但增重150KB；纯JS需处理定位模式、边界限制、事件解绑及transform干扰等问题。
Bootstrap原生Modal不支持拖拽，必须通过JavaScript手动扩展；直接用jQuery UI最省事，但会额外引入约150KB依赖；纯原生JS实现更轻量，但要注意modal-dialog的定位方式和边界限制。
为什么不能直接给.modal加draggable属性
draggable="true"是HTML5原生拖放API，只适用于文件、链接等可选中内容，对div容器无效；Bootstrap Modal内部结构（.modal-dialog用position: relative）也不符合原生拖放的坐标计算逻辑，强行启用会导致偏移错乱或完全无响应。
用jQuery UI快速启用拖拽（推荐初试）
这是兼容性最好、代码最少的方案，尤其适合已有jQuery项目：
- 确保已加载
jquery-ui.min.js（注意不是仅jquery.min.js） - 在
show.bs.modal事件里绑定，避免重复初始化：$(document).on('show.bs.modal', '.modal', function () { $(this).find('.modal-dialog').draggable({ handle: '.modal-header', containment: 'window' }); }); -
containment: 'window'防止拖出视口；若需限定在某个容器内，改用containment: '#app'（对应ID为app的父元素） - 务必加
handle: '.modal-header'，否则整个对话框都可拖，体验极差
纯JS实现时的关键细节
绕过jQuery依赖，但要自己处理鼠标坐标、定位模式和边界判断：
-
.modal-dialog默认是position: relative，不能用offset()直接设top/left，得改用css({ top: 'xxxpx', left: 'xxxpx' }) - 拖拽开始前必须禁用文本选中：
$('body').css('user-select', 'none');，否则鼠标移动时会高亮页面文字 - 边界检测不能只靠
window.innerWidth，要考虑滚动条宽度和.modal-dialog自身尺寸：const maxWidth = window.innerWidth - $dialog.outerWidth(); const maxHeight = window.innerHeight - $dialog.outerHeight(); left = Math.max(0, Math.min(left, maxWidth)); top = Math.max(0, Math.min(top, maxHeight));
- 记得在
mouseup或mouseleave时解绑mousemove事件，否则可能持续触发
多个Modal同时拖拽的坑
如果页面存在多个Modal，常见错误是事件监听器互相干扰或坐标计算错乱：
- 不要用全局
$(document).on('mousedown', ...)，而应绑定到具体Modal实例：$modal.on('mousedown', '.modal-header', handler); - 每个Modal的
mouseOffset必须独立保存，不能共用一个变量 - 如果Modal用
data-backdrop="static"或backdrop: false，拖拽时z-index可能被遮挡，需确保.modal-dialog的z-index高于其他浮动元素
最易被忽略的是.modal-dialog的transform：Bootstrap 4+默认用transform: translate()居中，这会让top/left设置失效——必须先清除transform再设position: absolute，或者改用transform做拖拽位移。
