是的，Bootstrap
Modal 是可以被拖动的。你需要使用 JavaScript 实现这个功能，具体步骤如下：
1. 给
Modal 添加一个头部，以便用户可以点击并拖动它。
2. 绑定
Modal 的
mouse
move 事件，以便在拖动时更新
Modal 的位置。
3. 绑定
Modal 的
mouseup 事件，以便在释放鼠标时停止拖动。
下面是示例代码：
HTML：
```html
<div class="
modal fade" id="my
Modal" tabindex="-1" role="dialog" aria-labelledby="my
ModalLabel">
<div class="
modal-dialog" role="document">
<div class="
modal-content">
<div class="
modal-header">
<h4 class="
modal-title" id="my
ModalLabel">
Modal Title</h4>
<button type="button" class="close" data-dismiss="
modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="
modal-body">
Modal content goes here.
</div>
</div>
</div>
</div>
```
CSS：
```css
.
modal-header {
cursor:
move;
}
```
JavaScript：
```javascript
var isDragging = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
var
modalHeader = document.querySelector('.
modal-header');
modalHeader.addEventListener('
mousedown', dragStart);
modalHeader.addEventListener('
mouseup', dragEnd);
modalHeader.addEventListener('
mouse
move', drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target ===
modalHeader) {
isDragging = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
}
function drag(e) {
if (isDragging) {
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY,
modalHeader);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)';
}
```
这段代码将鼠标在
Modal 头部上按下时开始拖动，鼠标移动时更新
Modal 的位置，鼠标释放时停止拖动。注意，这里使用了 CSS3 的 transform 属性来实现移动效果。
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
