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?

Ingenerate

Do you have a live link to the page with this problem? – Eydie

No, it's just on my local machine atm – Ingenerate

Answer 1

A common reason this 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.

Ilana

Worked perfectly, thx! On a sidenote the updated library is now at: <script src="ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> – Thong

Answer 2

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.

Bagnio

+1 While this wasn't the exact solution to my problem, it lead me to the answer. Thanks. – Rainier

And in 2017 this help me. Thanks. – Mousebird

Sorry but I have no clue what you mean with this answer. I've loaded jquery.min.js and jquery-ui.min.js in this specific order. I dont know what jqueryTOOLS is nor do I use it. – Digestion

Refer to the part in the question below "quick edit". – Bagnio

An .aspx page of mine loaded jquery, then jquery-ui and the jquery once more. I removed the line that was responsible for the latter loading of jquery and problem was fixed. +1! – Microvolt

Answer 3

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

Roush

great ans.saved my time – Fishbowl

you saved my life – Unwilling

Saved my time while using this with React – Mazda

Upvoted (it works and it's great that the answer includes the alternates npm/yarn import/require!), but the answer could use some explanation on why this works with jquery-ui-dist but not with jquery-ui. – Bremen

Answer 4

Make sure your code follows this order-

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

Giselegisella

the script in OP would suggest it does. – Cayser

Answer 5

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.

Interposition

Answer 6

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>

Buroker

Answer 7

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.

Gourley

Answer 8

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:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" />

<script>
    $(function(){
        $("#container-speed").draggable();
    });
</script>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="rowbackground"style="width: 600px; height: 400px; margin: 0 auto">
                <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
                <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
            </div>
        </div>
    </div>
</div>

Britisher

Answer 9

Hey there, this works for me (I couldn't get this working with the Google API links you were using):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Beef Burrito</title>
    <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>
    </head>
<body>
    <div class="draggable" style="border: 1px solid black; width: 50px; height: 50px; position: absolute; top: 0px; left: 0px;">asdasd</div>

    <script type="text/javascript">
        $(".draggable").draggable();
    </script>
</body>
</html>

Hintze

Answer 10

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>

Oxtail

Why loading jQuery twice? – Malpractice

I don`t remember. Perhaps I was not paying attention – Oxtail

Answer 11

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.

Trude

Answer 12

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?

Bridgeboard

Answer 13

Instead of

<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>

Use

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

Basilica

Answer 14

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.

Honour

Answer 15

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 :(

Acherman

Answer 16

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("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

Uptake

Answer 17

In my case, the reason for this error was that i loaded the jquery plugin defining the function, in the wrong place. It needs to be after jquery and jquery ui, after the content, but before the function call.

Disregardful

Answer 18

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.

Ineludible