怎么用react實現自定義拖拽hook

今天小編給大家分享一下怎么用react實現自定義拖拽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實現自定義拖拽hook”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。