jQuery UI Draggable function is not working

Question

I've included the jquery library, afterward the jQuery UI library, and it still doesn't work. I am Using Google Chrome browser.

code Follows:

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script>
<script type="text/javascript">
    $(function() {
        $( ".drag" ).draggable();
    });
</script>

<div id="aboutBox" class="boxLook boxBg drag"></div>

I can't find any solutions anywhere. The debugger says that the method draggable doesn't exist. But I've added jQuery AND jQuery UI, and the paths are correct! it just doesn't work.

The jquery ui js file you are using, does it include the draggable module? Try recreating your jquery ui file from their website and make sure draggable is included. — Kokos
– Kokos, Commented Aug 23, 2011 at 9:52
i opened the jquery ui JS file and searched for draggable and it existed, i also added ui-draggable to the about box. Still Nothing — AlexMorley-Finch
– AlexMorley-Finch, Commented Aug 23, 2011 at 9:59

Kokos · Accepted Answer · 2011-08-23 10:07:19Z

15

You have one of these problems:

Your jQuery or jQuery UI Javascript path files are wrong
Your jQuery UI does not include draggable
Your jQuery or jQuery UI Javascript files are corrupted
Your div is unstyled and empty, therefore there is nothing to drag
Something is colliding with your jQuery or jQuery UI so it doesn't work

Your code is correct, and it should work:

http://jsfiddle.net/u7zWA/

answered Aug 23, 2011 at 10:07

Kokos

9,1715 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AlexMorley-Finch Over a year ago

Okay, Strangly i got it to work. Rather than adding the scripts through my project a fetched the code from "ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" And it works! Yaay! But Now i Have Another Problem, I can Drag The Div. But When i release the div, it returns to its original Position :s

Kokos Over a year ago

draggable({ revert: false }), if my answer helped you please upvote and accept :)

ErichBSchulz Over a year ago

6. You are loading you ui script before jquery

Parrotmaster Over a year ago

The fiddle doesn't work for me. Using latest Edge.

Maxooo · Accepted Answer · 2012-04-30 23:17:11Z

4

Try this :

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="type/javascript"></script>
<script src="js/ui/jquery.ui.draggable.js" type="type/javascript"></script>
<script type="text/javascript">
    $(function() {
        $( ".drag" ).draggable();
    });
</script>

<div id="aboutBox" class="boxLook boxBg drag"></div>

You have to implements the draggable component to your project, and include it ! http://jqueryui.com/download

edited Apr 30, 2012 at 23:17

answered Aug 23, 2011 at 10:12

Maxooo

1535 bronze badges

1 Comment

donut Over a year ago

It's probably included in js/jquery-ui-1.8.16.custom.min.js. "custom" is the suffix used to denote custom builds of the jQuery UI library.

Colin · Accepted Answer · 2016-11-25 15:19:38Z

2

In my case I was using an older version of jQuery UI. I replaced the old reference with the following and everything started working as intended.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

answered Nov 25, 2016 at 15:19

Colin

1,8661 gold badge21 silver badges25 bronze badges

Comments

Valamas · Accepted Answer · 2013-10-15 02:59:46Z

1

My issue was that I had another event bound to mousemove that contained a e.stopPropagation(); which prevented the .draggable() mouse code from working.

$(document).on('mousemove', '*', function (e) { MyFunction(e); });

function MyFunction (sender, e)
{
    e.stopPropagation();
    ...
}

The solution was to remove the e.stopPropagation(); and re-evaluate its implementation.

answered Oct 15, 2013 at 2:59

Valamas

24.8k25 gold badges111 silver badges182 bronze badges

3 Comments

Andriy Boyko Over a year ago

console output: "Uncaught TypeError: Cannot read property 'stopPropagation' of undefined". Could you please point a reason?

Valamas Over a year ago

check you are passing e through the function tree

davlovsky Over a year ago

Thanks bro. I spent a good 6 hours trying to figure out what was wrong. Turns out there was a discrepancy between two .js files I had loading in the same view.

periback2 · Accepted Answer · 2014-05-27 19:49:53Z

1

I fixed it by setting the dialog's position as fixed. It worked like a magic, after hours of stress:

.ui-dialog {
    position: fixed;
}

answered May 27, 2014 at 19:49

periback2

1,4694 gold badges19 silver badges36 bronze badges

Comments

Valamas · Accepted Answer · 2013-10-15 03:01:17Z

0

Check whether your draggable object is already loaded in the viewport. If it is not, it won't work properly.

My advice is to add this code

<script type="text/javascript">             
$(function() {                         
    $( ".drag" ).draggable({ helper:'clone' });
});
 </script>

JUST AFTER the draggable object to be absolutely sure that everything is loaded at the correct time.

When you'll be sure everything is ok, then you'll be able to refactor.

edited Oct 15, 2013 at 3:01

Valamas

24.8k25 gold badges111 silver badges182 bronze badges

answered Jul 2, 2013 at 9:53

Alex Moleiro

1,16411 silver badges13 bronze badges

Comments

Nanki · Accepted Answer · 2015-05-18 16:33:54Z

0

Another potential reason is that you've turned all drag events off somewhere else in your code, using something like this:

window.ondragstart = function () { return false; };

This will stop the jQuery UI drag event from firing.

answered May 18, 2015 at 16:33

Nanki

8288 silver badges9 bronze badges

Comments

Sandeep Sherpur · Accepted Answer · 2019-08-23 08:16:53Z

0

I had same issue and i have solve my issue with update the Jquery UI file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js" type="text/javascript"></script>

answered Aug 23, 2019 at 8:16

Sandeep Sherpur

2,84231 silver badges30 bronze badges

Comments

xKobalt · Accepted Answer · 2020-07-29 14:34:50Z

I had another file in the codebase using draggable and then I just wanted to reuse the class name.

This fixed it for me: I renamed the CSS class to be different from the previous one.

Previous Implementation:

  $(".old_css_class_name").unbind("droppable");
    $(".old_css_class_name").draggable({
        helper: "clone",
        cursor: "move",
        connectToSortable: ".css_name_to_sortable_implementation" //optional
    });

New Implementation:

$(".new_css_class_name").unbind("droppable");
    $(".new_css_class_name").draggable({
        helper: "clone",
        cursor: "move",
        connectToSortable: ".new_name_to_sortable_implementation" //optional
    });

Optional: You might want to add this line of code before implementing draggable

$(".the_new_css_class_name").unbind("droppable");

Collectives™ on Stack Overflow

jQuery UI Draggable function is not working

9 Answers 9

4 Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related