javascript - $(...).sortable 不是函数

标签 javascript html jquery jquery-ui-sortable sortablejs

我已经将可排序和 jquery 引用导入到我的 html 中,但是,它说

Uncaught TypeError: $(...).sortable is not a function

Uncaught Error: jQuery is required for jquery-sortablejs

我以前从未使用过 jquery,因此对这一切都很陌生。我已将这个确切的代码作为该网站的演示,它可以在代码笔上运行,但无法在我自己的笔记本电脑上运行。

$('.sortable-list').sortable({
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
    var positions = order.join(';');

    console.log({
      id: changedList,
      positions: positions
    });
  }
});
<html> 
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/Users/rankWebsite/js/main.js"></script>




<body> 

<h1> Rank Images</h1>

<ul id="image-list1" class="sortable-list">
    <li id="a">A</li>
    <li id="b">B</li>
    <li id="c">C</li>
  </ul>


</body>
</html>

最佳答案

您的代码问题是由于脚本引用的顺序造成的。任何依赖 jquery.js 的脚本都必须包含在 jQuery 之后的页面中。此外,您还包含两个版本的 jQuery,这可能会导致问题。我建议保留 3.5.1 并删除 1.12.4。试试这个:

$('.sortable-list').sortable({
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
    var positions = order.join(';');

    console.log({
      id: changedList,
      positions: positions
    });
  }
});
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs@latest/jquery-sortable.js"></script>

<h1> Rank Images</h1>
<ul id="image-list1" class="sortable-list">
  <li id="a">A</li>
  <li id="b">B</li>
  <li id="c">C</li>
</ul>

关于javascript - $(...).sortable 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64908686/

相关文章:

javascript - 具有特定类的元素数组在 setTimeout 中变为未定义

javascript - 为什么我的 jQuery 不更新 DOM?

javascript - 验证对象的值

javascript - 如何在选项标签内添加标签?

javascript - 如何从自动完成和拖放中获取国家名称?

javascript - 如何正确使用两个大写字母的 "undercore"

javascript - 如何使用 JavaScript 从文件夹访问文件名

javascript - 如果我们将 3 个参数传递给在 JavaScript 中用 2 个参数声明的函数,为什么我们不会出错

html - 需要 css 帮助强制元素在单行上

javascript - 使用ajax读取渲染html的php文件