发表新帖
发表新帖

jQuery UI - Draggable is not a function?

后端 未结
关注
17 2587
旧时难觅i
旧时难觅i 2020-11-27 18:49

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
相关标签:
17条回答
  • 眼角桃花
    2020-11-27 19:14

    Make sure your code follows this order-

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

    0 讨论(0)
  • 星月不相逢
    2020-11-27 19:15

    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)
  • 感动是毒
    2020-11-27 19:17

    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.

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-11-27 19:18

    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>
    0 讨论(0)
  • 甜味超标
    2020-11-27 19:20

    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)
  • 耶瑟儿～
    2020-11-27 19:22

    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)
 看不清?
提交回复
热议问题