前置知识
在学习使用@atlaskit/drag-and-drop之前，我们需要了解一些前置知识，包括：
- React：@atlaskit/drag-and-drop是一款基于React框架的拖拽组件，因此熟练掌握React是使用该组件的前置要求。
- Node.js：@atlaskit/drag-and-drop是一个NPM包，因此我们需要了解如何使用Node.js进行NPM包的安装和使用。
简介
@atlaskit/drag-and-drop是一款基于React框架的拖拽组件，在前端开发中，拖拽常常被用于实现各种可视化应用程序，例如将拖拽元素从一个容器移到另一个容器中等。
该组件不仅提供了基本的拖拽功能，还包括了诸如分组、排序、拖拽代理等高级特性。拥有强大、易用的API，能够很容易地通过组合功能自定义组件以适应您的应用程序需求。
安装
使用npm进行安装：
npm install @atlaskit/drag-and-drop
示例
我们将演示如何使用@atlaskit/drag-and-drop实现一个简单的拖拽列表。
基本结构
首先，我们需要建立一个包含多个列表项的列表。每个列表项包含一个id和text属性：
const items = [
{ id: 'item-1', text: 'Item 1' },
{ id: 'item-2', text: 'Item 2' },
{ id: 'item-3', text: 'Item 3' },
{ id: 'item-4', text: 'Item 4' },
{ id: 'item-5', text: 'Item 5' },
];列表组件
我们可以使用React编写列表组件。为简单起见，我们在组件内定义了一个useState钩子来保存列表项：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- -------- ------ -
----- ------ -------- - ----------------
------ -
----
---------------- -- -
--- ------------------------------
---
-----
--
-拖拽逻辑
要使列表中的项可拖动，我们需要将列表项包装在一个Draggable组件中。每个Draggable组件都需要唯一的id和draggableProps属性：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------
------ ------- -------- ------ -
-- ---
------ -
----
---------------- -- -
---------- ------------- ----------------------
----------- --------- -- -
---
-----------------------
----------------------------
-----------------------------
-
-----------
-----
--
------------
---
-----
--
-我们还需要添加onDragEnd事件处理函数来处理拖拽结束后的逻辑。这个函数会获取拖拽开始和结束时的位置信息。我们可以使用这些信息来重新排列列表项：
-- -------------------- ---- -------
------ - ---------------- --------- - ---- --------------------------
------ ------- -------- ------ -
----- ------ -------- - ----------------
----- --------- - -------- -- -
-- --------------------- -
-------
-
----- ----- - -----------------
----- --------------- - --------------------------------- ---
-------------------------------------- -- ---------------
---------------
--
------ -
---------------- ----------------------
----
---------------- ------ -- -
---------- ------------- --------------------- --------------
----------- --------- -- -
---
-----------------------
----------------------------
-----------------------------
-
-----------
-----
--
------------
---
-----
------------------
--
-现在，我们已经得到了一个支持拖拽排序的列表组件。
结论
@atlaskit/drag-and-drop是一款功能强大的React拖拽组件。它提供了许多高级特性，包括拖拽代理、分组、排序等。了解了它的API后，我们能够自定义组件以缓解我们的应用程序需求，并可以轻松地实现可视化的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fbf81e8991b448dd09c