Пользовательские наложения перетаскивания и DnD между контейнерами

DragOverlay отображает содержимое как портал React, добавляя его непосредственно в document.body, а не внутрь дерева DOM DndContext. Поэтому его никогда не обрезают контейнеры с overflow:hidden или overflow:scroll, и он всегда отображается поверх остальных элементов без необходимости вручную управлять z-index.

Поскольку DragOverlay отделён от исходного элемента, ему можно задать визуальные стили, которые нарушили бы разметку при применении к исходному элементу. Вы можете добавить тень, масштабирование (сделать его немного больше исходного элемента) или эффект поворота. Эти визуальные признаки сообщают пользователю, что элемент «поднят» и находится в движении.

DragOverlay должен знать, что именно отображать. Отслеживайте активный ID перетаскивания в состоянии: задайте его в onDragStart с помощью event.active.id, а в onDragEnd очистите, присвоив null. Внутри DragOverlay используйте этот ID, чтобы найти соответствующие данные элемента и отобразить правильный компонент предпросмотра.

При использовании DragOverlay исходный перетаскиваемый элемент должен становиться визуальным заполнителем во время перетаскивания. При использовании useSortable задайте нулевую непрозрачность или пунктирную границу, когда isDragging равно true. Это показывает «место», куда элемент вернётся при отмене перетаскивания, а также промежуток, который он оставляет при перемещении на новую позицию.

Перетаскивание между несколькими контейнерами означает, что элементы можно перемещать между двумя или более отдельными списками. Для настройки нужен один DndContext, оборачивающий все контейнеры, при этом у каждого контейнера должен быть собственный SortableContext. Идентификаторы всех элементов во всех контейнерах должны быть глобально уникальными, чтобы предотвратить столкновения.

Для плавной анимации между контейнерами обновляйте состояние в onDragOver, а не ждите onDragEnd. Когда перетаскиваемый элемент попадает в новый контейнер, немедленно переместите его из исходного контейнера в целевой. Это обеспечивает визуальную обратную связь в реальном времени и показывает, где окажется элемент.

При перетаскивании между несколькими экземплярами SortableContext все идентификаторы элементов должны быть уникальными во всём DndContext, а не только внутри каждого списка. Если два контейнера используют один идентификатор, dnd-kit не сможет определить, какой элемент активен. Используйте UUID или добавляйте к идентификаторам имя контейнера, чтобы обеспечить глобальную уникальность.

useDraggable и useSortable принимают параметр data: useSortable({ id, data: { containerId, type } }). Эти данные доступны в обратных вызовах событий перетаскивания как event.active.data.current. В сценариях с несколькими контейнерами можно сохранить в данных идентификатор исходного контейнера и использовать его в onDragOver, чтобы определить, откуда перемещается элемент.

Состояние нескольких контейнеров обычно представляет собой объект, ключами которого служат идентификаторы контейнеров, а значениями — массивы элементов. В onDragOver, если активный элемент находится не в том же контейнере, что и цель под курсором, удалите элемент из массива исходного контейнера и вставьте его в массив целевого контейнера на правильную позицию.

KeyboardSensor работает и при перетаскивании между несколькими контейнерами. Пользователи нажимают клавиши со стрелками, чтобы перемещаться между элементами внутри контейнера, а при достижении его края могут продолжить перемещение в соседний контейнер. Алгоритм collisionDetection в SortableContext определяет ближайшую допустимую цель отпускания на основе положения.

DndContext принимает свойство collisionDetection, определяющее, как вычисляется зона отпускания, над которой находится перетаскиваемый элемент. Стратегия по умолчанию closestCenter хорошо подходит для большинства списков. closestCorners лучше подходит для сеток. pointerWithin активирует зону отпускания только тогда, когда курсор физически находится внутри неё.

DragOverlay отображается как портал в document.body, сохраняя визуальную независимость от ограничений разметки. Отслеживайте activeDragId в onDragStart и onDragEnd, чтобы отображать правильное содержимое оверлея. Перетаскивание между несколькими контейнерами использует несколько экземпляров SortableContext внутри одного DndContext с глобально уникальными идентификаторами. Обновляйте состояние в onDragOver для плавной анимации между контейнерами, используя event.active.data.current для получения метаданных исходного контейнера.