npm 包 nestable2-old 使用教程

阅读时长 7 分钟读完

前言

在前端开发中,经常需要使用可拖拽的可嵌套列表,例如类别管理、菜单导航等。此时,我们通常需要使用一些开源的组件来方便地实现这一功能。本篇文章将详细介绍一个 npm 包 nestable2-old 的使用方法。nestable2-old 是一个基于 jQuery 开发的可嵌套列表插件,支持拖放、折叠等操作。

安装与导入

首先,我们需要使用 npm 安装 nestable2-old:

然后,在我们的前端代码中导入相关文件。

CSS 导入

在 head 中导入 CSS 文件:

JS 导入

在 body 的最下方导入 JS 文件:

初始化

在网页 DOM 树加载完成后,我们需要将 nestable2-old 组件绑定到一个 DOM 元素上。

HTML

在网页中添加一个 DIV 元素,作为你的嵌套列表容器。此元素下可以添加嵌套的 LI 元素。

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

JS

在 JS 代码中,我们需要选择并初始化刚才添加的 DIV 元素,如下所示:

配置项

nestable2-old 提供了多个可选配置项,可以根据实际需求进行设置。以下是一些常见的配置。

样式选择器

我们可以通过配置不同的样式选择器来实现样式定制。对于嵌套列表中的不同元素,nestable2-old 提供了以下样式选择器:

  • dd:列表容器选择器
  • dd-item:列表项选择器
  • dd-handle:拖拽句柄选择器
  • dd-empty:空的列表项选择器
  • dd-list:子列表选择器

例如,我们可以通过配置自定义样式选择器 .my-handle 来替换默认的 .dd-handle

最大嵌套深度

我们可以通过配置 maxDepth 来限制列表的嵌套深度。在该参数设为 1 的情况下,列表将不能再嵌套子列表。

回调函数

nestable2-old 提供了多个回调函数,我们可以通过设置这些回调来实现对列表操作的 DOM 操作、AJAX 请求等功能。

以下是一些常用的回调:

  • callback:回调函数,每当元素重组时被调用
  • onDragStart:拖放开始前的回调函数
  • beforeDragStop:拖放停止前的回调函数(例如用于拖放前的确认框弹出)
  • afterDrop:拖放结束后的回调函数
  • serialize:取回当前列表的嵌套数据
  • listNodeName:嵌套列表的选择器名称
  • itemNodeName:嵌套列表项的选择器名称

例如,我们可以通过设定回调函数 beforeDragStop 来实现拖放前的确认框:

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

示例

以下是一个完整的 nestable2-old 实现示例。

HTML

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

CSS

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

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

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

JS

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

总结

本篇文章介绍了 npm 包 nestable2-old 的使用方法,并详细讲解了常见的配置选项和回调函数。使用 nestable2-old 可以方便地实现嵌套列表的拖拽、折叠等操作,并可根据实际需求进行个性化的定制。希望本文能对前端开发人员有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005798581e8991b448eb2ab

纠错
反馈