在前端开发中，我们经常需要实现拖拽排序这类功能，react-beautiful-dnd 就是一个非常出色的 react 库，能够帮助我们实现优雅的拖拽排序。但是，在某些情况下，新版本的 react-beautiful-dnd 有兼容性问题，可能无法直接使用。此时，我们可以使用 react-beautiful-dnd-temparary-old-version 这个包来实现相同的功能。
本文将详细介绍 react-beautiful-dnd-temparary-old-version 的使用方法，并提供了示例代码，希望对大家有所帮助。
安装
首先，我们需要使用 npm 来安装 react-beautiful-dnd-temparary-old-version 包：
npm install --save react-beautiful-dnd-temparary-old-version
使用
接下来，我们就可以开始使用 react-beautiful-dnd-temparary-old-version 了。在你的组件中引入 react-beautiful-dnd-temparary-old-version：
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd-temparary-old-version';DragDropContext
我们需要将整个拖放区域包括在 DragDropContext 组件中。例如：
<DragDropContext onDragEnd={onDragEnd}>
// 拖放区域
</DragDropContext>其中，onDragEnd 是一个回调函数，当拖拽结束时会被调用，我们需要在该函数中处理拖拽数据。
Droppable
我们需要将可以接收拖拽元素的容器包含在 Droppable 组件中。例如：
-- -------------------- ---- -------
---------- ------------------------
----------- --------- -- -
----
-----------------------
---------------------------------------------
-
-- ------
------
--
------------其中，droppableId 是该容器的唯一标识符，在 onDragEnd 中会用到，我们需要确保每个 Droppable 的 droppableId 是唯一的。
getListStyle 是一个根据是否正在拖动来改变样式的函数，可以根据您的需求自行更改。
Draggable
我们需要将要拖拽的元素包含在 Draggable 组件中。例如：
-- -------------------- ---- -------
----------------- ------ -- -
----------
-------------
---------------------
-------------
-
----------- --------- -- -
----
-----------------------
----------------------------
-----------------------------
--------------------
--------------------
-----------------------------
--
-
-- ----
------
--
------------
---其中，key 和 draggableId 分别是该元素的唯一标识符，index 是该元素在数组中的索引位置。
getItemStyle 是根据是否正在拖动来改变样式的函数，可以根据您的需求自行更改。
onDragEnd
onDragEnd 是一个回调函数，在拖拽结束时被调用，可以根据需要进行处理。例如：
-- -------------------- ---- -------
-------- ----------------- -
-- --------------------- -
-------
-
----- ------ - --------
------
--------------------
------------------------
--
-----------------
-这里我们调用了 reorder 函数，该函数可以帮助我们重新排列数组元素的位置。您可以根据您的需求自行实现该函数。
示例代码
以下是完整的示例代码，您可以参考它来实现您的拖拽排序功能：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------------- ---------- --------- - ---- --------------------------------------------
-- ------ --
----- ---------- - -- -- ------------------------ - ------------------
-- --------
----- ------- - ------ ----------- --------- -- -
----- ------ - -----------------
----- --------- - ------------------------- ---
----------------------- -- ---------
------ -------
--
-- ------------------
----- ------------ - ------------ --------------- -- --
-- --
---
-- ------------------
----- ------------ - -------------- -- --
-- --
---
-- ----
----- ------------ - -
-
--- -------------
-------- ----- ---
--
-
--- -------------
-------- ----- ---
--
-
--- -------------
-------- ----- ---
--
--
-------- ----- -
----- ------- --------- - -----------------------
-- --------- ----
-------- ----------------- -
-- --------------------- -
-------
-
----- ------ - --------
------
--------------------
------------------------
--
-----------------
-
------ -
---------------- ----------------------
---------- ------------------------
----------- --------- -- -
-- --
----
-----------------------
---------------------------------------------
-
----------------- ------ -- -
----------
-------------
---------------------
-------------
-
----------- --------- -- -
-- --
----
-----------------------
----------------------------
-----------------------------
--------------------
--------------------
-----------------------------
--
-
--------------
------
--
------------
---
----------------------
------
--
------------
------------------
--
-
------ ------- ----结语
通过本文的介绍，相信大家已经能够了解 react-beautiful-dnd-temparary-old-version 的使用方法，并在项目中实现拖拽排序功能。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608581e8991b448deb92