TIL 24.10.28 react-draggable positionOffset, bounds 위치 문제 해결

1. 문제점

 

공용 컴포넌트를 직접 만들고 있는데 dialog 를 제작할 때 화면의 정 가운데에 가게 하도록 컨테이너의 기본 css 는 다음처럼 했다. 

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

 

그러나 드래그 가능한 컴포넌트를 만들기위해 react-draggable로 해당 컴포넌트를 감싸게 되면 자꾸 살짝 오른쪽 밑으로 기울어있는 것이다. (정가운데가 아님) 

그래서 개발자도구를 켜서 추가적인 css 속성이 들어가나 확인해봤더니, 다음처럼 transform: translate 속성이 0px, 0px 로 바뀌어있었음.

 

2. 시도해본것

 

그래서 stackoverflow 에서 나와 같은 문제를 겪고있는 사람들의 글을 서치해 봤는데, Draggable 에는 positionOffset이라고 position에 대한 기본값을 셋팅할 수 있도록 하는 옵션이 있었다.

 

그래서 다음과 같이 적용하니까 감쪽같이 정가운데로 왔다.

    <Draggable
      positionOffset={{ x: "-50%", y: "-50%" }}
    >

 

그런데 여기서 문제는 하나 더 있었음. Draggable의 bounds="body" 속성을 사용하면 컴포넌트를 드래그할때 body 바깥으로 벗어나지 않게 하는 방법이 있었는데, positionOffset을 적용하면 이 값 때문에 드래그 시 왼쪽은 컴포넌트가 바디 바깥으로 나가버리고 오른쪽영역은 컴포넌트가 경계에 닿지도 않았는데 움직이지도 않는다는 것이다.

 

 

3. 해결방안

 

나와 같은 현상을 겪는 사람들이 있어서 깃헙 이슈 링크첨부

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

positionOffset effects the bounds · Issue #535 · react-grid-layout/react-draggable

 

  const handleStart = (e: DraggableEvent, data: DraggableData) => {
    if (!data) {
      return;
    }

    const x = data.node.offsetLeft - data.node.offsetWidth / 2;
    const top = -data.node.offsetTop + data.node.offsetHeight / 2;
    const bottom =
      window.innerHeight - (data.node.offsetTop + data.node.offsetHeight / 2);

    setBounds({ left: -x, right: x, top: top, bottom: bottom });
  };

 

 

handleStart 안에 받아오는 data는 위처럼 드래그를 할 때마다 좌표값이 변경되게 된다. 이에 따라 onStart={handleStart} 로 위처럼 드래그 가능한 영역을 제한해둔다. 그렇게되면 드래그 가능한 영역이 정확하게 화면을 벗어나지 않게 된다. 이후 bounds 에 변경된 x 값을 저장한다.

 

 

4. 알게된 것

 

라이브러리를 사용할때는 사용방법과 그 속성값에 대해서 정확히 알고 사용하자. 그리고 검색을 생활화해서 나와 같은 문제를 가진 사람들의 해결방법을 자주 찾아보면 금방 해결할 수 있는 문제들이 많다.