简介
jquery-sortable 是一个方便的 jQuery 插件，可以帮助我们实现拖拽排序的功能，不仅可以用在列表中，也可以用于其他元素的排序。该插件使用很广泛，是一个非常实用的前端工具。
安装
要使用 jquery-sortable，首先需要安装它。可以通过 npm 来安装：
npm install jquery-sortable --save
此外，在你的 HTML 文件中引入 jQuery 库和 jquery-sortable：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery-sortable/source/js/jquery-sortable-min.js"></script>
基本使用
HTML 结构
首先，我们需要一个包含待排序元素的容器：
<div id="sortable"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div>
JavaScript 代码
然后，在 JavaScript 中调用 sortable() 方法，来使得该容器具有可排序的功能：
$('#sortable').sortable();这样，我们就完成了基本的排序功能。当然，还有很多配置选项可以让我们自定义排序。
配置选项
jquery-sortable 提供了很多配置选项，可以满足我们对元素排序的各种需求。下面列举一些常用的配置选项：
axis
如果我们只希望元素在某个方向上可以排序，可以设置 axis 选项：
$('#sortable').sortable({axis: 'y'});这样，元素只能在垂直方向上进行排序。
handle
有时候，我们并不希望整个元素都可以拖拽排序，而是只想让某个部分可以被拖拽。这时候，可以使用 handle 选项来指定可拖拽的部分：
<div id="sortable"> <div><span class="handle">☰</span> Item 1</div> <div><span class="handle">☰</span> Item 2</div> <div><span class="handle">☰</span> Item 3</div> <div><span class="handle">☰</span> Item 4</div> <div><span class="handle">☰</span> Item 5</div> </div>
$('#sortable').sortable({
handle: '.handle'
});这里，我们将每个元素内部的 .handle 元素作为可拖拽部分。
containment
如果我们希望在某个区域内进行排序，可以设置 containment 选项：
$('#sortable').sortable({
containment: '#container'
});这样，元素只能在 #container 容器内进行排序。
回调函数
jquery-sortable 还提供了一些回调函数，可以让我们在排序过程中进行一些操作。
start
start 回调函数会在开始拖拽时触发：
$('#sortable').sortable({
start: function(event, ui) {
console.log('start');
}
});sort
sort 回调函数会在元素排序时触发：
$('#sortable').sortable({
sort: function(event, ui) {
console.log('sort');
}
});stop
stop 回调函数会在拖拽结束时触发：
$('#sortable').sortable({
stop: function(event, ui) {
console.log('stop');
}
});示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------------ ------- ----------------------------------------------------------- ------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------
