weixin_42192909的博客

拖拽的整体主要代码 ——拖拽完整代码 拖拽的整体主要代码 ​ 实现本次拖拽的效果的主要代码如下 import React,{useRef,useEffect,useState} from 'react' import './index.scss' const prefixCls = 'drag' interface distanceState { left: number, right: number, top: number, bottom: number, width: numbe

左右方向判断问题以及节流处理 —— 拖拽实现二 左右方向的判断 ​ 在onDragEnd判断时，发现在拖拽左边或者右边会产生问题，需要根据此进行判断，如果是距离原始位置左侧时需要将在endIndex中+1，避免拖拽跨越两个的左侧，而在右侧时则不需要判断，当在最左侧或者最右侧时单独判断，主要代码如下 const handleDragEnd = (e: any,index: number) => { const {clientX,clientY} = e const {leftWidt

自定义hook的练习以及react事件 —— 拖拽实现一 场景 ​ 对拖拽比较感兴趣，之前也没有接触过，就尝试着自己实现了拖拽的功能，样式效果如下 自定义hook ​ 在获取每个块距离屏幕的位置（用于之后的数据判断）的时候尝试采用了自定义hook来获取数据，代码如下 const useDistanceArr = (dragArrRef: any) => { const [distanceArr,setDistanceArr] = useState<distanceState[]>([