npm 包 react-sortable-pane 使用教程

阅读时长 9 分钟读完

前言

在前端开发中,我们经常需要使用拖拽排序等交互操作,而 react-sortable-pane 就是一个提供此类操作的 npm 包。接下来将详细地介绍如何使用此包,并带您实现一个拖拽排序的示例。

安装 react-sortable-pane

使用 npm 包管理器来安装 react-sortable-pane

基本使用

  1. 导入模块:

  2. 渲染:

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

    在渲染时,ReactSortablePane 组件中传入多个 div 标签,它们会被用作可排序项。键值 (key) 属性是必需的,并且必须唯一。

  3. 设置 ReactSortablePane 属性

    ReactSortablePane 组件提供多个属性来控制功能或表现方式。以下是可用的属性:

    • direction - 方向 (默认值:horizontal)。让你选择应水平还是垂直排序。
    • margin - 间距 (默认值:0)。控制拖拽里面的内边距。
    • isSortable - 是否可排序 (默认值:true)。控制项目是否可以重新排序。
    • children - 可排序的项。通常是 div 标签须有唯一的 key 属性。
  4. 事件属性

    ReactSortablePane 组件也提供事件处理属性,它们在拖动、排序或调整大小时触发。

    • onResize - 调整大小事件。
    • onResizeStop - 调整大小结束事件。
    • onOrderChange - 顺序改变事件。
    • onDragStop - 拖动事件。

示例应用

现在让我们创建示例应用,使用 ReactSortablePane 来创建一个可拖动排序的待办列表。在这个应用中,我们将使用 Material UI 的文本域 (TextField) 来创建待办事项,并使用 ReactSortablePane 来使我们能够调整它们的排序。

步骤 1 - 设置项目

在新目录中运行以下命令:

这个命令将创建并安装一个名为 react-sortable-pane-todo 的新项目,并安装了 ReactSortablePane 以及一些其他库。

步骤 2 - 创建待办清单

打开 App.js 文件,并将其内容更改为以下内容:

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

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

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

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

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

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

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

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

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

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

现在创建一个可排序的列表。待办项将使用 TextareaAutosizeDeleteForeverIcon 组件进行渲染,改变待办项的状态只需将其拖入到新位置。

步骤 3 - 设置 CSS 样式

src 文件夹下创建一个新文件夹 components,并在其中创建名为 App.css 的新文件,然后添加以下样式:

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

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

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

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

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

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

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

步骤 4 - 运行项目

现在,在终端中输入以下命令以运行项目:

然后,打开浏览器,并访问 http://localhost:3000/,将可以看到一个待办事项清单,可以用拖拽的方法重新排序。

结论

本文介绍了如何使用 react-sortable-pane npm 包来创建一个可拖动排序的列表。此应用包含一个 Material UI 的文本域 (TextField) 用于添加新待办项、在可排序项中使用 ReactSortablePane,实现重新排序。在 ReactSortablePane 组件中调用 onOrderChange() 函数,从而对状态进行更新。在项目中我们使用了一些额外的组件,例如 react-textarea-autosize@material-ui 组件库。通过学习本文,应该可以轻松地应用 npm 包 react-sortable-pane 来进行类似的操作。

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

纠错
反馈