jQuery UI - Draggable 不是一个函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2895894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI - Draggable is not a function?
提问by Dan
I've trying to use the draggable effect on some divs on a page, but whenever I load the page, I get the error message:
我试图在页面上的某些 div 上使用可拖动效果，但是每当我加载页面时，我都会收到错误消息：
Error: $(".draggable").draggable is not a function
I've had a look around it seemed other people were having this problem as they had not included the jQuery UI javascript file, but I definitely have.
我环顾四周，似乎其他人遇到了这个问题，因为他们没有包含 jQuery UI javascript 文件，但我确实有。
The following is within the head tag of my page:
以下内容在我页面的 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>
Can anyone suggest a solution?
任何人都可以提出解决方案吗？
Any advice appreciated.
任何建议表示赞赏。
Thanks.
谢谢。
Quick edit, I also have the jquery tools js included in the head of the page, if I remove this it works OK. Has anyone managed to get these two working together?
快速编辑，我还在页面的头部包含了 jquery 工具 js，如果我删除它，它就可以正常工作。有没有人设法让这两个一起工作？
回答by intotecho
A common reason occurs is if you don't also load jqueryui after loading jquery.
一个常见的原因是如果你在加载 jquery 之后没有加载 jqueryui。
For example:
例如：
<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.Replace the version number for each library with appropriate or latest values for jqueryand jqueryui.
编辑。将每个库的版本号替换为jquery和jqueryui 的适当或最新值。
If this doesn't solve the issue, review suggestions in the many other answers.
如果这不能解决问题，请查看许多其他答案中的建议。
回答by Ideogram
4 years after the question got posted, but maybe it will help others who run into this problem. The answer has been posted elsewhere on StackExchange as well, but I lost the link and it's hard to find.
问题发布 4 年后，但也许它会帮助遇到此问题的其他人。答案也已发布在 StackExchange 的其他地方，但我丢失了链接并且很难找到。
ANSWER: In jQueryTOOLS, the jQuery 'core' is also embedded if you use the default download.
解答：在 jQueryTOOLS 中，如果您使用默认下载，jQuery 'core' 也会被嵌入。
When you load jQuery and jQuery tools, jQuery core gets defined twice and will 'unset' any plugins. 'Draggable' (from jQuery-UI) is such a plug-in.
当您加载 jQuery 和 jQuery 工具时，jQuery 核心会被定义两次并将“取消设置”任何插件。'Draggable'（来自 jQuery-UI）就是这样一个插件。
The solution is to use jQuery tools WITHOUT the jQuery 'core' files and everything will work fine.
解决方案是使用 jQuery 工具而不使用 jQuery“核心”文件，一切都会正常工作。
回答by srgbnd
Install jquery-ui-dist
use npm
npm install --save jquery-ui-distor yarn
yarn add jquery-ui-distImport it inside your app code
import 'jquery-ui-dist/jquery-ui';or
require('jquery-ui-dist/jquery-ui');
回答by Arijit Basu
Make sure your code follows this order-
确保您的代码遵循此顺序-
<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>回答by Glenn
Make sure you have the jQuery object and NOTthe element itself. If you select by class, you may not be getting what you expect.
确保您拥有 jQuery 对象而不是元素本身。如果您按类别选择，您可能不会得到您期望的结果。
Open up a console and look at what your selector code returns. In Firebug, you should see something like:
打开控制台并查看选择器代码返回的内容。在 Firebug 中，您应该看到如下内容：
jQuery( div.draggable )
You may have to go into an array and grab the first element: $('.draggable').first()Then call draggable() on that jQuery object and you're done.
您可能需要进入一个数组并获取第一个元素：$('.draggable').first()然后对该 jQuery 对象调用 draggable() 并完成。
回答by danilobraga
You can import these js Files. It worked fine for me.
你可以导入这些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>
回答by user2368795
This issue can also be caused if you include the normal jquery library twice. I had the following line twice, in my body and head.
如果您两次包含普通的 jquery 库，也可能导致此问题。我在我的身体和头部有两次以下行。
It never caused any problems until I tried to use jquery UI as well.
在我尝试使用 jquery UI 之前，它从未引起任何问题。
回答by Fortune Ekeruo
The cause to this error is usually because you're probably using a bootstrap framework and have already included a jquery file somewhere else may at the head or right above the closing body tag, in that case all you need to do is to include the jquery ui file wherever you have the jquery file or on both both places and you'll be fine...
此错误的原因通常是因为您可能正在使用引导框架并且已经在其他地方可能包含一个 jquery 文件，该文件可能位于结束正文标记的头部或正上方，在这种情况下，您需要做的就是包含 jquery ui 文件，无论您在何处都有 jquery 文件或在两个地方，您都会没事...
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
just include the above jquery ui script wherever you are importing the jquery file along with other bootstrap dependencies.
只需在您导入 jquery 文件以及其他引导程序依赖项的任何位置包含上述 jquery ui 脚本即可。
回答by Moos Meijer
I went through both your question and a another duplicate.
In the end, the following answer helped me sorting things out:
uncaught-typeerror-draggable-is-not-a-function
我经历了你的问题和另一个重复的问题。
最后，下面的答案帮我理清了思路：
uncaught-typeerror-draggable-is-not-a-function
To get rid of :
摆脱：
$(".draggable").draggable is not a function anymore
$(".draggable").draggable 不再是一个函数
I had to put links to Javascript libraries above the script tagI expected to be working.
我必须将指向 Javascript 库的链接放在我希望工作的脚本标签上方。
My code:
我的代码：
<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>
回答by Sergio Morstabilini
If you are developing an Ionic app be sure to include jquery and jquery-ui before ionic.bundle.js!
如果您正在开发 Ionic 应用程序，请确保在 ionic.bundle.js 之前包含 jquery 和 jquery-ui！
such a waste of time for something so trivial :(
这么琐碎的事情真是浪费时间:(
