jqueryui-Draggable不是一个函数吗？

我试图在页面上的某些div上使用draggable效果，但每当我加载页面时，都会收到错误消息：

Error: $(".draggable").draggable is not a function

我环顾四周，似乎其他人也有这个问题，因为他们没有包含jQueryUIJavaScript文件，但我肯定有

以下内容位于我的页面的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包含在页面的头部，如果我删除它，它可以正常工作。有没有人能让这两个链接一起工作？

嘿，这对我来说很有用（我无法使用您使用的谷歌API链接）：

牛肉卷饼
asdasd
$（“.draggable”）.draggable（）；

确保您拥有jQuery对象，而不是元素本身。如果你按类别选择，你可能得不到你想要的

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

jQuery( div.draggable )

您可能必须进入数组并获取第一个元素：

$（'.draggable'）。首先（）

然后在该jQuery对象上调用draggable（），您就完成了。

此代码将不起作用（您可以检入firebug jQuery.ui未定义）：

请尝试使用以下代码：

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

---

问题发布4年后，也许它会帮助其他遇到这个问题的人。答案也在StackExchange的其他地方发布，但我丢失了链接，很难找到

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

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

---

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

这可能对某些人有所帮助：

在我的例子中，我能够通过首先加载draggable所依赖的js文件来消除这个错误。它们是ui.mouse.js、ui.core和ui.widget 即 用户界面核心 高斯消元法 鼠标交互

---

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

jQuery工具和jQuery UI发生冲突，因为它们都声明了

jQuery.tabs

，并且冲突会阻止加载第二个（在本例中为jQuery UI）。这就是为什么您会得到一个

draggable不是函数的原因

这个问题的解决方案是创建一个自定义版本的jquerytools（from），而不使用tabs功能

有关此处发现的冲突的信息：
一个常见的原因是，如果在加载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>



编辑。
用和的适当或最新值替换每个库的版本号

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

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



使用

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

如果两次包含普通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文件的任何位置包含上述jquery ui脚本以及其他引导依赖项即可。
确保代码遵循以下顺序-


我有同样的问题是因为另一个原因，我的眼睛需要一个小时才能找到答案。
我复制粘贴了加载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。
如果您正在开发Ionic应用程序，请确保在Ionic.bundle.js之前包含jquery和jquery ui

为了这么琐碎的事情浪费了这么多时间：(

安装

使用

npm安装--保存jquery ui dist

或

jawn add jquery ui dist

将其导入应用程序代码中

导入'jquery ui dist/jquery ui'；

或

require（'jquery-ui-dist/jquery-ui'）；

我把你的问题和另一个问题都讨论了一遍。

最后，以下答案帮助我理清了问题：


为了摆脱：

$（“.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>


$（函数（）{
$（“#容器速度”）.draggable（）；
});
我在我的_layoutMVC页面底部发现了这个垃圾，我通过chromes调试器（网络部分）在同一文件顶部的jquery/jqueryui部分之后加载了jquery 1.10.2。当我删除所有这些时，.sortable和.draggable开始工作

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

你有这个问题的网页链接吗？没有，它只是在我的本地机器atm+1上，虽然这不是我问题的确切解决方案，但它引导我找到答案。谢谢。2017年，这对我有帮助。谢谢。对不起，我不知道这个答案是什么意思。我已经按照这个特定的顺序加载了jquery.min.js和jquery-ui.min.js。我不知道现在，jqueryTOOLS是什么，我也不使用它。请参阅下面问题中的“quic”部分
<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>

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

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