DndContext, useDraggable и useDroppable

Каждую функциональность перетаскивания в dnd-kit необходимо обернуть в компонент DndContext. DndContext — это координационный узел: он отслеживает активные перетаскивания, обеспечивает взаимодействие между перетаскиваемыми элементами и целями сброса и запускает обратные вызовы событий. Обычно его размещают на уровне компонента, который управляет состоянием перетаскивания.

Хук useDraggable({ id }) делает компонент перетаскиваемым. Он возвращает четыре ключевых значения: атрибуты (свойства ARIA, которые нужно передать элементу), обработчики (обработчики событий для начала перетаскивания), setNodeRef (подключает ссылку на перетаскиваемый элемент) и преобразование (текущее смещение в виде {x, y, scaleX, scaleY}).

Чтобы подключить перетаскиваемый элемент, передайте attributes и listeners этому элементу, а setNodeRef укажите в свойстве ref. Атрибуты включают role="button", tabIndex и свойства aria. Обработчики подключают события указателя и клавиатуры, необходимые dnd-kit для обнаружения начала перетаскивания.

Значение transform из useDraggable равно null, когда перетаскивание не выполняется, и представляет собой объект координат во время перетаскивания. Преобразуйте его в строку CSS с помощью CSS.Translate.toString(transform) из пакета @dnd-kit/utilities. Примените результат как свойство CSS transform к перетаскиваемому элементу, чтобы визуально перемещать его вслед за курсором.

Хук useDroppable({ id }) отмечает контейнер как допустимую цель сброса. Он возвращает isOver (логическое значение, равное true, пока перетаскиваемый элемент находится над этой целью сброса) и setNodeRef для подключения ссылки к элементу цели сброса. В отличие от useDraggable, обработчики событий передавать не нужно.

Значение isOver из useDroppable позволяет отображать визуальную обратную связь во время перетаскивания. Когда isOver имеет значение true, можно изменить цвет подсветки, границу или фон зоны сброса. Это помогает пользователям понять, куда можно отпустить элемент, что важно для удобства использования и доступности.

Обратный вызов onDragEnd в DndContext получает объект события с двумя важными свойствами: event.active содержит перетаскиваемый элемент, включая его id, а event.over содержит цель сброса или null, если элемент отпустили за пределами любой цели сброса. Используйте эти идентификаторы для обновления состояния приложения.

В onDragEnd после проверки того, что event.over не равно null, обновите состояние, чтобы отразить перемещение. Например, если Вы перемещаете карточку между столбцами на доске Kanban, удалите карточку из исходного столбца и добавьте её в целевой столбец, определённый с помощью event.over.id.

DragOverlay отображает плавающий предпросмотр перетаскиваемого элемента, следующий за курсором. Он отображается как портал (вне обычного дерева DOM), поэтому его никогда не обрезают контейнеры с overflow:hidden. В отличие от исходного элемента, оверлей может иметь тени, масштабирование или поворот, показывающие, что элемент перетаскивается.

Чтобы отобразить правильное содержимое в DragOverlay, отслеживайте, какой элемент сейчас перетаскивается, используя обратный вызов onDragStart. Сохраните активный ID в состоянии: setActiveDragId(event.active.id). В onDragEnd сбросьте его в null. Внутри DragOverlay используйте activeDragId, чтобы найти нужный элемент и отобразить его.

Настоящий интерфейс перетаскивания объединяет DndContext, несколько элементов useDraggable, несколько зон useDroppable и управление состоянием, отслеживающее, где находится каждый элемент. Главная идея заключается в том, что dnd-kit предоставляет механизм работы, а Вам нужно обновлять состояние в onDragEnd и повторно отображать интерфейс, чтобы отразить новое расположение.

Какая утилита преобразует объект transform из useDraggable в строку CSS-трансформации?

DndContext — координационный центр всех операций перетаскивания dnd-kit. useDraggable предоставляет атрибуты, обработчики, setNodeRef и transform для перетаскиваемых элементов. useDroppable предоставляет isOver и setNodeRef для целей отпускания. onDragEnd предоставляет event.active.id и event.over?.id, с помощью которых можно обновить состояние. DragOverlay отображает плавающий предпросмотр на основе портала.