当前位置： 文江博客话题详情

jQuery UI - Draggable 不是一个函数？

发布于 2024-09-03 05:22:43 字数 605 浏览 5 评论 0原文

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

原文

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:

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.

The following is within the head tag of my page:

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（18）

短叹 2024-09-10 05:22:43

发生这种情况的一个常见原因是加载 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。

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

A common reason this occurs is if you don't also load jqueryui after loading 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>

EDIT.
Replace the version number for each library with appropriate or latest values for jquery and jqueryui.

If this doesn't solve the issue, review suggestions in the many other answers.

回复 原文
深巷少女 2024-09-10 05:22:43

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

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

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

解决方案是使用 jQuery 工具而不使用 jQuery“核心”文件，一切都会正常工作。

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.

ANSWER: In jQueryTOOLS, the jQuery 'core' is also embedded if you use the default download.

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.

The solution is to use jQuery tools WITHOUT the jQuery 'core' files and everything will work fine.

回复 原文
一杯敬自由 2024-09-10 05:22:43

  1. 安装jquery-ui-dist

    使用npm

    npm install --save jquery-ui-dist

    或纱线

    yarn add jquery-ui-dist

  2. 将其导入您的应用代码中

    导入'jquery-ui-dist/jquery-ui';

    或

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

  1. Install jquery-ui-dist

    use npm

    npm install --save jquery-ui-dist

    or yarn

    yarn add jquery-ui-dist

  2. Import it inside your app code

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

    or

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

回复 原文
北城挽邺 2024-09-10 05:22:43

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

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

Make sure your code follows this order-

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

回复 原文
情绪失控 2024-09-10 05:22:43

确保您有 jQuery 对象，而不是元素本身。如果你按班级选择，你可能不会得到你所期望的。

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

jQuery( div.draggable )

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

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.

Open up a console and look at what your selector code returns. In Firebug, you should see something like:

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.

回复 原文
情深如许 2024-09-10 05:22:43

您可以导入这些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>

You can import these js Files. It worked fine for me.

<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>
回复 原文
但可醉心 2024-09-10 05:22:43

如果两次包含正常的 jquery 库，也可能会导致此问题。我的身体和头脑中两次出现过以下这句话。

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

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.

It never caused any problems until I tried to use jquery UI as well.

回复 原文
合约呢 2024-09-10 05:22:43

我浏览了您的问题和另一个重复。
最后，以下答案帮助我解决了问题：
uncaught-typeerror-draggable-is-not-a-function< /a>

摆脱：

$(".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>

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

To get rid of :

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

I had to put links to Javascript libraries above the script tag I expected to be working.

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>
回复 原文
面如桃花 2024-09-10 05:22:43

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

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

<!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>
回复 原文
烟花肆意 2024-09-10 05:22:43

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

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

<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>
回复 原文
雨巷深深 2024-09-10 05:22:43

这可能对某些人有帮助：

在我的例子中，我可以通过首先加载draggable所依赖的js文件来消除此错误。它们是 ui.mouse.js、ui.core 和 ui.widget
IE
用户界面核心
小部件工厂
鼠标交互

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

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

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

回复 原文
却一份温柔 2024-09-10 05:22:43

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

此问题的解决方案是创建一个不带选项卡功能的 jQuery 工具的自定义版本（来自此处）。

有关此处发现的冲突的信息：Can JQuery UI 和 JQuery 工具工作一起？

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.

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

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

回复 原文
眼泪也成诗 2024-09-10 05:22:43

代替

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

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>
回复 原文
表情可笑 2024-09-10 05:22:43

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

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

只要在你导入 jquery 文件以及其他引导依赖项的地方包含上面的 jquery ui 脚本即可。

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

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

回复 原文
岛徒 2024-09-10 05:22:43

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

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

If you are developing an Ionic app be sure to include jquery and jquery-ui before ionic.bundle.js!

such a waste of time for something so trivial :(

回复 原文
野の 2024-09-10 05:22:43

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

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

I had this junk at the bottom of my _layout mvc page that I found via chromes debugger (network section) loading jquery 1.10.2 after the jquery / jqueryui sections at the top of the same file. When I removed all that .sortable and .draggable started working.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
回复 原文
离不开的别离 2024-09-10 05:22:43

就我而言，出现此错误的原因是我在错误的位置加载了定义该函数的 jquery 插件。它需要在jquery和jquery ui之后，内容之后，但在函数调用之前。

In my case, the reason for this error was that i loaded the jquery plugin defining the function, in the wrong place. It needs to be after jquery and jquery ui, after the content, but before the function call.

回复 原文
陌伤浅笑 2024-09-10 05:22:43

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

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 :

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

回复 原文
~没有更多了~

关于作者

风为裳

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文