如何防止引导模式被拖到其父容器之外？答案

【问题标题】：How to keep bootstrap modal from being dragged outside its parent container?如何防止引导模式被拖到其父容器之外？
【发布时间】：2020-05-14 18:47:28
【问题描述】：

我想知道如何阻止我的引导模式被移出其父模式。简而言之，如何保持引导模式包含在其父级中？

$(document).ready(function() {
  ShowValidatioResult();
});

function ShowValidatioResult() {
  $('#ValidationResultWrapper').modal({
    keyboard: false,
    show: true,
    backdrop: false
  });
  // Jquery draggable
  $('#ValidationResultWrapper .modal-dialog').draggable({
    handle: ".modal-header"
  });
}

#ValidationResultsWrapper {
  border: 1px solid black;
  background-color: white;
}

.modal-dialog {
  width: 400px !important;
}

#ValidationResults {
  margin-top: 5px;
  border: 1px solid black;
  background-color: white;
  height: 200px;
  width: 100%;
  padding: 2px;
}

#ValidationResultsHeader {
  width: 100%;
  background-color: lightgrey;
  padding-left: 5px;
}

#ValidationResultWrapper .modal-body {
  padding: 5px;
}

#wrapper {
  width: 650px;
  height: 700px;
  border: 1px solid black;
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<div id="wrapper">
  <div id="ValidationResultWrapper" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header alert-primary" style="color: white; background-color: #003366; background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);">
          <button type="button" class="close" data-dismiss="modal">&times;</button>

        </div>
        <div class="modal-body">
          Just text
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
</div>

【问题讨论】：

我想这会回答你的问题 - stackoverflow.com/questions/60163388/…

标签： html jquery css twitter-bootstrap

【解决方案1】：

你看过containment -> https://api.jqueryui.com/draggable/#option-containment ...？把代码改成

...
).draggable({
    handle: '.modal-header',
    containment: 'window' //or another element/container
  })
}

已将 sn-p 移植到小提琴 -> http://jsfiddle.net/axr3v9Lz/

【讨论】：

我现在遇到了向左或向右拖动它的问题，但是，它从上到下停留在其容器中
我换种说法吧，它不喜欢向左走，它让我左右拖拽都有自己的想法
谢谢。我正在寻找解决方案；将遏制设置为窗口已修复它。但是，正如@Chris 提到的，我不能把它拖到左边；但可以向右、向上和向下拖动。
@NoBullMan，模态框会填满容器的整个宽度，因此如果您为模态框设置较小的固定宽度，则不能左右拖动（它需要在容器内），您可以左右拖动。希望对您有所帮助。
@davidkonrad 谢谢你的澄清。但我可以向右拖动而不是向左拖动。为什么我可以向右移动但不能向左移动，这让我很困惑。