draggable 사용 시 위치 초기화 방법

참고 자료

https://ant.design/components/modal

https://github.com/react-grid-layout/react-draggable/issues/214

 

개요

• position 을 state 로 관리함
• onDrag, onStop 시 position 을 update 해줌
• 라이프사이클에 따라 position 을 {x: 0, y: 0} 으로 초기화해줌

 

 

코드

import Draggable from 'react-draggable';

const [position, setPosition] = useState({}); // 모달의 위치 
const [bounds, setBounds] = useState({ // 모달을 움직일 수 있는 범위 
  left: 0,
  top: 0,
  bottom: 0,
  right: 0,
});
const draggleRef = useRef(null); // 모달의 ref 

useEffect(() => { // 컴포넌트가 마운트 될 때 position 을 reset 해줌 
  dragPositionReset();
}, []);

const dragPositionReset = () => { // position 초기화 함수  
    setPosition({
        x: 0,
        y: 0
    });
}

const onStart = (_event, uiData) => { // 드래그 시작 
  const { clientWidth, clientHeight } = window.document.documentElement;
  const targetRect = draggleRef.current?.getBoundingClientRect();
  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),
  });
};

const onDrag = (_event, givenPosition) => { // 드래그 중 
    setPosition(givenPosition);
}

const onStop = (_event, givenPosition) => { // 드래그 종료
    setPosition(givenPosition);
}


return (
  <Modal
    title=""
    size="medium"
    width={900}
    visible={visible}
    footer={null}
    style={style}
    onCancel={onCancel}
    modalRender={(modal) => (
      <Draggable
          bounds={bounds}
          nodeRef={draggleRef}
          onStart={onStart}
          onStop={onStop}
          onDrag={onDrag}
          position={position} // position 을 상태로 관리함 
      >
        <div ref={draggableRef}>{modal}</div>
      </Draggable>
    )}
   >
    <div>MODAL CODE</div>
  </Modal>
)