jQuery UI - Draggable is not a function?

Question

I've trying to use the draggable effect on some divs on a page, but whenever I load the page, I get the error message:

Error: $(".draggable").draggable is not a function

I've had a look around it seemed other people were having this problem as they had not included the jQuery UI javascript file, but I definitely have.

The following is within the head tag of my page:

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

Can anyone suggest a solution?

Any advice appreciated.

Thanks.

Quick edit, I also have the jquery tools js included in the head of the page, if I remove this it works OK. Has anyone managed to get these two working together?

Answer 1

Make sure your code follows this order-

<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>

Answer 2

This may be helpful for some one :

In my case i was able to remove this error by first loading the js files on which draggable depends. They were ui.mouse.js, ui.core and ui.widget i.e UI Core Widget Factory Mouse Interaction

Make sure the script tag for loading dependencies lies above the draggable js loading tag.

Answer 3

This code will not work (you can check in firebug jQuery.ui is undefined):

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 

Try use follow code:

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>

Answer 4

You can import these js Files. It worked fine for me.

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