Uncaught TypeError: $(...).draggable is not a function
Solution 1
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.
<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!");
}
});
});
Solution 2
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.
zouzou b lebiane
Updated on October 22, 2020Comments
-
zouzou b lebiane over 3 years
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)!!
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
drag("test:not(.ui-draggable)");
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>