快捷導(dǎo)航

react實(shí)現(xiàn)自定義拖拽hook

更新時(shí)間：2022年08月25日 16:14:50 作者：丶酸酸

這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)自定義拖拽hook，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前沿

最近發(fā)現(xiàn)公司的產(chǎn)品好幾個(gè)模塊用到了拖拽功能，之前拖拽組件是通過Html5 drag Api 實(shí)現(xiàn)的但體驗(yàn)并不是很好,順便將原來的拖拽組建稍做修改，寫一個(gè)自定義hook，方便大家使用拖拽功能。

正文

拖拽功能原理：

1、拖拽元素通過addEventListener監(jiān)聽器添加鼠標(biāo)按下，鼠標(biāo)移動(dòng)，以及鼠標(biāo)抬起事件。
2、再通過getBoundingClientRect() 得到拖拽元素四周相對(duì)于可拖拽區(qū)域邊界的距離。
3、鼠標(biāo)移動(dòng)時(shí)計(jì)算x軸和y軸的移動(dòng)偏移量。
4、通過element.style.transform 設(shè)置元素移動(dòng)。
5、每次拖拽完成后，都將此次偏移量保存，下次再次拖拽時(shí)，可以保證位置的實(shí)時(shí)性。

代碼開發(fā)：

useDrag.jsx

import { useEffect, useState } from "react";
/*
?* @drag: 添加拖拽事件的元素（支持傳入元素的drager，id，class等）必填參數(shù)
?* @draggerBox: 被拖拽的整體元素（支持傳入元素的dragger，id，class等）可選參數(shù)
?* @container: 可拖拽的區(qū)域（支持傳入元素的dragger，id，class等）可選參數(shù)
?* @maring: 離外部元素的間隔 可選參數(shù)
?*/
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; // 根據(jù)傳入的值類型，去查找使用元素
? ? 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(); // 獲取可拖拽區(qū)域邊界位置

? ? const onMouseDown = event => {
? ? ? const initMouseX = event.clientX; // 元素初始水平坐標(biāo)值
? ? ? const initMouseY = event.clientY;// 元素初始垂直坐標(biāo)

? ? ? const { left: boxL, top: boxT, right: boxR, bottom: boxB } = draggerBox.getBoundingClientRect(); // 獲取拖拽實(shí)體的位置

? ? ? let deltaMouseX; // 實(shí)際水平偏移量
? ? ? let deltaMouseY; // 實(shí)際垂直增量值

? ? ? const onMouseMove = event => {
? ? ? ? const moveMouseX = event.clientX; // 元素移動(dòng)后水平坐標(biāo)值
? ? ? ? const moveMouseY = event.clientY; // 元素移動(dòng)后垂直坐標(biāo)值

? ? ? ? let deltaX = moveMouseX - initMouseX; // 當(dāng)前移動(dòng)水平相對(duì)移動(dòng)距離
? ? ? ? let deltaY = moveMouseY - initMouseY; // 當(dāng)前移動(dòng)垂直相對(duì)移動(dòng)距離

? ? ? ? if (boxL + deltaX < containerL + maring[0]) { // 當(dāng)元素左邊框+水平相對(duì)移動(dòng)距離 < 可拖拽區(qū)域左邊界+左邊距時(shí) （說明元素已經(jīng)超出左側(cè)邊界）
? ? ? ??
? ? ? ? ? deltaX = containerL + maring[0] - boxL;
? ? ? ? }

? ? ? ? if (boxR + deltaX > containerR - maring[1]) { // 當(dāng)元素右邊框+水平相對(duì)移動(dòng)距離 > 可拖拽區(qū)域右邊界+右邊距時(shí) （說明元素已經(jīng)超出右側(cè)邊界）
? ? ? ? ? deltaX = containerR - maring[1] - boxR;
? ? ? ? }

? ? ? ? if (boxB + deltaY > containerB - maring[2]) { // 當(dāng)元素下邊框+垂直相對(duì)移動(dòng)距離 > 可拖拽區(qū)域下邊界+下邊距時(shí) （說明元素已經(jīng)超出下側(cè)邊界）
? ? ? ? ? deltaY = containerB - maring[2] - boxB;
? ? ? ? }

? ? ? ? if (boxT + deltaY < containerT + maring[3]) { // 當(dāng)元素上邊框+垂直相對(duì)移動(dòng)距離 < 可拖拽區(qū)域上邊界+上邊距時(shí) （說明元素已經(jīng)超出上側(cè)邊界）
? ? ? ? ? deltaY = containerT + maring[3] - boxT
? ? ? ? }

? ? ? ? deltaMouseX = deltaX + translateX; // 實(shí)際水平偏移量
? ? ? ? deltaMouseY = deltaY + translateY; // 實(shí)際垂直偏移量
? ? ? ??
? ? ? ? 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;
}

效果展示