Question

我试图在页面上的某些div上使用可拖动效果，但每当我加载页面时，都会收到错误消息：

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

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

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

<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工具js包含在页面的头部，如果我删除它，它工作正常。有没有人设法让这两个人一起工作？

Answer 1

出现的一个常见原因是，如果在加载jquery之后还没有加载jqueryui。

例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

EDIT。 将每个库的版本号替换为jquery和jqueryui的适当或最新值。

如果这不能解决问题，请在许多其他答案中查看建议。

Answer 2

问题发布4年后，也许它会帮助遇到此问题的其他人。答案已经发布在StackExchange的其他地方，但我丢失了链接，很难找到。

答案：在jQueryTOOLS中，jQuery＆＃39;核心＆＃39;如果您使用默认下载，也会嵌入。

当您加载jQuery和jQuery工具时，jQuery核心会被定义两次，并且会被设置为＆＃39;任何插件。＆＃39;可拖动＆＃39; （来自jQuery-UI）就是这样一个插件。

解决方案是使用jQuery工具而不使用jQuery＆＃39;核心＆＃39;文件和一切都会正常工作。

Answer 3

安装jquery-ui-dist

使用npm

npm install --save jquery-ui-dist

或yarn

yarn add jquery-ui-dist
将其导入您的应用代码

import 'jquery-ui-dist/jquery-ui';

或

require('jquery-ui-dist/jquery-ui');

Answer 4

确保您的代码遵循此顺序 -

＆＃13;

<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>

＆＃13;

Answer 5

确保您拥有jQuery对象并且 NOT 该元素本身。如果按类选择，则可能无法获得预期效果。

打开一个控制台，查看选择器代码返回的内容。在Firebug中，您应该看到类似的内容：

jQuery( div.draggable )

您可能必须进入数组并获取第一个元素：$('.draggable').first()然后在该jQuery对象上调用draggable（）并完成。

Answer 6

您可以导入这些js文件。它对我来说很好。

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

Answer 7

嘿，这对我有用（我无法使用您使用的 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>

Answer 8

此代码不起作用（您可以检查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>

尝试使用以下代码：

<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>

Answer 9

这对某些人可能有所帮助：

在我的情况下，我能够通过首先加载draggable所依赖的js文件来删除此错误。他们是ui.mouse.js，ui.core和ui.widget 即 UI核心小工具厂鼠标交互

确保加载依赖项的脚本标记位于可拖动的js加载标记之上。

Answer 10

jQuery Tools和jQuery UI之间存在冲突，因为它们都声明了jQuery.tabs，并且冲突阻止了加载第二个（在本例中为jQuery UI）。这就是您收到draggable is not a function错误的原因。

此问题的解决方案是在没有标签功能的情况下创建自定义版本的jQuery Tools（来自here）。

有关冲突的信息，请访问：Can JQuery UI and JQuery tools work together?

Answer 11

而不是

<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>

使用

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

Answer 12

导致此错误的原因通常是因为您可能正在使用引导框架并且已经在其他位置包含了一个jquery文件，可能位于关闭正文标记的顶部或正上方，在这种情况下，您需要做的就是包含jquery ui文件，只要你有jquery文件，或者在这两个地方你都可以...

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

只要包含上面的jquery ui脚本，无论你在哪里导入jquery文件以及其他引导程序依赖项。

Answer 13

如果您正在开发Ionic应用程序，请确保在ionic.bundle.js之前包含jquery和jquery-ui！

如此琐碎的事情浪费时间：（

Answer 14

我完成了你的问题和另一个问题duplicate 最后，以下答案帮助我解决问题：
uncaught-typeerror-draggable-is-not-a-function

摆脱：

$（“。draggable”）。draggable不再是一个功能

我必须将链接添加到脚本标记上方的Javascript库我希望它能够正常工作。

我的代码：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" />

<script>
    $(function(){
        $("#container-speed").draggable();
    });
</script>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="rowbackground"style="width: 600px; height: 400px; margin: 0 auto">
                <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
                <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
            </div>
        </div>
    </div>
</div>

Answer 15

我在chrome调试器（网络部分）找到的_layout mvc页面的底部有一个垃圾，在同一文件顶部的jquery / jqueryui部分之后加载了jquery 1.10.2。当我删除所有.sortable和.draggable即可开始工作。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Answer 16

由于其他原因，我遇到了同样的问题，我的眼睛需要一个小时才能找到答案。我已经复制粘贴了加载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，但拒绝在没有https的情况下加载jquery-ui。

jQuery UI - Draggable不是一个函数？

16 个答案: