前端开发经常需要使用到强大的动态拖拽和排序功能，@interactjs/arrange是一个方便易用的NPM包，可以帮助我们在应用中快速添加这些功能。
安装
在终端中输入以下命令，可以将该NPM包安装到你的项目中。
--- ------- -------------------
引入
将@interactjs/arrange引入到你的JavaScript文件中。
------ - ------- - ---- ----------------------
使用
创建可排序的列表
首先，我们需要指定一个元素作为我们可排序的列表的容器。这个元素可以是一个<ul>或<ol>标签。
--- ------------------- -------- ------ -------- ------ -------- ------ -------- ------ -----
接下来，我们可以在JavaScript文件中选择这个元素，并使用@interactjs/arrange来将它转化为可排序的列表。我们需要传入以下两个参数：
- 要排序的元素容器
- 一个可选的配置对象，可以用于配置排序的行为。例如我们可以启用或禁用拖拽、旋转、缩放等操作。
----- ------------ - -----------------------------------------
-- -----------
--------------------- -
---------- -----
--------- -
------- --------------
-
---上面的代码将把#sortable-list转化为一个可以拖拽、排序的列表。其中，draggable参数为true意味着我们可以拖拽该列表。dropzone参数被用来限制用户只能在拖拽柄上对元素进行拖拽和排序。
添加拖拽柄
默认情况下，用户可以通过直接拖拽每一个列表项来进行排序。但是，@interactjs/arrange还允许我们指定一个拖拽柄来更好的控制拖拽的行为。
我们可以使用一个含有.drag-handle类的元素作为排序元素的拖拽柄。
--- -------------------
----
----- ---------------------------------- ---- -
-----
----
----- ---------------------------------- ---- -
-----
----
----- ---------------------------------- ---- -
-----
-----当用户拖拽拖拽柄时，拖拽操作仅会针对拖拽柄及其中的文本节点，从而避免了误操作和不必要的干扰。
更多配置项
除了上述的draggable和dropzone参数外，@interactjs/arrange还提供了一系列其他的配置参数，用于进一步完善我们的拖拽和排序体验。例如，我们可以配置拖拽延迟、锁定排序元素、限定拖拽范围等等。
----- ------------ - -----------------------------------------
--------------------- -
---------- -----
------ ----
--------- ----
--------- -
------- ---------------
-------- -----
------- ------- -- -
---------------------------
-
-
---示例代码
--------- -----
------
------
----- ----------------
--------------------------------------
-------
------
-------------------------------------
--- -------------------
----
----- ---------------------------------- ---- -
-----
----
----- ---------------------------------- ---- -
-----
----
----- ---------------------------------- ---- -
-----
-----
------- ---------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
--------
----- ------------ - -----------------------------------------
--------------------- -
---------- -----
------ ----
--------- ----
--------- -
------- ---------------
-------- -----
------- ------- -- -
---------------------------
-
-
---
---------
-------
-------结语
@interactjs/arrange是一个非常有用的NPM包，它可以帮我们快速构建可拖拽和可排序的列表。本文介绍了它的基本使用方法和相关配置参数，并提供了一个完整的示例代码，希望可以对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f2b5bee3b0ab45f74a8bb24