NPM包@interactjs/arrange使用教程-JavaScript中文网-JavaScript教程资源分享门户

前端开发经常需要使用到强大的动态拖拽和排序功能，@interactjs/arrange是一个方便易用的NPM包，可以帮助我们在应用中快速添加这些功能。

安装

在终端中输入以下命令，可以将该NPM包安装到你的项目中。

npm install @interactjs/arrange

引入

将@interactjs/arrange引入到你的JavaScript文件中。

import { arrange } from '@interactjs/arrange';

使用

创建可排序的列表

首先，我们需要指定一个元素作为我们可排序的列表的容器。这个元素可以是一个<ul>或<ol>标签。

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

接下来，我们可以在JavaScript文件中选择这个元素，并使用@interactjs/arrange来将它转化为可排序的列表。我们需要传入以下两个参数：

要排序的元素容器
一个可选的配置对象，可以用于配置排序的行为。例如我们可以启用或禁用拖拽、旋转、缩放等操作。

-- -------------------- ---- -------
----- ------------ - -----------------------------------------

-- -----------
--------------------- -
  ---------- -----
  --------- -
    ------- --------------
  -
---

上面的代码将把#sortable-list转化为一个可以拖拽、排序的列表。其中，draggable参数为true意味着我们可以拖拽该列表。dropzone参数被用来限制用户只能在拖拽柄上对元素进行拖拽和排序。

添加拖拽柄

默认情况下，用户可以通过直接拖拽每一个列表项来进行排序。但是，@interactjs/arrange还允许我们指定一个拖拽柄来更好的控制拖拽的行为。

我们可以使用一个含有.drag-handle类的元素作为排序元素的拖拽柄。

-- -------------------- ---- -------
--- -------------------
  ----
    ----- ---------------------------------- ---- -
  -----
  ----
    ----- ---------------------------------- ---- -
  -----
  ----
    ----- ---------------------------------- ---- -
  -----    
-----

当用户拖拽拖拽柄时，拖拽操作仅会针对拖拽柄及其中的文本节点，从而避免了误操作和不必要的干扰。

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    --------------------------------------
  -------
  ------

    -------------------------------------

    --- -------------------
      ----
        ----- ---------------------------------- ---- -
      -----
      ----
        ----- ---------------------------------- ---- -
      -----
      ----
        ----- ---------------------------------- ---- -
      -----    
    -----

    ------- ---------------------------------------------------------------------------------------------
    ------- ------------------------------------------------------------------------------------------
    --------
      ----- ------------ - -----------------------------------------

      --------------------- -
        ---------- -----
        ------ ----
        --------- ----
        --------- -
          ------- ---------------
          -------- -----
          ------- ------- -- -
            ---------------------------
          -
        -
      ---
    ---------
  -------
-------

结语

@interactjs/arrange是一个非常有用的NPM包，它可以帮我们快速构建可拖拽和可排序的列表。本文介绍了它的基本使用方法和相关配置参数，并提供了一个完整的示例代码，希望可以对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f2b5bee3b0ab45f74a8bb24

NPM包@interactjs/arrange使用教程

安装

引入

使用

创建可排序的列表

添加拖拽柄

更多配置项

示例代码

结语

纠错反馈