사용자 지정 드래그 오버레이와 다중 컨테이너 DnD

DragOverlay는 콘텐츠를 React 포털로 렌더링하여 DndContext의 DOM 트리 내부가 아닌 document.body에 직접 추가합니다. 따라서 넘치는 내용이 숨겨지거나 스크롤되도록 설정된 컨테이너에 의해 절대 잘리지 않으며, 수동으로 쌓임 순서를 관리하지 않아도 항상 다른 모든 요소 위에 표시됩니다.

DragOverlay는 원본 요소와 분리되어 있으므로 원본 요소에 적용하면 레이아웃을 깨뜨릴 수 있는 시각적 스타일도 적용할 수 있습니다. 드롭 그림자, 크기 조정 변환(원본보다 약간 크게 만들기) 또는 회전 효과를 추가할 수 있습니다. 이러한 시각적 단서는 항목이 "들려 올라가" 움직이는 중임을 사용자에게 전달합니다.

DragOverlay는 무엇을 렌더링할지 알아야 합니다. 상태에서 활성 드래그 ID를 추적하십시오. onDragStart에서 event.active.id로 설정하고, onDragEnd에서 null로 지웁니다. DragOverlay 내부에서는 이 ID를 사용하여 해당 항목의 데이터를 찾고 올바른 미리 보기 구성 요소를 렌더링합니다.

DragOverlay를 사용할 때 원래 드래그 가능 항목은 드래그하는 동안 시각적 자리 표시자가 되어야 합니다. useSortable을 사용한다면 isDragging이 true일 때 불투명도를 0으로 설정하거나 점선 테두리를 적용하십시오. 이렇게 하면 드래그가 취소될 경우 항목이 돌아갈 "자리"와 새로운 위치로 이동할 때 남기는 빈 공간을 보여 줄 수 있습니다.

다중 컨테이너 드래그 앤 드롭에서는 두 개 이상의 서로 분리된 목록 사이로 항목을 옮길 수 있습니다. 모든 컨테이너를 감싸는 하나의 DndContext가 필요하며, 각 컨테이너에는 고유한 SortableContext가 있어야 합니다. 충돌을 방지하려면 모든 컨테이너의 항목 ID가 전체에서 중복되지 않아야 합니다.

컨테이너 간 애니메이션을 부드럽게 만들려면 onDragEnd를 기다리는 대신 onDragOver에서 상태를 업데이트하십시오. 드래그 중인 항목이 새로운 컨테이너로 들어가면 원본 컨테이너에서 대상 컨테이너로 즉시 옮깁니다. 그러면 항목이 어디에 놓일지 실시간으로 시각적 피드백을 제공할 수 있습니다.

여러 SortableContext 인스턴스 사이로 드래그할 때는 각 목록 내부에서뿐 아니라 전체 DndContext에서 모든 항목 ID가 고유해야 합니다. 두 컨테이너가 같은 ID를 공유하면 드래그 앤 드롭 키트가 어떤 항목이 활성 상태인지 판단할 수 없습니다. 전역적으로 고유하게 만들려면 UUID를 사용하거나 컨테이너 이름을 ID 앞에 붙이십시오.

useDraggable과 useSortable은 data 옵션을 받습니다: useSortable({ id, data: { containerId, type } }). 이 데이터는 드래그 이벤트 콜백에서 event.active.data.current로 사용할 수 있습니다. 다중 컨테이너 상황에서는 원본 컨테이너 ID를 데이터에 저장하고 onDragOver에서 사용하여 항목이 어디에서 왔는지 확인할 수 있습니다.

다중 컨테이너 상태는 일반적으로 컨테이너 ID를 키로 사용하고 각 키에 항목 배열을 담는 객체를 사용합니다. onDragOver에서 활성 항목이 대상 항목과 다른 컨테이너에 있으면 원본 컨테이너 배열에서 항목을 제거하고 올바른 위치에 대상 컨테이너 배열로 삽입합니다.

KeyboardSensor는 다중 컨테이너 드래그 앤 드롭에서도 작동합니다. 사용자는 화살표 키를 눌러 컨테이너 안의 항목 사이를 이동하고, 컨테이너의 가장자리에 도달하면 인접한 컨테이너로 계속 이동할 수 있습니다. SortableContext의 collisionDetection 알고리즘은 위치를 기준으로 가장 가까운 유효한 놓기 대상을 결정합니다.

DndContext는 드래그 중인 항목이 어떤 놓기 대상 위에 있는지 계산하는 방식을 결정하는 collisionDetection 속성을 받습니다. 기본값인 closestCenter는 대부분의 목록에서 잘 작동합니다. closestCorners는 격자에 더 적합합니다. pointerWithin은 커서가 실제로 놓기 대상 내부에 있을 때만 해당 대상을 활성화합니다.

DragOverlay는 document.body에 포털로 렌더링되어 레이아웃 제약으로부터 시각적으로 독립됩니다. onDragStart와 onDragEnd에서 activeDragId를 추적하여 올바른 오버레이 콘텐츠를 렌더링합니다. 다중 컨테이너 드래그 앤 드롭은 하나의 DndContext 안에 여러 SortableContext 인스턴스를 사용하며, 모든 ID는 전체에서 고유해야 합니다. 컨테이너 간 애니메이션을 부드럽게 만들려면 onDragOver에서 상태를 업데이트하고, 원본 컨테이너 메타데이터에는 event.active.data.current를 사용합니다.