前言
在日常开发中，我们常常会有拖拽排序、拖拽改变大小等需求，这是前端交互中比较常见的一种形式。但是，在实现这些需求时常常会遇到一些问题，例如当拖拽到屏幕边缘时，如何实现自动滚动屏幕的效果？而 npm 包 react-dnd-scrollzone 就是为解决这个问题而诞生的。
一、react-dnd-scrollzone 是什么？
react-dnd-scrollzone 是一个为实现拖拽交互提供支持的 npm 包，具有自动滚动屏幕的功能。
在使用 react-dnd-scrollzone 之前，我们需要先了解 React DnD 这个拖拽库。React DnD 是一个 React 基础上的拖拽库，使用起来比较方便，并且代码结构清晰，便于维护。反之，原生拖拽是比较麻烦的，代码结构不够清晰，维护难度大。
二、如何使用 react-dnd-scrollzone？
使用 react-dnd-scrollzone 需要了解一些基本概念，包括拖拽源、拖拽目标以及拖拽项。
在使用 react-dnd-scrollzone 之前，我们需要先安装它：
npm install react-dnd-scrollzone --save
接下来的示例中，我们将通过拖拽改变拖拽项的顺序来演示如何使用 react-dnd-scrollzone。
首先，我们需要定义一个拖拽源（即可以被拖拽的元素）：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ - ---------- - ---- ------------
----- --------- - -
---------- ------------
--
-- -----
----- ---------- - -
---------------- -
----- - ----- ----- - - ------
------ - ----- ----- --
--
--
----- -------- ------- --------- -
------ --------- - -
----- ----------------------------
------ ----------------------------
------------------ --------------------------
--
-------- -
----- - ----- ----------------- - - -----------
------ ------------------
---- ---------------------------------------
--
-
-
------ ------- ------------------------------- ----------- --------- -- --
------------------ ---------------------
--------------然后，我们需要定义一个拖拽目标（即可以接收拖拽源的元素），以便在拖拽结束时更新拖拽项的顺序：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ - ---------- - ---- ------------
------ ---------- ---- -----------------------
----- --------- - -
---------- ------------
--
-- ------
----- ---------- - -
----------- -------- -
----- - ----- ----- - - ------------------
----- - ------ ----------- - - ------
-- --------
----- -------- - -----------
--------------------------- ---
---------------------- -- -----------
----------------------
--
--
----- -------- ------- --------- -
------ --------- - -
------ ---------------------------
------------ --------------------------
------------------ --------------------------
--
-------- -
----- - ------ ----------------- - - -----------
------ ------------------
----------- ----------------------
----------------- ------ -- -
--------- ------------- ----------- ------------- --
---
-------------
--
-
-
------ ------- ------------------------------- ----------- --------- -- --
------------------ ---------------------
--------------最后，我们需要定义一个拖拽项（即一个具体的可拖拽元素），并将其放入 DropZone：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ - ---------- - ---- ------------
----- --------- - -
---------- ------------
--
-- -----
----- ---------- - -
---------------- -
----- - ----- ----- - - ------
------ - ----- ----- --
--
--
----- -------- ------- --------- -
------ --------- - -
----- ----------------------------
------ ----------------------------
------------------ --------------------------
--
-------- -
----- - ----- ----------------- - - -----------
------ ------------------
---- ---------------------------------------
--
-
-
------ ------- ------------------------------- ----------- --------- -- --
------------------ ---------------------
--------------到此为止，我们的拖拽排序功能已经实现，如果需要使用 react-dnd-scrollzone，我们只需要在 DropZone 外层嵌套一个 Scrollzone 组件即可。
三、总结
在本文中，我们学习了如何使用 react-dnd-scrollzone 实现拖拽排序，并对 React DnD 的一些基本概念进行了介绍。希望通过本文的学习，读者能够更加深入地了解拖拽交互，并能够在实际开发中应用 react-dnd-scrollzone 来提升交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f40c5f6dbf7be33b2567236