无论如何 - 未定义引用错误$(jQuery UI)

时间:2016-02-20 12:37:10

标签: javascript jquery jquery-ui

无论我怎么做,我都无法摆脱这个错误。我试图制作一些可拖动的div但我得到错误'参考错误:$未定义'。我查看了我的代码,一切正常。所以我测试了运行jQuerys examplecode for draggable divs,仍然是同样的错误。这是代码。

    <!DOCTYPE html>
    <html lang="en">
       <head>
       <meta charset="utf-8">
       <title>jQuery UI Draggable - Default functionality</title>
       <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
       <script src="//code.jquery.com/jquery-1.10.2.js"></script>
       <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <style>
   #draggable { width: 150px; height: 150px; padding: 0.5em; }
   </style>
   <script>
   $(function() {
    $( "#draggable" ).draggable();
   });
   </script>
   </head>
    <body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>


</body>
</html>

这是我自己的代码:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text demo</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
  $(function() {
    $(".groupItem").draggable();
  });
</script>
<link rel="stylesheet" type="text/css" media="all" href="stylesheet.css">
</head>
<body>
    <div id="newsFeeder" class="groupItem">

        <div class="itemHeader">Feeds</div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="news" class="groupItem">
        <div class="itemHeader">News</div>
        <div class="itemContent">

            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>

    </div>
    <div id="shop" class="groupItem">
        <div class="itemHeader">Shopping</div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="links" class="groupItem">
        <div class="itemHeader">Links</div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="images" class="groupItem">
        <div class="itemHeader">Images</div>

        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>

        </div>
    </div>

</body>
</html>

1 个答案:

答案 0 :(得分:2)

将jquery链接替换为此链接并且您正在: https://code.jquery.com/jquery-2.2.0.min.js

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>