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

A common reason occurs is if you don't also load jqueryui after loading jquery.

For example:

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

EDIT. Replace the version number for each library with appropriate or latest values for jquery and jqueryui.

If this doesn't solve the issue, review suggestions in the many other answers.