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.

Answer 2

jQuery Tools and jQuery UI get in conflict because they both declare jQuery.tabs and the conflict prevents the second one (in this case jQuery UI) from being loaded. This is the reason why you get a draggable is not a function error.

A solution to this problem is to create a custom version of jQuery Tools (from here) without the tabs functionality.

Informations about the conflict found here: Can JQuery UI and JQuery tools work together?

Answer 3

Make sure you have the jQuery object and NOT the element itself. If you select by class, you may not be getting what you expect.

Open up a console and look at what your selector code returns. In Firebug, you should see something like:

jQuery( div.draggable )

You may have to go into an array and grab the first element: $('.draggable').first() Then call draggable() on that jQuery object and you're done.

Answer 4

The cause to this error is usually because you're probably using a bootstrap framework and have already included a jquery file somewhere else may at the head or right above the closing body tag, in that case all you need to do is to include the jquery ui file wherever you have the jquery file or on both both places and you'll be fine...

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

just include the above jquery ui script wherever you are importing the jquery file along with other bootstrap dependencies.

Answer 5

This issue can also be caused if you include the normal jquery library twice. I had the following line twice, in my body and head.

It never caused any problems until I tried to use jquery UI as well.

Answer 6

1. Install jquery-ui-dist

   use npm

   npm install --save jquery-ui-dist

   or yarn

   yarn add jquery-ui-dist

2. Import it inside your app code

   import 'jquery-ui-dist/jquery-ui';

   or

   require('jquery-ui-dist/jquery-ui');