react 实现自定义拖拽hook

前沿

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

正文

拖拽功能原理：

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

代码开发：

useDrag.jsx

import {
    useEffect, useState } from "react";
/*
 * @drag: 添加拖拽事件的元素（支持传入元素的drager，id，class等）必填参数
 * @draggerBox: 被拖拽的整体元素（支持传入元素的dragger，id，class等）可选参数
 * @container: 可拖拽的区域（支持传入元素的dragger，id，class等）可选参数
 * @maring: 离外部元素的间隔 可选参数
 */
export default function useDrag({
    dragger, draggerBox = dragger, container = document.body, maring = [0, 0, 0, 0] }) {
   
  const [translateX, setTranslateX] = useState(0); // 水平方向偏移量
  const [translateY, setTranslateY] = useState(0); // 垂直方向偏移量

  useEffect(() => {
   
    if (!dragger) return;
    if (!draggerBox) return;
    if (!container) return;
    dragger =