介绍
@spotware/react-dnd-scrollzone 是一个支持拖放并在拖放时自动滚动的 React 组件。它支持嵌套滚动,并使用 resize 检测和 requestAnimationFrame 以实现高性能。它基于 react-dnd 和 react-scroll 驱动。
安装
使用 npm 或 yarn 安装:
--- ------- ------ ------------------------------
或者
---- --- ------------------------------
示例
------ ----- ---- -------- ------ - ----------- - ---- ------------ ------ - ------------ - ---- -------------------------- ------ - ---------- - ---- --------------------------------- ----- --------------- - -- ---------- -- -- - ----- ------ - - ---------------- ----------------- ------ -------- -------- ---- ------ ------- ------ -------- ---------- - --- - -- ------- ------ -- ------ ---- ---------------- -- - --------- ---------------- -- ----- --- - -- -- - ------ - ------------ ----------------------- ------------ ---------------- -- ------------- -------------- -- - ------ ------- ----
使用方法
Scrollzone
使用 Scrollzone 组件包裹需要支持滚动的区域。它支持以下属性:
scrollSpeed
: 设置滚动速度,默认为 20scrollCallback
: 滚动时执行的回调函数,默认为空函数scrollGrid
: 滚动区域是否按照网格滚动,默认为 true
----------- ---------------- ------------------ ------------------ -- -------------------------- --- ---- ---- ---- --- -------------
DndItem
如果您的组件需要支持拖放,则应使用 DndItem 。它支持以下属性:
id
: 您的组件的唯一 IDtype
: 您的组件的类型monitor
: 拖出时检测器,默认为 CollectedProps 实例drop
: 拖动被放置在目标上时执行的回调函数,默认为空函数beginDrag
: 拖动开始时执行的回调函数,默认为空函数endDrag
: 拖动结束时执行的回调函数,默认为空函数style
: 设置被拖拽时的样式,默认为null
className
: 设置被拖拽时的 CSS 类,默认为null
在您的组件中使用 DndItem:
------ ----- ---- -------- ------ - ------- - ---- ------------ ------ - ------- - ---- --------------------------------- ----- --------------- - -- ---- -- -- - ----- -------------- ----- - --------- ----- - ----- -------------- -- -------- ------- -- -- ----------- ---------------------- -- --- ----- ------ - - -------- ---------- - --- - -- ------- ------ -- ------ - -------- --------------------------- ------------------- ----------------- -------- -- -------------- --- ------- -- - --------- ------------- -- -------------- ------- ------------ ----------- -- -------------- -------- ------------ -------------- -------------------------- - ---- ----------- - -- - --------- --------- ------ ------ ---------- -- -- ------ ------- ----------------
DndTarget
如果您的组件需要支持放置,则应使用 DndTarget 。它支持以下属性:
id
: 您的组件的唯一 IDtypes
: 您支持的拖拽类型monitor
: 拖出时检测器,默认为 CollectedProps 实例dragOver
: 拖动被悬停在目标元素上时执行的回调函数,默认为空函数drop
: 拖动被放置在目标上时执行的回调函数,默认为空函数canDrop
: 如果可以将拖动内容放在该特定目标上,则返回 true ,否则返回 false
在您的组件中使用 DndTarget:
------ ----- ---- -------- ------ - ------- - ---- ------------ ------ - --------- - ---- --------------------------------- ----- ----------------- - -- ---- -- -- - ----- -- ------ -- ----- - --------- ------- --------------- -------- ------- -- -- ------- ------------------ -- --- ----- ------ - - ---------------- ------ - ----------- - ------- -- ------ - ---------- ------------------------ ------------------------ ----------------- ------------ -- -------------- -- ----- ------- -------- -------- -- -------------- ---- ----- ------------ ----------- -- ----- - ---- ---------- --------------- - -- - -------- ------ ------ ------------ -- -- ------ ------- ------------------
总结
@spotware/react-dnd-scrollzone 是一个方便的 React 组件包,用于使您的应用程序支持拖放并在拖放时自动滚动。通过使用 DndItem 和 DndTarget 组件,您可以方便地将组件支持为拖放并在 Scrollzone 组件中进行滚动。这使您能够轻松地构建具有高级拖放功能和自动滚动的优美用户界面。试试这个包,看看它能为您的应用程序带来什么价值!
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066b6051ab1864dac672ab