npm 包 react-sortable-pane 使用教程

前言

在前端开发中，我们经常需要使用拖拽排序等交互操作，而 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 文件，并将其内容更改为以下内容：

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

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

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

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

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

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

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

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

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

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

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

步骤 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

阅读全文

猜你喜欢

  • npm 包 @types/redux-shortcuts 使用教程

    在前端开发中，使用 TypeScript 和 Redux 构建应用程序是一种常见做法。TypeScript 可以帮助我们避免潜在的运行时错误，提高代码的可维护性和可读性。

    4 年前
  • npm 包 @types/redux-socket.io 使用教程

    什么是 @types/redux-socket.io 在前端开发中，使用 TypeScript 来进行项目开发已经成为一种趋势，它可以增强代码的可读性和维护性，同时提高代码的稳定性。

    4 年前
  • npm 包 @types/redux-storage 的使用教程

    在前端开发中，Redux 是一个非常流行的状态管理库，它可以帮助我们有效地管理 Web 应用的复杂状态。Redux-Storage 是一个为 Redux 提供离线存储的插件，可以将 Redux 的状态...

    4 年前
  • npm 包 @types/redux-storage-engine-jsurl 使用教程

    @types/redux-storage-engine-jsurl 是一款专为 Redux 应用开发者打造的 npm 包，它提供了 Redux 存储引擎 JSURL 的 TypeScript 类型定义...

    4 年前
  • npm 包 @types/redux-storage-engine-localstorage 使用教程

    在前端开发中，Redux 是一种非常流行的状态管理库。使用 Redux 可以方便地管理应用程序的状态，包括异步数据获取、UI 状态等等。而 Redux Storage Engine LocalStor...

    4 年前
  • npm 包 @types/redux-test-utils 使用教程

    简介 在前端开发过程中，我们常常需要使用 Redux 来进行状态管理。Redux Test Utils 是 Redux 的一个测试工具库，可供开发者进行针对 Redux 的测试。

    4 年前
  • npm 包 @types/redux-testkit 使用教程

    前言 在前端开发的过程中，我们经常会使用到 Redux 等状态管理工具。在使用这些工具的过程中，对于对应工具的测试工作也是非常重要的一环。而 @types/redux-testkit 作为一个 Typ...

    4 年前
  • npm 包 @types/redux-ui 使用教程

    简介 npm 是一个 JavaScript 的包管理器，它让开发者可以轻松地在项目中引入其他开发者编写的代码，从而加快了开发速度。@types/redux-ui 是 npm 上一款用于类型声明的包，它...

    4 年前
  • npm 包 @types/ref-union 使用教程

    简介 在一些 Node.js 开发任务中，我们通常需要通过 C++ 进行底层数据访问和排序等操作。然而，C++ 语言与 JavaScript 有诸多不同之处，因此在 Node.js 中调用 C++ 模...

    4 年前
  • npm 包 @types/reflux 使用教程

    在前端开发中，我们经常会使用到状态管理库。其中，Reflux 可以说是比较常用且优秀的一个。但是，如果我们想要在 TypeScript 项目中使用 Reflux 的话，就需要引入一个 typings ...

    4 年前
  • npm 包 @types/relaxed-json 使用教程

    介绍 在前端开发中，我们常常需要使用 JSON 数据来传递和处理数据。而严格的 JSON 格式在某些情况下可能会限制我们的工作。这时我们可以使用 relaxed-json，一种宽松的 JSON 格式，...

    4 年前
  • npm 包 @types/relay-runtime 使用教程

    Relay 是一个基于 GraphQL 的 JavaScript 框架，它提供了一种简单和可伸缩的方式来管理应用程序的数据，并且可以在客户端和服务器端使用。 在使用 Relay 框架的过程中，我们经常...

    4 年前
  • npm 包 @types/remarkable 使用教程

    在前端开发中，我们经常需要使用 Markdown 这样的标记语言来编辑和展示文本内容。而 @types/remarkable 是一个与 Remarkable 相关的 TypeScript 声明文件，可...

    4 年前
  • npm 包 @types/remote-redux-devtools 使用教程

    在前端开发中，使用 Redux 来管理应用状态已经变得非常流行。而 Remote Redux DevTools 是一个可以通过 Chrome 远程调试 Redux 应用的工具。

    4 年前
  • npm 包 @types/remove-markdown 使用教程

    在前端开发过程中，我们通常需要将 Markdown 文本转化为 HTML 格式来展示给用户。但是，有时候我们需要在代码中获取纯文本，并且需要将 Markdown 格式的文本转换为纯文本。

    4 年前
  • npm 包 @types/rename 使用教程

    在前端开发过程中，我们经常需要对文件进行重命名。虽然在现代化的开发工具中，重命名文件只需要简单的几个鼠标点击，但是对于较大规模的项目，手动一个一个对文件进行更改会非常耗费时间且容易出错。

    4 年前
  • npm 包 @types/replace-ext 使用教程

    简介 在开发前端应用程序时，我们通常需要在项目中使用第三方库来实现特定功能。 随着 JavaScript 的流行，使用 npm 进行依赖项管理也越来越普遍。 npm 是一个 JavaScript 包管...

    4 年前
  • npm 包 @types/request-as-curl 使用教程

    前言 在前端项目开发中，我们经常需要与后端进行数据交互。其中，使用 API 是我们最常用的一种方式。Node.js 是一个很好的方案，它提供了一个很好的 HTTP 请求处理机制，可以方便我们的后端请求...

    4 年前
  • npm 包 @types/require-dir 使用教程

    在前端开发中，我们经常需要使用一些第三方库来加速开发和提高效率。而当我们使用这些库时，通常需要导入其中的一些模块。在 TypeScript 中，我们需要借助类型定义文件来让 TypeScript 理解...

    4 年前
  • npm 包 rollup-plugin-server 使用教程

    在 Web 开发过程中，我们经常需要创建一个本地服务器来运行我们的应用程序或网站，以便我们可以查看和测试其在不同设备和环境下的表现。 如果你使用 Rollup 进行前端开发，那么 rollup-plu...

    4 年前

相关推荐

    暂无文章