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