在前端开发中，我们经常需要实现对某些元素进行排序的需求，例如拖拽进行排序。在实现这样的需求时，我们可以使用一些现成的工具库来提高开发效率。其中一款较为优秀的库就是 stump-sortable，它是一款基于 jQuery 的拖拽排序插件，具有功能丰富、使用简便等特点，可以满足绝大多数需求。
安装
stump-sortable 可以通过 npm 包的方式进行安装，只需在项目中执行下列命令即可：
npm install stump-sortable --save
引入
安装完成后，我们需要在项目代码中引入该库，代码如下：
import 'stump-sortable';
如果你使用的是 Script 标签引入，可以按照下列方式进行：
<script src="path/to/jquery.min.js"></script> <script src="path/to/stump-sortable.min.js"></script>
如何使用
该插件提供了两种使用方式：基本使用和高级使用。接下来我们将一一进行介绍。
基本使用
首先，我们需要在 HTML 中定义一个可排序的列表。例如：
<ul id="sortable-list"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
然后，我们只需要在 JavaScript 中进行如下调用：
$('#sortable-list').stumpSortable();这样就可以实现对该列表的拖拽排序了。
高级使用
对于一些特殊的需求，我们需要对排序过程进行一些额外的操作，在这种情况下，我们可以使用高级用法来实现。例如，在排序时，需要在后台记录排序的结果，我们可以通过回调函数来实现此需求，代码如下：
-- -------------------- ---- -------
-----------------------------------
----- ----
------- ----------
------- --------------- --- -
-- -----------
--------
---- ---------------------
------- -------
----- -
------ ---------------------------------------
-
---
-
---在高级用法中，我们可以设置以下参数：
axis: 拖拽方向，取值可以是 'x' 或 'y'。handle: 拖拽时使用的句柄。connectWith: 多个可排序的列表之间的连接。placeholder: 占位符元素的 DOM 样式。forceHelperSize: 强制使用助手的大小来继承排序元素的大小。forcePlaceholderSize: 强制使用占位符的大小来继承排序元素的大小。tolerance: 容忍度，取值可以是 'intersect'、'pointer' 或 'touch'。dropOnEmpty: 允许空位置开关。cursor: 拖拽时使用的鼠标样式。opacity: 拖拽时元素透明度。scroll: 自动滚动开关。scrollSensitivity: 滚动灵敏度。scrollSpeed: 滚动速度。appendTo: 排序容器的选择器。zIndex: 兼容旧浏览器的 zIndex 值。delay: 拖拽时延迟。disabled: 禁用开关。items: 排序项目的选择器。helper: 助手元素的 DOM 样式。opacity: 元素拖拽时的透明度。revert: 元素释放时的动画效果。scroll: 滚动容器的选择器。scrollSensitivity: 容器滚动的灵敏度。scrollSpeed: 容器滚动的速度。tolerance: 拖拽灵敏度。zIndex: 拖拽元素的 zIndex。start: 拖拽开始时的回调函数。stop: 拖拽停止时的回调函数。update: 拖拽排序结束后的回调函数。
示例代码
下面是一个完整的示例代码，供大家参考：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------- - -------------- ------------
----- ---------------- --------------------------------------
-------
------
--- -------------------
------------
------------
------------
-----
------- -------------------------------------
------- ---------------------------------------------
--------
------------ -
-----------------------------------
---------- ----
------- ----------
------- --------------- --- -
-- -----------
--------
---- ---------------------
------- -------
----- -
------ ---------------------------------------
-
---
-
---
---
---------
-------
-------总结
使用 stump-sortable 可以很方便地实现对某些元素进行排序的需求，在实现过程中，只需进行简单的配置即可，大幅提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671381e8991b448e360f