前言
在前端开发中，我们经常需要使用拖拽排序等交互操作，而 react-sortable-pane 就是一个提供此类操作的 npm 包。接下来将详细地介绍如何使用此包，并带您实现一个拖拽排序的示例。
安装 react-sortable-pane
使用 npm 包管理器来安装 react-sortable-pane：
npm install react-sortable-pane --save
基本使用
导入模块：
import ReactSortablePane from 'react-sortable-pane';
渲染：
-- -------------------- ---- ------- ------------------ ---------------------- ----------- ----------------- ---------------- ----- -- ----------------- ------ -------------------- ----- -- ----------------- ------ --------------------- --------- --------- -- ----------------- --------- ---------- ------------------ --------- -- ----------------- ---------- - ---- ------- ----------------- - ------ ---- ------- ----------------- - ------ ---- ------- ----------------- - ------ --------------------在渲染时，
ReactSortablePane组件中传入多个div标签，它们会被用作可排序项。键值 (key) 属性是必需的，并且必须唯一。设置
ReactSortablePane属性ReactSortablePane组件提供多个属性来控制功能或表现方式。以下是可用的属性：direction- 方向 (默认值：horizontal)。让你选择应水平还是垂直排序。margin- 间距 (默认值：0)。控制拖拽里面的内边距。isSortable- 是否可排序 (默认值：true)。控制项目是否可以重新排序。children- 可排序的项。通常是div标签须有唯一的key属性。
事件属性
ReactSortablePane组件也提供事件处理属性，它们在拖动、排序或调整大小时触发。onResize- 调整大小事件。onResizeStop- 调整大小结束事件。onOrderChange- 顺序改变事件。onDragStop- 拖动事件。
示例应用
现在让我们创建示例应用，使用 ReactSortablePane 来创建一个可拖动排序的待办列表。在这个应用中，我们将使用 Material UI 的文本域 (TextField) 来创建待办事项，并使用 ReactSortablePane 来使我们能够调整它们的排序。
步骤 1 - 设置项目
在新目录中运行以下命令：
npx create-react-app react-sortable-pane-todo cd react-sortable-pane-todo npm install --save react-sortable-pane react-textarea-autosize @material-ui/core @material-ui/icons
这个命令将创建并安装一个名为 react-sortable-pane-todo 的新项目，并安装了 ReactSortablePane 以及一些其他库。
步骤 2 - 创建待办清单
打开 App.js 文件，并将其内容更改为以下内容：
-- -------------------- ---- -------
------ ------------
------ ------ - -------- - ---- --------
------ ----------------- ---- ----------------------
------ --------- ---- ------------------------------
------ ------------- ---- -------------------------------
------ ----------------- ---- -----------------------------------
------ ---------------- ---- --------------------------
-------- ----- -
----- ------- --------- - ----------
- ----- ----- --- --- ------- --- --- --
- ----- ------ --- ------- --- --- --
- ----- ---- ----------- --- --- --
---
----- ------ -------- - -------------
----- ------------ - ------- -- -
----------------------------
--
----- ----------- - -- -- -
-- ----- --- --- -
--- -------- - -----------
------------------ ----- ----- --- --- --------------------------- ---
-------------------
------------
-
--
----- ------------ - ------- -- -
--- -------- - -----------
---------------------- ---
-------------------
--
------ -
---- ----------------
---- -------------------
-------- ---------
---- ---------------------
---------- ---------- ----- ------------ ----------------------- ------------ --
-------------- --------------------- --
------
------
------------------
--------------------
-----------
-----------------
--------------------- --------- --------- -- -
--- -------- - -----------
------------------------- -- ------------------------- -------
-------------------
--
-
----------------- ------ -- -
---- ------------- ----------------------
---- -------------------------------------
----------------- -------------------- ------------------------ --
------------------ ----------- -- -------------------- --
------
---
--------------------
------
--
-
------ ------- ----现在创建一个可排序的列表。待办项将使用 TextareaAutosize 和 DeleteForeverIcon 组件进行渲染，改变待办项的状态只需将其拖入到新位置。
步骤 3 - 设置 CSS 样式
在 src 文件夹下创建一个新文件夹 components，并在其中创建名为 App.css 的新文件，然后添加以下样式：
-- -------------------- ---- ------- ---- - ------ ------ ------- ---- ----- - ------- - -------- ----- ---------------- -------------- ------------ ------- -------------- ----- - --------- - -------- ----- ---------------- -------------- ------------ ------- - --------- - ----------- ----- - ---------- - -------- ----- ---------------- -------------- ------------ ------- -------------- ----- ----------------- -------- -------- ----- ------- --- ----- ----- -------------- ---- - --------- - ------ ----- ------- ----- ------- ----- - ------------ - ------- ----- -------------- ----- -
步骤 4 - 运行项目
现在，在终端中输入以下命令以运行项目:
npm start
然后，打开浏览器，并访问 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