简介
preact-dnd 是一个用于实现拖拽效果的npm包，它是基于React的DnD库react-dnd的轻量级版本。它能够方便地实现各种拖放功能。
安装
您可以通过npm安装preact-dnd，使用以下命令：
npm install preact-dnd
使用
示例
让我们看一个简单的使用示例。假设我们有一个div，我们想要将它拖到另一个div上：
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ - ------- - ---- -------------
------ ------- -------- ------------------ -
----- --- - ---------
----- -- ---------- -- ----- - ---------
----- - ----- -------- --
-------- ------- -- --
----------- -----------------------
---
---
----------
------ ---- -------------- --- ----------- - --- --------- - ------------
-Hook
preact-dnd的主要抽象是Drag and Drop Hook。Hook是一种API，使函数组件可以利用react-dnd API。
使用Drag and Drop Hook，您可以通过以下方式生成一个Draggable：
-- -------------------- ---- -------
------ - ------ - ---- ---------
------ - ------- - ---- -------------
------ ------- -------- ------------------ -
----- --- - ---------
----- -- ---------- -- ----- - ---------
----- - ----- -------- --
-------- ------- -- --
----------- -----------------------
---
---
----------
------ ---- -------------- --- ----------- - --- --------- - ------------
-上面的代码创建了一个Draggable，并为其设置了一个唯一的类型。然后，通过拖动可拖动元素，并使用collect函数检查isDragging值是否为true。返回值作为组件状态显示。
有关Drag、Drop和Drag and Drop Hook的详细信息，请参见官方文档。
版本问题
preact-dnd的版本问题可能会导致问题。如果您正在使用版本0.1.0，你会遇到在开始拖动拖动项时的一个错误。
TypeError: bindDragSource is not a function
解决方案是将preact-dnd升级到一个更高的版本。
总结
使用preact-dnd实现拖拽并不难，只需要按照文档和本文的指示进行操作就行了。preact-dnd提供了可靠的Drag-and-Drop实现的API。与react-dnd相比，它更轻便，便于使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600e81e8991b448dde75