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; }
效果展示
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- React前端DOM常見Hook封裝示例上
- 詳解Python Selenium如何獲取鼠標指向的元素
- JavaScript之BOM構成和常用事件詳解
- js實現簡單的拖拽效果
- vue實現水波漣漪效果的點擊反饋指令