jQuery UI - Draggable不是一个函数？

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

16 个解决方案

#1

4 years after the question got posted, but maybe it will help others who run into this problem. The answer has been posted elswehere on StackExchange as well, but I lost the link and it's hard to find.

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

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 a jQuery tools WITHOUT the jQuery 'core' files and everything will work fine.

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

#2

This issue will also occur if you don't load jqueryui as well as jquery

如果您不加载jqueryui以及jquery也会发生此问题

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>

#3

Make sure your code follows this order-

确保您的代码遵循此命令 -

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

#4

Make sure you have the jQuery object and NOT the 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（）并完成。

#5

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>

#6

If npm is used

如果使用npm

Install jquery-ui-dist

安装jquery-ui-dist

npm install --save jquery-ui-dist

npm install --save jquery-ui-dist
Import it inside your app code

将其导入您的应用代码中

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

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

or

要么

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

要求（ '的jquery-UI-DIST / jQuery的UI'）;

#7

Hey there, this works for me (I couldn't get this working with the Google API links you were using):

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

#8

This code will not work (you can check in firebug jQuery.ui is undefined):

这段代码不起作用（你可以检查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>

#9

This may be helpful for some one :

这可能对某些人有帮助：

In my case i was able to remove this error by first loading the js files on which draggable depends. They were ui.mouse.js, ui.core and ui.widget i.e UI Core Widget Factory Mouse Interaction

在我的情况下，我能够通过首先加载draggable所依赖的js文件来删除此错误。它们是ui.mouse.js，ui.core和ui.widget，即UI Core Widget Factory Mouse Interaction

Make sure the script tag for loading dependencies lies above the draggable js loading tag.

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

#10

jQuery Tools and jQuery UI get in conflict because they both declare jQuery.tabs and the conflict prevents the second one (in this case jQuery UI) from being loaded. This is the reason why you get a draggable is not a function error.

jQuery Tools和jQuery UI之间存在冲突，因为它们都声明了jQuery.tabs，并且冲突阻止了第二个（在这种情况下为jQuery UI）被加载。这就是为什么你得到一个draggable不是函数错误的原因。

A solution to this problem is to create a custom version of jQuery Tools (from here) without the tabs functionality.

这个问题的解决方案是在没有选项卡功能的情况下创建自定义版本的jQuery Tools（从这里开始）。

Informations about the conflict found here: Can JQuery UI and JQuery tools work together?

有关冲突的信息可以在这里找到：Can JQuery UI和JQuery工具可以协同工作吗？

#11

Instead of

代替

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

Use

使用

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

#12

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之前，它从未引起任何问题。

#13

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 ui脚本，无论您在哪里导入jquery文件以及其他引导程序依赖项。

#14

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

如此琐碎的事情浪费时间:(

#15

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

#16

-1

I had the same problem for another reason and my eye needed one hour to find out. I had copy-pasted the script tags that load jquery :

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

My website was using https when accessed from a mobile browser and refused to load jquery-ui without https.

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

#1