jQuery UI 拖动 div 不起作用答案

【问题标题】：jQuery UI drag div not workingjQuery UI 拖动 div 不起作用
【发布时间】：2016-09-27 05:31:10
【问题描述】：

我试图让一个 div 成为 draggable 包含在另一个 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>

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

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案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>

【讨论】：

控制台显示 draggable 不是函数 "Uncaught TypeError: $(...).draggable is not a function"
那么你的 jQuery UI 文件没有加载...检查正确的路径和拼写。您可以使用<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 代替您的本地文件，看看它是否有效。
刚刚尝试在您的 sn-p 中使用在线托管的 js 文件并注释掉我的但仍然遇到同样的问题
查看您的浏览器源代码：jquery-ui.min.js 链接是否真正指向文件的内容？
两者都正确链接到源代码中的文件，链接为code.jquery.com/ui/1.12.1/jquery-ui.min.js ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js它们与jquery ui的顺序正确

【解决方案2】：

试试这个：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Containment drag functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( ".example" ).draggable({ containment: ".box" });
  } );
  </script>
</head>
<body>

<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> 
</body>
</html>

【讨论】：

这段代码可以独立运行，但是当我在我的网页中实现时，我仍然遇到了问题。我正在使用引导程序，是否正在加载其他可能导致此问题的文件？
确保您实际加载了所需的 jQuery 库。通过将以下库插入<head> 部分，将它们加载到您的网页中。 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><link rel="stylesheet" href="/resources/demos/style.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

【解决方案3】：

您需要将draggable() 函数包装在$(document).ready() 中：

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

您可以通过右键单击检查元素来检查是否应用了draggable()，并查看是否存在任何类，例如ui-draggable 或ui-draggable-handle。如果是这样，它就成功了。

此外，请确保您实际加载了所需的 jQuery 库。您可以像这样获取最新版本：

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

【讨论】：

只要确保 JS 链接的路径正确 "js/jquery-3.1.1.min.js" ，上述解决方案应该可以正常工作。如果路径不正确，您将在控制台日志中收到 GET 请求错误。建议使用 CDN 作为 Andreas 的回答，这在应用程序的部署阶段会很有用。