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    lt script src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  type  text javascript  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 1 jquery-ui min js  gt  lt  script gt    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

User · Answer

Make sure your code follows this order-     x000D   x000D   lt script src  jquery min js  gt  lt  script gt  x000D   lt script src  jquery-ui jquery-ui js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

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        lt script src  https   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  type  text javascript  gt  lt  script gt    just include the above jquery ui script wherever you are importing the jquery file along with other bootstrap dependencies

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Hey there  this works for me  I couldn t get this working with the Google API links you were using     lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt title gt Beef Burrito lt  title gt       lt script src  http   code jquery com jquery-1 4 2 min js  type  text javascript  gt  lt  script gt           lt script src  jquery-ui-1 8 1 custom min js  type  text javascript  gt  lt  script gt       lt  head gt   lt body gt       lt div class  draggable  style  border  1px solid black  width  50px  height  50px  position  absolute  top  0px  left  0px   gt asdasd lt  div gt        lt script type  text javascript  gt              draggable   draggable         lt  script gt   lt  body gt   lt  html gt

User · Answer

A common reason occurs is if you don t also load jqueryui after loading jquery   For example    lt script src  https   ajax googleapis com ajax libs jquery 1 5 1 jquery min js  type  text javascript  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  type  text javascript  gt  lt  script gt    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

User · Answer

I went through both your question and a another duplicate  In the end  the following answer helped me sorting things out  uncaught-typeerror-draggable-is-not-a-function   To get rid of             draggable   draggable is not a function anymore   I had to put links to Javascript libraries above the script tag I expected to be working   My code    lt link rel  stylesheet  href  https   code jquery com ui 1 11 4 themes smoothness jquery-ui min css   gt   lt script type  text javascript  src  https   code jquery com jquery-1 12 4 min js    gt   lt script type  text javascript  src  https   code jquery com ui 1 12 1 jquery-ui min js    gt    lt script gt        function                container-speed   draggable             lt  script gt    lt div class  content  gt       lt div class  container-fluid  gt           lt div class  row  gt               lt div class  rowbackground style  width  600px  height  400px  margin  0 auto  gt                   lt div id  container-speed  style  width  300px  height  200px  float  left  gt  lt  div gt                   lt div id  container-rpm  style  width  300px  height  200px  float  left  gt  lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

I had this junk at the bottom of my  layout mvc page that I found via chromes debugger  network section  loading jquery 1 10 2 after the jquery   jqueryui sections at the top of the same file  When I removed all that  sortable and  draggable started working   Scripts Render  quot   bundles jquery quot    Scripts Render  quot   bundles bootstrap quot    RenderSection  quot scripts quot   required  false

User · Answer

Instead of   lt script src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  type  text javascript  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs jqueryui 1 8 1 jquery-ui min js  gt  lt  script gt    Use     lt script src  http   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt       lt script src  https   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js  type  text javascript  gt  lt  script gt

User · Answer

You can import these js Files  It worked fine for me    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt     lt script type  text javascript  src  https   ajax googleapis com ajax libs jqueryui 1 11 4 jquery-ui min js   gt  lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This code will not work  you can check in firebug jQuery ui is undefined     lt script src  http   code jquery com jquery-1 4 2 min js  type  text javascript  gt  lt  script gt       lt script src  jquery-ui-1 8 1 custom min js  type  text javascript  gt  lt  script gt   lt script src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  type  text javascript  gt  lt  script gt     Try use follow code    lt script src  http   code jquery com jquery-1 4 2 min js  type  text javascript  gt  lt  script gt       lt script src  http   ajax googleapis com ajax libs jquery 1 4 1 jquery min js  type  text javascript  gt  lt  script gt    lt script src  jquery-ui-1 8 1 custom min js  type  text javascript  gt  lt  script gt

User · Answer

Install jquery-ui-dist  use npm  npm install --save jquery-ui-dist  or yarn  yarn add jquery-ui-dist Import it inside your app code  import  jquery-ui-dist jquery-ui    or  require  jquery-ui-dist jquery-ui

User · Answer

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     lt script src    https     code jquery com jquery-3 2 1 min js  gt  lt  script gt   lt script src    http     code jquery com ui 1 12 1 jquery-ui min js  gt  lt  script gt    My website was using https when accessed from a mobile browser and refused to load jquery-ui without https

[jquery] jQuery UI - Draggable is not a function?

Examples related to jquery

Examples related to draggable