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.

Answer 1

You have one of these problems:

1. Your jQuery or jQuery UI Javascript path files are wrong
2. Your jQuery UI does not include draggable
3. Your jQuery or jQuery UI Javascript files are corrupted
4. Your div is unstyled and empty, therefore there is nothing to drag
5. 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/

Answer 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