jQuery UI - Draggable is not a function?-第2页回答

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?

标签： jquery draggable

16条回答

我命由我不由天

2楼-- · 2020-01-26 08:14

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>

0人赞添加讨论(0) 举报

▲ chillily

3楼-- · 2020-01-26 08:15

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>

0人赞添加讨论(0) 举报

我命由我不由天

4楼-- · 2020-01-26 08:18

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>

0人赞添加讨论(0) 举报

欢心

5楼-- · 2020-01-26 08:19

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.

0人赞添加讨论(0) 举报

放我归山

6楼-- · 2020-01-26 08:22

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

0人赞添加讨论(0) 举报

可以哭但决不认输i

7楼-- · 2020-01-26 08:24

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.

0人赞添加讨论(0) 举报

jQuery UI - Draggable is not a function?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间