(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
} 
</
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值