(react实现拖拽)自定义hook的练习以及react事件 —— 拖拽实现一

自定义hook的练习以及react事件 —— 拖拽实现一

场景

​ 对拖拽比较感兴趣，之前也没有接触过，就尝试着自己实现了拖拽的功能，样式效果如下

自定义hook

​ 在获取每个块距离屏幕的位置（用于之后的数据判断）的时候尝试采用了自定义hook来获取数据，代码如下

const useDistanceArr = (dragArrRef: any) => {
  const [distanceArr,setDistanceArr] = useState<distanceState[]>([])
  useEffect(()=>{
    if(dragArrRef && dragArrRef.current) {
      let dragArr = dragArrRef.current.querySelectorAll(`.${prefixCls}-item`)
      let newDistanceArr = []
      for(let dragItem of dragArr) {
        let itemDistance = dragItem.getBoundingClientRect()
        newDistanceArr.push(itemDistance)
      }
      setDistanceArr(newDistanceArr)
    }
  },[])
  return distanceArr
} 
</