未捕获的TypeError:$(...).draggable不是函数

本文介绍了未捕获的TypeError:$(...).draggable不是函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

大家好，我正在尝试使某些div可拖动，而我设法使用jquery-ui做到了这一点.我也有一个脚本，删除了2个div并将它们合并为一个(例如，如果它们已经合并在一起)，但是当我在新的合并"的div上调用draggable函数时，得到的错误是标题...所以问题是什么 ? .draggable函数怎么可能在一个地方工作而不在另一个地方工作(在同一文件中)！

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

这是可拖动功能:

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");

但是当我在合并函数中再次调用它时，它返回错误: 未被捕获的TypeError:$(...).draggable不是函数

but when i call it another time inside the merge function it return the error: Uncaught TypeError: $(...).draggable is not a function

drag("test:not(.ui-draggable)");

js文件已正确加载:

the js file are loaded properly:

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script>

推荐答案

我知道这是一个老问题，但是由于我遇到了同样的问题，所以找不到答案...

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.

然后，我将脚本引用移到了调用.draggable的代码的正上方，并且它可以正常工作.

I then moved the script references to be directly above the code that calls .draggable and.. it works perfectly.

<link rel="stylesheet" href="code.jquery/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/> <script type="text/javascript" src="code.jquery/jquery-1.12.4.min.js" /> <script type="text/javascript" src="code.jquery/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!"); } }); });