Архитектура dnd-kit и дизайн с приоритетом доступности

react-beautiful-dnd была основной библиотекой перетаскивания для React, но в 2023 году её официально перевели в архив и перестали поддерживать. Сообщество быстро выбрало dnd-kit в качестве рекомендуемой замены: библиотека была полностью разработана заново с учётом современного React и доступности.

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

dnd-kit поставляется с тремя встроенными сенсорами. PointerSensor обрабатывает ввод с мыши и сенсорного экрана через унифицированный API событий указателя. KeyboardSensor обеспечивает полноценное перетаскивание только с клавиатуры. TouchSensor обрабатывает устаревшие события касания. Сенсоры настраиваются через свойство sensors компонента DndContext.

В dnd-kit встроена клавиатурная навигация для обеспечения доступности. Пользователь нажимает Пробел, чтобы захватить элемент, клавиши со стрелками, чтобы переместить его на новую позицию, снова Пробел, чтобы отпустить его, и Esc, чтобы отменить перетаскивание без изменений. Эти действия автоматически объявляются программам чтения с экрана.

dnd-kit автоматически добавляет aria-grabbed к перетаскиваемым элементам, чтобы вспомогательные технологии знали об их состоянии захвата. К зонам сброса добавляется aria-dropeffect, сообщающий, что произойдёт при отпускании элемента. Живая область объявляет обновления состояния, поэтому пользователи программ чтения с экрана слышат подтверждения, например «Элемент захвачен» или «Элемент успешно отпущен».

dnd-kit разработан с возможностью удаления неиспользуемых частей, то есть вы импортируете только действительно используемые компоненты. В комплект не входит CSS — вы сами отвечаете за всё визуальное оформление и получаете полный контроль над внешним видом перетаскиваемых элементов, наложений и зон сброса. Благодаря этому размер сборки остаётся минимальным.

DndContext предоставляет три основных обратных вызова событий для отслеживания жизненного цикла перетаскивания. onDragStart срабатывает, когда пользователь начинает перетаскивание, и получает ID активного элемента. onDragOver срабатывает непрерывно, пока перетаскиваемый элемент перемещается над целями сброса. onDragEnd срабатывает после завершения перетаскивания и передаёт активный элемент и цель сброса.

Передайте массив конфигураций сенсоров в DndContext, используя свойство sensors вместе с хуком useSensors. Каждый сенсор инициализируется с помощью useSensor(SensorClass, options). Например, можно настроить PointerSensor на минимальное расстояние перетаскивания, чтобы предотвратить случайное перетаскивание при щелчке.

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

Каждому перетаскиваемому элементу и каждой цели сброса нужен уникальный строковый или числовой ID. Эти идентификаторы — основной способ, с помощью которого dnd-kit отслеживает, какой элемент перетаскивается и куда его отпускают. В onDragEnd прочитайте event.active.id для перетаскиваемого элемента и event.over?.id для цели сброса, чтобы обновить состояние приложения.

В отличие от многих библиотек перетаскивания, которые рассматривают поддержку клавиатуры как второстепенную задачу, dnd-kit делает доступность основой своего дизайна. KeyboardSensor — полноценный компонент с теми же возможностями, что и PointerSensor. Все атрибуты ARIA управляются автоматически, а пользовательские объявления можно настроить через свойство accessibility компонента DndContext.

Какую клавишу использует dnd-kit, чтобы отменить выполняемое перетаскивание с клавиатуры без внесения изменений?

dnd-kit заменил помещённую в архив react-beautiful-dnd и стал стандартом сообщества для перетаскивания в React. Его архитектура строится вокруг DndContext для управления состоянием, сенсоров для абстракции методов ввода (указатель, клавиатура, касание) и модификаторов для ограничения движения. Доступность встроена в основу библиотеки: атрибуты ARIA, объявления в живой области и полноценная клавиатурная навигация доступны из коробки.