时间戳

首页 > 解决方案 > 如何使用嵌套事件在 React 上制作可拖动的 Div？

javascript - 如何使用嵌套事件在 React 上制作可拖动的 Div？

问题描述

我想从头开始制作一个可拖动的模态。在 youtube 上找到了本教程，但它仍然使用静态 HTML 和 vanilla javascript。尝试useRef & useEffect在 React 上使用，但我发现在单击元素时使用onDrag里面的事件onMouseDown只会触发onMouseDown。

vanilla javascript中的代码

header.addEventListener("mousedown", () => {
   header.classList.add("active");
   header.addEventListener("mousemove", onDrag);
});

反应中的代码

import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { ModalStyled } from './ModalComponentStyled'
import { ReactComponent as DragIconSVG } from '../../images/drag-icon.svg'

const modalRoot = document.getElementById('modal')

const ModalComponent = ({ close, children, zIndexProps }) => {
let modalWrapper = undefined
  const modalRef = useRef()
  const moveRef = useRef()
  useEffect(() => {
    modalWrapper = window.getComputedStyle(modalRef.current)
  }, [modalRef])

  const dragModalHandler = (e) => {
    // const left = parseInt(modalWrapper.left)
    // const top = parseInt(modalWrapper.top)
    // modalRef.current.style.left = `${left + movementX}px`
    // modalRef.current.style.top = `${top + movementY}px`

    console.log(e)
  }

  const mouseDownModalHandler = (e) => {
    dragModalHandler(e)
  }
return ReactDOM.createPortal(
    <ModalStyled zIndexProps={zIndexProps}>
      <div className="overlay" onClick={close}></div>
      <div ref={modalRef} className="modal-container">
        <div className="modal-children">
          {children}
          <div
            className="drag"
            ref={moveRef}
            onMouseDown={mouseDownModalHandler}
            onDrag={dragModalHandler}
          >
            <DragIconSVG />
          </div>
        </div>
      </div>
    </ModalStyled>,
    modalRoot
  )

我已经将静态 vanilla 代码转换为沙箱，所以你们可以清楚地看到我的上下文。 https://codesandbox.io/s/draggablediv-pm33s

标签： javascriptreactjs

解决方案

仅使用 useState 获得此解决方案 https://codesandbox.io/s/draggablemodalreact-7gp38

推荐阅读