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         


        

Answer 1

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 2

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 3

4 years after the question got posted, but maybe it will help others who run into this problem. The answer has been posted elsewhere on StackExchange as well, but I lost the link and it's hard to find.

ANSWER: In jQueryTOOLS, the jQuery 'core' is also embedded if you use the default download.

When you load jQuery and jQuery tools, jQuery core gets defined twice and will 'unset' any plugins. 'Draggable' (from jQuery-UI) is such a plug-in.

The solution is to use jQuery tools WITHOUT the jQuery 'core' files and everything will work fine.

Answer 4

If you are developing an Ionic app be sure to include jquery and jquery-ui before ionic.bundle.js!

such a waste of time for something so trivial :(

Answer 5

I had the same problem for another reason and my eye needed one hour to find out. I had copy-pasted the script tags that load jquery :

<script src="**https**://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="**http**://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

My website was using https when accessed from a mobile browser and refused to load jquery-ui without https.

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');