react使用react-draggable制作可拖拽弹框

安装

yarn add react-draggable

使用

import Draggable from 'react-draggable';
export default function TableModal() {
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef(null);
  const onStart = (_event, uiData) => {
    console.log('targetRect',_event, uiData)

    console.log(_event, uiData)
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    console.log('targetRect',targetRect)

    if (!targetRect) {
        return;
    }

    setBounds({
        left: -targetRect.left + uiData.x,
        right: clientWidth - (targetRect.right - uiData.x),
        top: -targetRect.top + uiData.y,
        bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
  <Draggable
    bounds={bounds}
    onStart={(event, uiData) => onStart(event, uiData)}
  >
      <div ref={draggleRef} 
        className={s.wrapPlantPop}  
      >
      // content
      </div>
  </Draggable>
)}