如何实现一个React拖拽功能，仅需一百多行代码的Hooks？

本文共计1606个文字，预计阅读时间需要7分钟。

前言：源码总共也只是一百多行，看完这个大抵可以理解一些流行的React拖拽库，如react-dnd的实现思路。然后上手这些库的时候就会快很多。

使用hooks实现的高效动态效果图：

前言

源码总共也就一百多行，看完这个大致可以理解一些成熟的react拖拽库的实现思路，比如react-dnd，然后你上手这些库的时候就非常快了。

使用hooks实现的大致效果动图如下：

我们的目标是实现一个useDrag和useDrop的hooks，类似以下用法就可以轻松让元素可以拖拽，并且在拖拽的各个生命周期，如下，可以自定义传递消息（顺便介绍几个拖拽会触发的事件）。

• dragstart：用户开始拖拉时，在被拖拉的节点上触发，该事件的target属性是被拖拉的节点。
• dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
• dragover：拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒），该事件的target属性是当前节点。该事件与dragenter事件的区别是，dragenter事件在进入该节点时触发，然后只要没有离开这个节点，dragover事件会持续触发。
• dragleave：拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。