页面中jQueryUI无法加载，调用.sortable()时提示$未定义

嘿，这个问题我太熟啦！ReferenceError: $ is not defined本质就是浏览器还没认出jQuery的$别名，说白了就是jQuery没加载到位，或者加载顺序搞反了——毕竟jQuery UI是依赖jQuery核心库才能工作的，顺序错了肯定出问题。

问题根源分析 #

你的报错说明，当浏览器执行调用.sortable()的代码时，jQuery还没被加载完成（甚至可能根本没引入）。从你给出的<head>代码片段来看，大概率是脚本引入顺序错误，或者defer属性的使用导致依赖脚本加载时机不对。

具体解决方案 #

1. 严格遵守脚本引入顺序

必须先加载jQuery核心库，再加载jQuery UI，最后才是你自己调用.sortable()的业务代码，顺序绝对不能乱：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Sovversivi e Partigiani - Back-end - Gestione Sovversivi</title>
<!-- 第一步：先引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 第二步：再引入jQuery UI库 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!-- 第三步：最后写你的业务逻辑代码 -->
<script>
  // 用$(function(){...})确保DOM加载完成后再执行
  $(function() {
    // 替换成你的列表ID
    $("#your-sortable-list").sortable();
  });
</script>

2. 合理使用defer属性

如果你的脚本加了defer，要注意：所有依赖的脚本都要按顺序添加defer，浏览器会按它们在HTML中的顺序执行延迟脚本。比如：

<!-- 带defer的正确顺序 -->
<script defer src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script defer src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script defer>
  $(function() {
    $("#your-sortable-list").sortable();
  });
</script>

如果只有jQuery加了defer，但你的业务脚本没加，那业务脚本会先执行，此时jQuery还没加载，自然会报错。

3. 另一种稳妥的写法：把脚本放在</body>前

把所有脚本放在页面底部</body>标签之前，这样DOM加载完成后才会执行脚本，也能避免加载顺序问题：

<!-- 页面其他内容 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $("#your-sortable-list").sortable();
    });
  </script>
</body>

4. 排查jQuery是否真的加载成功

可以打开浏览器控制台，直接输入$或者jQuery，如果返回function说明加载成功；如果返回undefined，那可能是jQuery的链接写错了，或者网络问题导致加载失败，换个稳定的jQuery CDN链接即可。

内容的提问来源于stack exchange，提问作者Marco Bizzocchi