strange offset while dragging(react beautiful dnd)

https://github.com/atlassian/react-beautiful-dnd/issues/1881

이슈

react beautiful dnd로 드래그 앤 드랍 UI를 구성하던 중 드래그 중 드래그한 블럭의 위치가 이상한 곳으로 이동되어 위치하는 현상이 발생하였다

원인

모달 창안에서 css를 absolute, transform: translate(-50%, -50%) as I needed to use top: 50%; left: 50%를 주고 사용하고 있었는데 이 경우에 offset을 잡지 못하는 현상이었다

조치

비슷한 현상을 겪고 이슈를 올린 곳에 있는 답변을 보고 해결하였다

• https://github.com/atlassian/react-beautiful-dnd/issues/1881#issuecomment-872584015

const viewportNode = document.getElementById('viewport') // container aligned in the middle

// In render part for Draggable
  <Draggable index={Number(idx)} draggableId={String(idx)} key={idx}>
      {(provided, snapshot) => {
          if (snapshot.isDragging) {
              provided.draggableProps.style.left = provided.draggableProps.style.left - (viewportNode.offsetLeft - (viewportNode.offsetWidth/2));
              provided.draggableProps.style.top = provided.draggableProps.style.top - (viewportNode.offsetTop - (viewportNode.offsetHeight/2));
          }
          return ( // rest of your render )
   }}
</Draggable>

• 특이 사항
  • 현재 Typescript에서 provided.draggableProps.style.left는 존재하지 않는 것으로 나오지만 실제로 드래그 할 경우엔 표시되는 것을 확인할 수 있다
  • provided.draggableProps.style.left가 있는 곳에 ts-ignore를 붙여줘야했다