jQuery UI - Draggable 不是一个函数？答案

【问题标题】：jQuery UI - Draggable is not a function?jQuery UI - Draggable 不是一个函数？
【发布时间】：2010-05-24 09:17:24
【问题描述】：

我尝试在页面上的某些 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 工具 js，如果我删除它就可以了。有没有人设法让这两者一起工作？

【问题讨论】：

您是否有指向存在此问题的页面的实时链接？
不，它只是在我的本地机器atm上

标签： jquery draggable

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

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

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

【讨论】：

完美运行，谢谢！在旁注中，更新的库现在位于：

【解决方案2】：

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

回答：在 jQueryTOOLS 中，如果您使用默认下载，也会嵌入 jQuery“核心”。

当您加载 jQuery 和 jQuery 工具时，jQuery 核心会被定义两次，并且会“取消设置”任何插件。 'Draggable'（来自 jQuery-UI）就是这样一个插件。

解决方案是使用没有 jQuery 'core' 文件的 jQuery 工具，一切都会正常工作。

【讨论】：

+1 虽然这不是我问题的确切解决方案，但它引导我找到了答案。谢谢。
在 2017 年这对我有帮助。谢谢。
对不起，但我不知道你对这个答案的意思。我已经按这个特定的顺序加载了 jquery.min.js 和 jquery-ui.min.js。我不知道 jqueryTOOLS 是什么，我也不使用它。
参考下面问题中的部分“快速编辑”。
我的一个 .aspx 页面加载了 jquery，然后再次加载了 jquery-ui 和 jquery。我删除了负责稍后加载 jquery 的行，问题得到了修复。 +1！

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

【讨论】：

很棒的答案。节省了我的时间
你救了我的命
在使用 React 时节省了我的时间
赞成（它有效，答案包括替代 npm/yarn import/require！），但答案可以解释为什么这适用于 jquery-ui-dist 但不适用于 @987654329 @.

【解决方案4】：

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

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

【讨论】：

OP 中的脚本会建议这样做。

【解决方案5】：

确保您有 jQuery 对象，而没有元素本身。如果您按班级选择，您可能无法获得预期的结果。

打开控制台并查看选择器代码返回的内容。在 Firebug 中，您应该会看到如下内容：

jQuery( div.draggable )

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

【讨论】：

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

【讨论】：

【解决方案7】：

我回答了你的问题和另一个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>

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

为什么要加载 jQuery 两次？
我不记得了。可能我没注意

【解决方案10】：

这可能对某些人有帮助：

在我的情况下，我能够通过首先加载可拖动的 js 文件来消除此错误。它们是 ui.mouse.js、ui.core 和 ui.widget IE 用户界面核心小部件工厂鼠标交互

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

【讨论】：

【解决方案11】：

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

解决这个问题的方法是创建一个没有标签功能的自定义版本的 jQuery 工具（来自here）。

在此处找到有关冲突的信息：Can JQuery UI and JQuery tools work together?

【讨论】：

【解决方案12】：

代替

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

【讨论】：

【解决方案13】：

如果您包含两次正常的 jquery 库，也可能会导致此问题。我的身体和头部有两次以下线。

在我尝试使用 jquery UI 之前，它从未引起任何问题。

【讨论】：

【解决方案14】：

此错误的原因通常是因为您可能正在使用引导框架，并且已经在其他地方包含了一个 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 文件以及其他引导程序依赖项的任何位置包含上述 jquery ui 脚本即可。

【讨论】：

【解决方案15】：

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

为这么琐碎的事情浪费时间:(

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

由于另一个原因，我遇到了同样的问题，我的眼睛需要一个小时才能发现。我已经复制粘贴了加载 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。

【讨论】：