【发布时间】：2016-06-02 02:12:19
【问题描述】：
无论我怎么做，我都无法摆脱这个错误。我正在尝试制作一些可拖动的 div，但我收到错误“参考错误：$ 未定义”。我检查了我的代码，一切正常。所以我为可拖动的 div 测试了运行 jQuerys 示例代码，仍然是同样的错误。这是代码。
<!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>
【问题讨论】：
-
您的代码对我来说运行良好，除了一开始缺少的 HTML 标记看起来很可疑。
-
查看浏览器开发工具中的网络（工作）选项卡，看看是否真的加载了 jQuery。
-
我怀疑这会变成stackoverflow.com/questions/6503946/…的副本
-
@Quentin 在 OP 的“自己的代码”中有协议部分。
-
请不要根据cmets中的建议或答案重写您的问题。这将不清楚为什么发布答案/评论。相反，您可以添加一个编辑部分来解释到目前为止已修复的内容。如果问题完全改变，请提出一个新问题。虽然现在查看您的代码，但您根本没有链接到 jQuery-UI……这意味着您的编辑引入了一个全新的问题。我已将帖子回滚到以前的版本。
标签： javascript jquery jquery-ui