jQuery UI Draggable function is not working

问题

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.

回答1:

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/

回答2:

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

回答3:

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.

回答4:

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>

回答5:

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.

回答6:

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

.ui-dialog {
    position: fixed;
}

回答7:

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.

回答8:

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>

来源：https://stackoverflow.com/questions/7159118/jquery-ui-draggable-function-is-not-working

标签

jquery

jquery-ui

jquery-ui-draggable