react实现自定义拖拽hook_React

来源:脚本之家  责任编辑:小易  

前沿

最近发现公司的产品好几个模块用到了拖拽功能,之前拖拽组件是通过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;
}

效果展示


  • 本文相关:
  • 详解react native页面间传递数据的几种方式
  • react中代码分割的4种实现方式
  • react native带索引的城市列表组件的实例代码
  • react翻页器的实现(包含前后端)
  • react-native左右联动list的示例代码
  • 使用react-router实现前端路由鉴权的示例代码
  • reactnative之flatlist的具体使用方法
  • 详解immutable及 react 中实践
  • 深入理解react 组件类型及使用场景
  • react中前端路由的示例代码
  • react router dom如何实现路由聚合的?
  • react 自定义组件可以绑定事件吗
  • react 怎么获取自定义的属性值
  • 如何在react中获取自定义属性的值
  • JS中使用react-tooltip插件实现鼠标悬浮显示框?
  • reactnative 怎么自定义控件
  • 如何在React Native中的使用自定义iconfont
  • 如何在 React Native 中写一个自定义模块
  • 如何评价 React 实现的前端 UI 库 material-ui
  • 如何用 React 实现滚动动画
  • 如何用react实现两次密码一致才通过
  • 怎么用react实现网站页面类似swiper的效果
  • 如何评价 React 实现的前端 UI 库 material-ui
  • 使用React实现轮播效果组件示例代码
  • 怎么用react实现网站页面类似swiper的效果
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库react实现简单的拖拽功能详解gantt甘特图可拖拽、编辑(vue、react都可用?highcharts)react-beautiful-dnd 实现组件拖拽功能使用react-beautiful-dnd实现列表间拖拽踩坑一百多行代码实现react拖拽hooksreact.js组件实现拖拽排序组件功能过程解析react 实现拖拽功能的示例代码react.js组件实现拖拽复制和可排序的示例代码再次谈论react.js实现原生js拖拽效果引起的一系列问题基于react.js实现原生js拖拽效果引发的思考详解react native页面间传递数据的几种方式react中代码分割的4种实现方式react native带索引的城市列表组件的实例代码react翻页器的实现(包含前后端)react-native左右联动list的示例代码使用react-router实现前端路由鉴权的示例代码reactnative之flatlist的具体使用方法详解immutable及 react 中实践深入理解react 组件类型及使用场景react中前端路由的示例代码详解react中传入组件的props改变时更新组件的几种实现vscode配置react开发环境的步骤react-redux中connect的装饰器用法@connreactnative 之flatlist使用及踩坑封装总结详解react native开源时间日期选择器组件(reacreact native实现简单的登录功能(推荐)react-router browserhistory刷新页reactnative之键盘keyboard的弹出与消失示例详解react-router中url参数改变页面不刷新的解决详解各版本react路由的跳转的方法基于webpack4.x从零搭建react脚手架的方法步骤react使用axios进行api网络请求的封装方法详解react hooks与setinterval的踩坑问题小结react router动态加载组件之适配器模式的应用详解jenkins分环境部署vue/react项目的方法步骤react实现页面水印效果的全过程react如何解决fetch跨域请求时session失效问题react render props模式实现组件复用示例详解react内联样式使用webpack将px转rem手挽手带你学react之react-router4.x的使用
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved