![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
拖拽
好好学前端
菜就要好好学习,莫想别的
展开
-
(react实现拖拽)拖拽的整体主要代码 ——拖拽完整代码
拖拽的整体主要代码 ——拖拽完整代码拖拽的整体主要代码 实现本次拖拽的效果的主要代码如下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原创 2020-09-22 16:05:35 · 1727 阅读 · 0 评论 -
(react实现拖拽)左右方向判断问题以及节流处理 —— 拖拽实现二
左右方向判断问题以及节流处理 —— 拖拽实现二左右方向的判断 在onDragEnd判断时,发现在拖拽左边或者右边会产生问题,需要根据此进行判断,如果是距离原始位置左侧时需要将在endIndex中+1,避免拖拽跨越两个的左侧,而在右侧时则不需要判断,当在最左侧或者最右侧时单独判断,主要代码如下 const handleDragEnd = (e: any,index: number) => { const {clientX,clientY} = e const {leftWidt原创 2020-09-22 15:57:00 · 980 阅读 · 0 评论 -
(react实现拖拽)自定义hook的练习以及react事件 —— 拖拽实现一
自定义hook的练习以及react事件 —— 拖拽实现一场景 对拖拽比较感兴趣,之前也没有接触过,就尝试着自己实现了拖拽的功能,样式效果如下自定义hook 在获取每个块距离屏幕的位置(用于之后的数据判断)的时候尝试采用了自定义hook来获取数据,代码如下const useDistanceArr = (dragArrRef: any) => { const [distanceArr,setDistanceArr] = useState<distanceState[]>([原创 2020-09-22 15:47:59 · 1116 阅读 · 0 评论