소개

@simple-motion-dnd/grid는 Motion의 Reorder 기능을 참고해 만든 드래그 앤 드롭 그리드 라이브러리예요. 하지만 Motion Reorder와는 조금 다른 접근 방식을 사용하고 있어요.

이 라이브러리는 Motion을 확장해 만든 컴포넌트라서, 모바일 환경에서도 터치 기반 드래그 앤 드롭을 자연스럽게 지원해요.

Reorder와의 차이점

Motion의 Reorder는 모든 드래그 가능한 요소의 위치 정보를 메모리에 저장해두고, 드래그 중 요소가 겹치는 순간을 감지하는 방식으로 동작해요. Reorder는 그리드형태는 지원하지 않고 수직, 수평방향 만 지원하고있어요

반면, @simple-motion-dnd/grid는 그리드 형태를 지원하면서, 위치 정보를 저장하지 않는 경량화된 구조로 만들어졌어요. 드래그하는 시점에만 필요한 정보를 실시간으로 계산해서 처리하기 때문에 메모리 사용량이 훨씬 적고, 불필요한 연산이 줄어들어요.

정확한 감지

이 라이브러리는 elementFromPoint API를 활용해서 드래그 중 마우스(또는 터치) 위치 아래에 있는 요소를 감지해요. DOM API를 직접 활용하기 때문에, 별도의 복잡한 위치 계산 없이 브라우저의 네이티브 기능만으로 정확한 충돌 검사를 수행할 수 있어요. 이 덕분에 성능이 가볍고, 드래그 중에도 부드러운 반응을 보여요.

드래그 중 스크롤 지원

드래그 중에 컨테이너의 경계에 닿으면 자동으로 스크롤이 발생해요. 긴 리스트나 세로 스크롤 영역에서도 부드럽게 드래그할 수 있도록 스크롤 방향과 속도를 실시간으로 조절해요.

또한, 페이지나 컨테이너가 이미 스크롤된 상태에서도 스크롤 위치를 고려해 좌표를 자동으로 보정해요. 그래서 다양한 스크롤 환경에서도 일관된 드래그 앤 드롭 경험을 제공해요.