jQuery UI - Draggable不是一个函数？

Question

我试图在页面上一些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，如果我删除它，它就可以正常工作。 有人成功地让这两个一起工作吗？

- Dan

---

你有这个问题页面的实时链接吗？ - Shadi Almosri

不，目前它只在我的本地机器上。 - Dan

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>

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

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

- intotecho

---

完美运行，谢谢！另外更新的库现在在以下位置：<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> - bkunzi01

Answer 2

该问题发布已经四年了，但或许它可以帮助其他遇到这个问题的人。答案也已经在StackExchange的其他地方发布，但我已经找不到链接了，而且很难找到。

答案是：在jQueryTOOLS中，如果你使用默认下载，则会嵌入jQuery 'core' 。

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

解决方法是使用不带有jQuery“core”文件的jQuery工具，这样一切都将正常运行。

- Ideogram

---

+1 虽然这不是我问题的确切解决方案，但它引导我找到了答案。谢谢。 - Wade73

在2017年，这对我很有帮助。谢谢。 - train_fox

抱歉，我不明白您在这个回答中的意思。我按照特定的顺序加载了jquery.min.js和jquery-ui.min.js。我不知道jqueryTOOLS是什么，也没有使用它。 - Loko

请参考下面问题中的“快速编辑”部分。 - Ideogram

我的一个.aspx页面加载了jquery，然后是jquery-ui和再次加载的jquery。我删除了负责后者加载jquery的行，问题得到解决。+1！ - Giorgos Betsos

Answer 3

1. 安装 jquery-ui-dist

   使用 npm

   npm install --save jquery-ui-dist

   或者使用 yarn

   yarn add jquery-ui-dist

2. 在你的应用代码中引入它

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

   或者

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

- srgbnd

---

很棒，节省了我的时间。 - مسعود

你救了我的命。 - Syamsoul Azrien

在使用React时，这个工具帮我节省了很多时间。 - Backrub32

已点赞（它有效，并且答案包括了npm/yarn导入/引用的替代方法，这很棒！），但是答案需要解释一下为什么这适用于jquery-ui-dist而不适用于jquery-ui。 - Clokman

Answer 4

请确保您的代码遵循以下顺序 -

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

- Arijit Basu

---

脚本中的OP表明它确实如此。 - Cee McSharpface

Answer 5

确保你拥有jQuery对象，而不是元素本身。如果按类选择，可能不会得到你预期的结果。

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

jQuery( div.draggable )

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

- Glenn

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>

- danilobraga

Answer 7

我研究了你的问题和另一个重复的问题。
最终，以下回答帮助我解决了问题：
uncaught-typeerror-draggable-is-not-a-function 为了摆脱错误：

$(".draggable").draggable is not a function anymore

我不得不在期望工作的脚本标签之前放置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>

- Moos Meijer

Answer 8

这个问题也可能是由于重复包含普通的jquery库引起的。在我的body和head中都有以下行，这导致了问题。在尝试使用jquery UI时，这从未引起任何问题。

- user2368795

Answer 9

代替

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

- Harsha Biyani

Answer 10

通常出现此错误的原因是您可能正在使用Bootstrap框架，并且已经在其他地方包含了一个jQuery文件，可能是在头部或紧挨着结束的body标签上方。在这种情况下，您只需要在您包含jQuery文件的任何位置包含jQuery UI文件或两个地方都包含它，就可以解决问题...

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

只需在导入其他 Bootstrap 依赖项的地方，包含上述 jQuery UI 脚本即可。

- fortunee