bootstrap Modal可拖动

是的，Bootstrap Modal 是可以被拖动的。你需要使用 JavaScript 实现这个功能，具体步骤如下：

1. 给 Modal 添加一个头部，以便用户可以点击并拖动它。

2. 绑定 Modal 的 mousemove 事件，以便在拖动时更新 Modal 的位置。

3. 绑定 Modal 的 mouseup 事件，以便在释放鼠标时停止拖动。

下面是示例代码：

HTML：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal content goes here.
      </div>
    </div>
  </div>
</div>

CSS：

.modal-header {
  cursor: move;
}

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('mousemove', 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 属性来实现移动效果。