javascript - jQuery UI 拖动 div 不起作用

Question

我正在尝试让一个 div 在另一个 div 的包含范围内可拖动。

我正在使用 jQuery UI 来执行此操作，但似乎无法使其工作。

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script>
$(".example").draggable({
  containment: ".box"
});
</script>
<div class="box" style="border: solid 1px black; width:500px; height:500px;">
  <div class="example" style="border: solid 1px black; width:90px; height:90px;">Drag me</div>
</div>

我正在使用 Bootstrap ，是否有其他正在加载的文件可能导致此问题？

Answer 1

您的draggable函数未被调用。将其放在标记的头部部分，例如 jQuery Ui example 。另外，您应该检查 Javascript 控制台是否存在可能的错误 - 在那里您将看到您的 jquery 是否已正确加载。

$(".example").draggable({ containment: ".box" });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="box" style="border: solid 1px black; width:500px; height:500px;">
  <div class="example" style="border: solid 1px black; width:90px; height:90px;">Drag me</div>
</div>