如何用React编写自定义拖拽功能的hook？

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

前浪+近期发现的公司产品，有几个模块用到了拖拽功能，之前的拖拽组件是通过Html5 drag Api实现的，体验并不好，方便的话将原来的拖拽组件做一下修改，写一个自定义hook，方便大家使用拖拽。

前沿

最近发现公司的产品好几个模块用到了拖拽功能，之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改，写一个自定义hook，方便大家使用拖拽功能。

正文

拖拽功能原理：

1、拖拽元素通过addEventListener监听器添加鼠标按下，鼠标移动，以及鼠标抬起事件。
2、再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离。
3、鼠标移动时计算x轴和y轴的移动偏移量。
4、通过element.style.transform 设置元素移动。
5、每次拖拽完成后，都将此次偏移量保存，下次再次拖拽时，可以保证位置的实时性。