jQuery 未捕获的类型错误：$(...).draggable 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32219513/
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
Uncaught TypeError: $(...).draggable is not a function
提问by zouzou b lebiane
hello everyone i am trying to make some divs draggable and i have managed to do that with jquery-ui. i also have a script that removes 2 divs and combine them in a single one (like if they have been merged together) but when i call the draggable function on the new "merged" div i get the error is the title... so what is the problem ? how is it possible that .draggable function work one place and not in an other (on the same file)!!
大家好，我正在尝试制作一些可拖动的 div，并且我已经成功地使用 jquery-ui 做到了这一点。我还有一个脚本，可以删除 2 个 div 并将它们合并为一个（就像它们已合并在一起一样）但是当我在新的“合并”div 上调用可拖动函数时，我得到的错误是标题...所以问题是什么 ？.draggable 函数怎么可能在一个地方工作而不是在另一个地方（在同一个文件上）！
this is the draggable function:
这是可拖动的功能：
function drag($class){
$("."+$class).draggable({
containment: ".tab-content",
grid: [ 3, 3 ],
zIndex:100,
obstacle: "#nothere",
preventCollision: true,
drag:
function(){
$(".test").css("background-color","red");
$(this).css("background-color","green");
}
});
}
first i called it for the test class which work perfectly with no error
首先我为测试类调用它，它完美地工作，没有错误
drag("test");
but when i call it another time inside the merge function it return the error: Uncaught TypeError: $(...).draggable is not a function
但是当我在合并函数中再次调用它时，它返回错误：Uncaught TypeError: $(...).draggable is not a function
drag("test:not(.ui-draggable)");
the js file are loaded properly:
js文件被正确加载：
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
采纳答案by Gary
I know this is an old question but since I had the same problem and couldn't find the answer...
我知道这是一个老问题，但由于我遇到了同样的问题并且找不到答案......
I had all of the correct scripts included, checked that the links were valid etc and it still wasn't working.
我包含了所有正确的脚本，检查了链接是否有效等，但它仍然无法正常工作。
I then moved the script references to be directly above the code that calls .draggable and.. it works perfectly.
然后我将脚本引用移动到调用 .draggable 的代码正上方，并且……它完美地工作。
<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 type="text/javascript">
$(function () {
$(".regionStyle li").draggable();
$(".regionStyle").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Item Dropped!");
}
});
});
回答by Beri
Be sure to include in your project this files:
确保在您的项目中包含以下文件：
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Check their example. Use Developer tools (F12 under Chrome) to see if all resources have been imported.
检查他们的例子。使用开发者工具（Chrome 下的 F12）查看是否所有资源都已导入。
