jQuery UI - Draggable不是一个函数？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery UI - Draggable不是一个函数？相关的知识，希望对你有一定的参考价值。
我试图在页面上的某些div上使用可拖动效果，但每当我加载页面时，我都会收到错误消息：
Error: $(".draggable").draggable is not a function
我已经看过它似乎其他人有这个问题因为他们没有包含jQuery UI javascript文件，但我肯定有。
以下是我页面的标题内：
<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包含在页面的头部，如果我删除它工作正常。有没有人设法让这两个人一起工作？
出现的一个常见原因是，如果在加载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的适当或最新值替换每个库的版本号。
如果这不能解决问题，请在许多其他答案中查看建议。
jQuery Tools和jQuery UI之间存在冲突，因为它们都声明了jQuery.tabs，并且冲突阻止了第二个（在这种情况下为jQuery UI）被加载。这就是为什么你得到draggable is not a function错误的原因。
解决此问题的方法是在没有选项卡功能的情况下创建jQuery Tools的自定义版本（来自here）。
在这里找到有关冲突的信息：Can JQuery UI and JQuery tools work together?
代替
<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>
如果您包括两次正常的jquery库，也会导致此问题。在我的身体和头部，我有两次以下的线。
在我尝试使用jquery UI之前，它从未引起任何问题。
导致此错误的原因通常是因为您可能正在使用引导框架并且已经在其他位置包含了一个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 ui脚本，无论你在哪里导入jquery文件以及其他引导程序依赖项。
如果您正在开发Ionic应用程序，请确保在ionic.bundle.js之前包含jquery和jquery-ui！
如此琐碎的事情浪费时间:(
我经历了你的问题和另一个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>
我出于另一个原因遇到了同样的问题，我的眼睛需要一个小时才能找到答案。我已经复制粘贴了加载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。
问题发布4年后，但也许会帮助遇到此问题的其他人。答案已经发布在StackExchange的其他地方，但我丢失了链接，很难找到。
解答：在jQueryTOOLS中，如果使用默认下载，jQuery'core'也会嵌入。
当你加载jQuery和jQuery工具时，jQuery核心被定义两次并且将“取消设置”任何插件。 'draggable'（来自jQuery-UI）就是这样一个插件。
解决方案是使用没有jQuery'核心'文件的jQuery工具，一切都会正常工作。
- 安装jquery-ui-dist
使用npm
npm install --save jquery-ui-dist或者yarnyarn add jquery-ui-dist - 将其导入您的应用代码中
import 'jquery-ui-dist/jquery-ui';要么require('jquery-ui-dist/jquery-ui');
确保您的代码遵循此命令 -
<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>确保你有jQuery对象而不是元素本身。如果您按班级选择，您可能无法获得预期。
打开一个控制台，查看选择器代码返回的内容。在Firebug中，你应该看到类似的东西：
jQuery( div.draggable )
您可能必须进入一个数组并获取第一个元素：$('.draggable').first()然后在该jQuery对象上调用draggable（）并完成。
您可以导入这些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>
嘿，这对我有用（我无法使用您使用的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>
这段代码不起作用（你可以检查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>
这可能对某些人有帮助：
在我的情况下，我能够通过首先加载draggable所依赖的js文件来删除此错误。它们是ui.mouse.js，ui.cor
以上是关于jQuery UI - Draggable不是一个函数？的主要内容，如果未能解决你的问题，请参考以下文章