Repolode
Предложить
clauderic

clauderic/dnd-kit

Современный и лёгкий drag-and-drop-инструментарий для веба с независимым от фреймворков ядром и адаптерами для React, Vue, Svelte и SolidJS.

Открыть на GitHubСайт
Звёзды
17,738
Форки
927
Открытые issues
134
Последний коммит
7 дней назад

Что это?

dnd-kit — это drag-and-drop-инструментарий для создания интерактивных веб-интерфейсов. Он состоит из нескольких слоёв: независимого от фреймворков ядра (@dnd-kit/abstract), реализации для DOM (@dnd-kit/dom) и тонких адаптеров для React, Vue, Svelte и SolidJS. Также доступен вариант на чистом JavaScript.

Инструментарий подходит для работы со списками, сетками, несколькими контейнерами, вложенными контекстами, элементами разных размеров и виртуализированными списками. В него входят сенсоры указателя, мыши, касаний и клавиатуры; разработчики могут заменять сенсоры, алгоритмы обнаружения коллизий и привязки клавиш. Поверх ядра построен слой сортировки (@dnd-kit/dom/sortable) для распространённых сценариев перестановки элементов в списках.

Доступность обеспечивается поддержкой клавиатуры, стандартными атрибутами ARIA, настраиваемыми инструкциями для скринридеров и live regions. Проект написан на TypeScript и распространяется по лицензии MIT.

Ключевые возможности

  • 01Независимое от фреймворков ядро с адаптерами для React, Vue, Svelte и SolidJS
  • 02Встроенные сенсоры указателя, мыши, касаний и клавиатуры
  • 03Поддержка списков, сеток, нескольких контейнеров и виртуализированных списков
  • 04Настраиваемые сенсоры, обнаружение коллизий и привязки клавиш
  • 05Слой сортировки на основе ядра для списков с переставляемыми элементами
  • 06Поддержка клавиатуры и стандартные атрибуты ARIA для доступности

Сценарии использования

  • Создание сортируемых списков или досок в стиле kanban в приложении на React или Vue
  • Создание drag-and-drop-сеток или макетов с несколькими контейнерами
  • Добавление в веб-интерфейс перестановки элементов с поддержкой касаний и клавиатуры

Быстрый старт

  1. 1

    Выберите свой фреймворк и следуйте краткому руководству по быстрому запуску на dndkit.com

  2. 2

    Установите зависимости монорепозитория с помощью bun

    bun install
  3. 3

    Запустите режим разработки

    bun run dev

Темы

#drag-and-drop#react#vue#svelte#typescript#accessibility#sortable#ui-components#drag#draggable

Частые вопросы

Что такое dnd-kit?
Современный и лёгкий drag-and-drop-инструментарий для веба с независимым от фреймворков ядром и адаптерами для React, Vue, Svelte и SolidJS. dnd-kit — это drag-and-drop-инструментарий для создания интерактивных веб-интерфейсов. Он состоит из нескольких слоёв: независимого от фреймворков ядра (@dnd-kit/abstract), реализации для DOM (@dnd-kit/dom) и тонких адаптеров для React, Vue, Svelte и SolidJS. Также доступен вариант на чистом JavaScript.
dnd-kit можно использовать бесплатно? Какая у него лицензия?
dnd-kit распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
dnd-kit всё ещё поддерживается?
Активно поддерживается. Последний коммит в dnd-kit — 15 окт. 2026 г..
Для чего можно использовать dnd-kit?
Создание сортируемых списков или досок в стиле kanban в приложении на React или Vue Создание drag-and-drop-сеток или макетов с несколькими контейнерами Добавление в веб-интерфейс перестановки элементов с поддержкой касаний и клавиатуры
Как установить dnd-kit?
Выберите свой фреймворк и следуйте краткому руководству по быстрому запуску на dndkit.com Установите зависимости монорепозитория с помощью bun: bun install Запустите режим разработки: bun run dev
Где скачать dnd-kit?
Исходный код и инструкции по установке — на GitHub: https://github.com/clauderic/dnd-kit

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты