logo标签列表

jQuery UI - Draggable不是一个函数？

jquerydraggable
69

我试图在页面上一些div上使用可拖动效果，但每次加载页面时都会出现错误信息：

Error: $(".draggable").draggable is not a function

我看了一下似乎其他人也遇到了这个问题，因为他们没有包含jQuery UI的javascript文件，但是我肯定已经包含了。

以下内容位于我的页面的head标签内：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

有人能提供一个解决方案吗？

任何建议都将不胜感激。

谢谢。

快速编辑，我还在页面头部包含了jquery tools js，如果我删除它，它就可以正常工作。 有人成功地让这两个一起工作吗？

你有这个问题页面的实时链接吗？ - Shadi Almosri
不，目前它只在我的本地机器上。 - Dan
18个回答
1

嘿，这对我有用（我无法使用你正在使用的 Google API 链接使其工作）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Beef Burrito</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
    <script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    </head>
<body>
    <div class="draggable" style="border: 1px solid black; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px;">asdasd</div>

    <script type="text/javascript">
        $(".draggable").draggable();
    </script>
</body>
</html>
1

这段代码将无法工作（您可以在Firebug中检查，jQuery.ui未定义）：

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

Try use follow code:

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
1
为什么要加载两次jQuery？ - Tushar
我不记得了。也许当时我没有注意。 - RouR
1
jQuery Tools和jQuery UI之间存在冲突，因为它们都声明了jQuery.tabs，这个冲突会阻止第二个（在这种情况下是jQuery UI）被加载。这就是为什么你会得到一个draggable is not a function错误的原因。
解决这个问题的方法是创建一个没有选项卡功能的自定义版本的jQuery Tools（从这里），来避免这个冲突。
关于这个冲突的信息可以在这里找到：Can JQuery UI and JQuery tools work together?
1
这可能对某些人有帮助：
在我的情况下，我能够通过首先加载draggable依赖的js文件来消除此错误。它们是ui.mouse.js、ui.core和ui.widget 即 UI核心 Widget工厂 鼠标交互
确保用于加载依赖项的脚本标记位于可拖动的js加载标记上方。
1
如果您正在开发Ionic应用程序，请确保在ionic.bundle.js之前包含jquery和jquery-ui！这对于如此微不足道的事情而言真是浪费时间 :(
1
我在我的_layout mvc页面底部发现了一些垃圾，通过Chrome的调试器（网络部分）加载jquery 1.10.2，而在同一文件的顶部加载了jquery / jqueryui部分。当我删除了所有的.sortable和.draggable时，它们开始工作了。
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
0
在我的情况下，出现这个错误的原因是我在错误的位置加载了定义函数的jQuery插件。它需要在内容之后、函数调用之前加载jQuery和jQuery UI。
-1

我曾经因为另一个原因遇到了同样的问题，花了一个小时才找出来。 我复制粘贴了加载jquery的脚本标签：

<script src="**https**://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="**http**://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

我的网站在移动浏览器上使用https访问，拒绝加载jquery-ui而不使用https。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接