自定义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
}