react实现自定义拖拽hook
前沿
最近发现公司的产品好几个模块用到了拖拽功能,之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改,写一个自定义hook,方便大家使用拖拽功能。
正文
拖拽功能原理:
1、拖拽元素通过addEventListener监听器添加鼠标按下,鼠标移动,以及鼠标抬起事件。
2、再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离。
3、鼠标移动时计算x轴和y轴的移动偏移量。
4、通过element.style.transform 设置元素移动。
5、每次拖拽完成后,都将此次偏移量保存,下次再次拖拽时,可以保证位置的实时性。
代码开发:
useDrag.jsx
import { useEffect, useState } from "react"; /* * @drag: 添加拖拽事件的元素(支持传入元素的drager,id,class等)必填参数 * @draggerBox: 被拖拽的整体元素(支持传入元素的dragger,id,class等)可选参数 * @container: 可拖拽的区域(支持传入元素的dragger,id,class等)可选参数 * @maring: 离外部元素的间隔 可选参数 */ export default function useDrag({ dragger, draggerBox = dragger, container = document.body, maring = [0, 0, 0, 0] }) { const [translateX, setTranslateX] = useState(0); // 水平方向偏移量 const [translateY, setTranslateY] = useState(0); // 垂直方向偏移量 useEffect(() => { if (!dragger) return; if (!draggerBox) return; if (!container) return; dragger = typeof dragger === 'string' ? document.querySelector(dragger) : dragger; // 根据传入的值类型,去查找使用元素 draggerBox = typeof draggerBox === 'string' ? document.querySelector(draggerBox) : draggerBox; container = typeof container === 'string' ? document.querySelector(container) : container; const { left: containerL, top: containerT, right: containerR, bottom: containerB } = container.getBoundingClientRect(); // 获取可拖拽区域边界位置 const onMouseDown = event => { const initMouseX = event.clientX; // 元素初始水平坐标值 const initMouseY = event.clientY;// 元素初始垂直坐标 const { left: boxL, top: boxT, right: boxR, bottom: boxB } = draggerBox.getBoundingClientRect(); // 获取拖拽实体的位置 let deltaMouseX; // 实际水平偏移量 let deltaMouseY; // 实际垂直增量值 const onMouseMove = event => { const moveMouseX = event.clientX; // 元素移动后水平坐标值 const moveMouseY = event.clientY; // 元素移动后垂直坐标值 let deltaX = moveMouseX - initMouseX; // 当前移动水平相对移动距离 let deltaY = moveMouseY - initMouseY; // 当前移动垂直相对移动距离 if (boxL + deltaX < containerL + maring[0]) { // 当元素左边框+水平相对移动距离 < 可拖拽区域左边界+左边距时 (说明元素已经超出左侧边界) deltaX = containerL + maring[0] - boxL; } if (boxR + deltaX > containerR - maring[1]) { // 当元素右边框+水平相对移动距离 > 可拖拽区域右边界+右边距时 (说明元素已经超出右侧边界) deltaX = containerR - maring[1] - boxR; } if (boxB + deltaY > containerB - maring[2]) { // 当元素下边框+垂直相对移动距离 > 可拖拽区域下边界+下边距时 (说明元素已经超出下侧边界) deltaY = containerB - maring[2] - boxB; } if (boxT + deltaY < containerT + maring[3]) { // 当元素上边框+垂直相对移动距离 < 可拖拽区域上边界+上边距时 (说明元素已经超出上侧边界) deltaY = containerT + maring[3] - boxT } deltaMouseX = deltaX + translateX; // 实际水平偏移量 deltaMouseY = deltaY + translateY; // 实际垂直偏移量 draggerBox.style.transform = `translate(${deltaMouseX}px, ${deltaMouseY}px)`; }; const onMouseUp = () => { setTranslateX(deltaMouseX); // 保存上次水平偏移量 setTranslateY(deltaMouseY); // 保存上次垂直偏移量 window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); } window.addEventListener('mousemove', onMouseMove); window.addEventListener('mouseup', onMouseUp); } dragger.addEventListener('mousedown', onMouseDown); return () => dragger.removeEventListener('mouseup', onMouseDown); }, [dragger, draggerBox, container, maring]) }
使用方法:
import React from 'react'; import useDrag from '../hooks/useDrag' import './index.less'; function Test() { useDrag({ dragger: '.dragger', draggerBox: '.draggerBox', container: '.container', maring: [10, 10, 10, 10]}) return ( <div className='container'> <div className='draggerBox'> <div className='dragger'> </div> </div> </div> ) } export default Test;
.container{ width: 800px; height: 800px; position: absolute; top: 50%; left: 50%; margin: -400px 0 0 -400px; border: 2px solid green; } .draggerBox{ width: 200px; height: 300px; border: 1px solid red; } .dragger{ width: 100%; height: 50px; background: blue; }
效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/a82048195/article/details/123436721
相关文章
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要为大家详细介绍了C#控件Picturebox实现鼠标拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下...2016-02-21- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- C# Hook钩子实例代码之截取键盘输入,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 这篇文章主要介绍了vue element el-transfer增加拖拽功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02