React拖拽封装

暴富富

已于 2024-04-18 14:24:25 修改

阅读量59

点赞数

文章标签： javascript 前端 react.js

于 2022-03-08 10:14:47 首次发布

本文链接：https://blog.csdn.net/qq_44856164/article/details/123346812

版权

该博客介绍了如何在React应用中实现基于鼠标事件的元素拖拽功能。通过`useEffect`和`useRef` Hook，创建了一个`useDrop`自定义Hook，实现了元素的拖动、移动和松开鼠标时的位置更新。该功能适用于前端开发中的交互设计和界面组件的动态布局。

摘要由CSDN通过智能技术生成

import {useEffect, useRef } from "react";
function useDrop() {
    let refone = useRef(null)
    let X, Y, isMove = false,left,top
    //基于鼠标事件实现拖拽
    useEffect(() => {
        const dom = refone.current
        dom.onmousedown = function (e) {
            isMove = true
            X = e.clientX - dom.offsetLeft;
            Y = e.clientY - dom.offsetTop;
        }
        dom.onmousemove = function (e) {
            if (isMove) {
                left = e.clientX - X
                top = e.clientY - Y
                dom.style.top = top + "px"
                dom.style.left = left + "px"
            }

        }
        dom.onmouseup = function (e) {
            isMove = false
        }
    }, [])
    return refone
}