前言
在 Web 开发中，经常会遇到拖拽排序的需求，这时，可以使用 develexe-sortable 这个 npm 包来实现。
本次教程将详细介绍如何使用 develexe-sortable 实现拖拽排序，并提供示例代码进行演示。
安装
使用 develexe-sortable 需要先安装 npm，安装 npm 可以参考 npm 官网。
安装 develexe-sortable：
npm install develexe-sortable --save
使用
使用 develexe-sortable 包，可以非常容易地实现拖拽排序功能。具体步骤如下：
1. 引入 develexe-sortable
在项目中使用 develexe-sortable 首先需要引入该包。使用 ES6 语法，可以这样引入：
import Sortable from 'develexe-sortable';
2. 初始化 sortable
初始化 sortable 只需要传入可拖拽元素的父级元素即可，下面这个示例传入的是 ul 元素。
const sortable = new Sortable('#parent');3. 配置选项
develexe-sortable 提供了很多可选配置项，这里介绍几个常用的：
handle: 用于设置拖拽操作的 handle 元素。默认为父元素本身。items: 用于设置可拖拽的子元素。默认为直接子元素。placeholder: 用于设置 placeholder 的样式。
配置选项可以在初始化时传入，示例代码如下：
const sortable = new Sortable('#parent', {
handle: '.item-handle',
items: 'li',
placeholder: 'placeholder-class'
});完成上述步骤后，就可以实现拖拽排序功能了。
示例代码
接下来，提供一份示例代码，实现了一个拖拽排序的 demo。
HTML:
<ul id="parent"> <li class="item">1. Item 1</li> <li class="item">2. Item 2</li> <li class="item">3. Item 3</li> <li class="item">4. Item 4</li> <li class="item">5. Item 5</li> </ul>
CSS:
.item-handle {
cursor: move;
}
.placeholder-class {
background-color: #eee;
}JavaScript:
-- -------------------- ---- ------- ------ -------- ---- -------------------- ----- -------- - --- ------------------- - ------- --------------- ------ ----- ------------ ------------------- --- --------------------- -------- -- - ----- ----- - ------------------- -- ---------- ------------------- ---
在浏览器中运行后，可以实现拖拽排序效果，并在控制台输出拖拽操作后的元素顺序。
最后，更多配置项和 API 可以参考 develexe-sortable 文档。
结语
本文介绍了如何使用 develexe-sortable npm 包实现拖拽排序功能，从安装、使用到高级配置的详细教程。希望能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf481e8991b448e6a81