bootstrap modal可移动

是的，Bootstrap Modal 可以移动。你可以使用 jQuery UI 的 "draggable" 函数将 Modal 变成可拖动的。下面是一个示例代码：

<!-- 引入jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- 给Modal添加一个id，例如"myModal" -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal内容 -->
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 将Modal变成可拖动的
  $("#myModal").draggable({
    handle: ".modal-header"
  });
});
</script>

在上面的代码中，我们首先引入了 jQuery UI 库。然后给 Modal 添加了一个 id，例如 "myModal"。最后，在 jQuery 的 ready() 函数中，我们使用 draggable() 函数将 Modal 变成可拖动的，其中 handle 选项指定了 Modal 的拖动区域为 modal-header。

相关问题

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

bootstrap modal可以拖动

是的，Bootstrap Modal可以通过添加一些JavaScript代码使其可拖动。你需要为Modal添加一个mousedown事件监听器，当鼠标按下时，记录鼠标的位置。然后在mousemove事件中，计算鼠标的偏移量，并使用CSS将Modal移动到新位置。最后，在mouseup事件中，停止移动Modal并取消事件监听器。以下是一个示例代码：

$('#myModal').on('show.bs.modal', function () {
  var modal = $(this);
  var draggable = modal.find('.modal-dialog');

  draggable.css('top', '');
  draggable.css('left', '');

  modal.on('mousedown', function (event) {
    var isDraggable = $(event.target).closest('.modal-header, .modal-dialog').length > 0;
    if (!isDraggable) {
      return;
    }

    var offsetX = event.clientX - parseFloat(draggable.css('left'));
    var offsetY = event.clientY - parseFloat(draggable.css('top'));

    $(document).on('mousemove.draggable', function (event) {
      draggable.css('left', event.clientX - offsetX);
      draggable.css('top', event.clientY - offsetY);
    });

    $(document).on('mouseup.draggable', function () {
      $(document).off('mousemove.draggable mouseup.draggable');
    });
  });
});

这段代码可以让Modal的标题栏和内容区域都可拖动。