react-dnd-scrollzone-custom 是一款 React 组件，它基于 react-dnd 库，提供了一个可滚动区域，用于拖放操作。这个库可以帮助你实现复杂的拖放功能。
安装 react-dnd-scrollzone-custom
安装 react-dnd-scrollzone-custom 很简单，使用 npm 即可：
npm install --save react-dnd-scrollzone-custom
或者使用 yarn：
yarn add react-dnd-scrollzone-custom
使用 react-dnd-scrollzone-custom
react-dnd-scrollzone-custom 依赖于 react-dnd 库，需要首先将 react-dnd 相关模块引入：
-- -------------------- ---- -------
------ - ----------- - ---- -----------
------ - ------------ - ---- -------------------------
-------- ----- -
------ -
------------ -----------------------
--- ---- ---
--------------
-
-接下来，我们可以将 react-dnd-scrollzone-custom 作为子组件添加到 DndProvider 中：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- - ---- -----------------------------
-------- ------------- -
----- -
---- -- ------- ---
------------- -- -----------
------------- -- -----------
-------------- -- --------- -----
------------- -- --------- -----
- - ---------------
------ -
---- --------- --------------------------- ----------------------------
--- ---- ---
------
-
-这个例子中，我们使用 useScrollZone 钩子获取了 ref 和事件处理函数，以及用于绑定拖放、放置操作的 props。然后将这些属性应用到组件的父元素中。
自定义 scrollBar
react-scrollzone-custom 还提供了一些自定义 scrollBar 样式的 API。你可以使用 customizeScrollBar 函数创建一个可以自定义 scrollBar 的子组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- ------------------ - ---- -----------------------------
----- ----------------- - --------------------
------- --
--------- --
---------------- --
------------------- -------- -- -- ------
------------- ---- --- ---- ------- -- -- ------
-------------- -------- ---- -------
--
-------- ------------- -
----- -
----
--------------
-------------
- - ---------------
------ -
---- --------- ------------------ -------------------
--- ---- ---
------------------ --
------
-
-MyCustomScrollBar 组件将为 scrollBar 元素提供自定义样式，你可以根据自己的需要进行相应的调整。
示例代码
下面是一个完整的使用示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- ------------------ - ---- -----------------------------
------ - ----------- - ---- -----------
------ - ------------ - ---- -------------------------
----- ----------------- - --------------------
------- --
--------- --
---------------- --
------------------- -------- -- -- ------
------------- ---- --- ---- ------- -- -- ------
-------------- -------- ---- -------
--
-------- ------------- -
----- -
----
-------------
-------------
--------------
-------------
- - ---------------
------ -
----
---------
---------------------------
---------------------------
------------------
------------------
--------
------ --------
------- --------
------- ---- ------ ------
--------- -----------
--------- --------
--
-
------------------ --
---- -------- ------ ------- ------- -------- -------- ------ ---
---- -------- ------ ------ -------- -------------- ---
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
---------
-
------
------
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
---------
-
------
------
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
---------
-
------
------
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
---------
-
------
------
------
---- -------- ------ ------ -------- -------------- ---
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
-
------
------
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
-
------
------
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
-
------
------
----
-------- ------ ------- ------- -------- ------- ---- ----- ------ ------------- ----- --
-
------
------
------
------
------
-
-
------ ------- -------- ----- -
------ -
------------ -----------------------
------------ --
--------------
-
-以上就是使用 react-dnd-scrollzone-custom 制作可滚动的拖放区域的方法。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005620181e8991b448df721