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

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

未捕获的类型错误:$(...).sortable 不是函数

未捕获的错误:jquery-sortablejs 需要 jQuery

我以前从未使用过 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>


炎炎设计
浏览 102回答 1
1回答

德玛西亚99

您的代码的问题是由于脚本引用的顺序造成的。任何依赖 jquery.js 的脚本都必须包含在 jQuery 之后的页面中。此外,您还包含两个版本的 jQuery,这可能会导致问题。我建议保留 3.5.1 并删除 1.12.4。尝试这个:$('.sortable-list').sortable({&nbsp; connectWith: '.sortable-list',&nbsp; update: function(event, ui) {&nbsp; &nbsp; var changedList = this.id;&nbsp; &nbsp; var order = $(this).sortable('toArray');&nbsp; &nbsp; var positions = order.join(';');&nbsp; &nbsp; console.log({&nbsp; &nbsp; &nbsp; id: changedList,&nbsp; &nbsp; &nbsp; positions: positions&nbsp; &nbsp; });&nbsp; }});<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">&nbsp; <li id="a">A</li>&nbsp; <li id="b">B</li>&nbsp; <li id="c">C</li></ul>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript