dnd-kit README

The project's README from github.com/clauderic/dnd-kit. As one markdown file: README.md.

@dnd-kit – the modern toolkit for building drag & drop interfaces

A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web

Features

Getting started

Choose your preferred framework to get started:



JavaScript

Vanilla

Build drag and drop interfaces using plain JavaScript


React

React

Build drag and drop interfaces using React components and hooks


Vue

Vue

Build drag and drop interfaces using Vue composables and components


Svelte

Svelte

Build drag and drop interfaces using Svelte primitives and components


SolidJS

Solid

Build drag and drop interfaces using SolidJS hooks and components

Documentation

Visit dndkit.com for full documentation, API reference, guides, and interactive examples.

Packages

Package Version Description
@dnd-kit/abstract npm Abstract core
@dnd-kit/collision npm Collision detection
@dnd-kit/dom npm Framework-agnostic DOM layer
@dnd-kit/geometry npm Geometry utilities
@dnd-kit/helpers npm Helper functions
@dnd-kit/react npm React adapter
@dnd-kit/solid npm SolidJS adapter
@dnd-kit/state npm Reactive state management
@dnd-kit/svelte npm Svelte adapter
@dnd-kit/vue npm Vue adapter

Contributing

This is a monorepo managed with Turborepo and bun.

# Install dependencies
bun install

# Build all packages
bun run build

# Run dev mode
bun run dev

License

MIT

dnd-kit (clauderic/dnd-kit)

Searching Database…

17.7K ·GitHub
Dnd-kit
Что это такое?dnd-kit — это современный набор инструментов для создания интерфейсов с перетаскиванием (drag and drop). Он задуман как легковесный, производительный, доступный и расширяемый.
Это только библиотека для React или она поддерживает и другие фреймворки?Библиотека построена слоями: независимое от фреймворка ядро (@dnd-kit/abstract), реализация для DOM (@dnd-kit/dom) и тонкие адаптеры для React, Vue, Svelte и SolidJS.
Как добавить её в проект?Установите пакет для вашего фреймворка (например, @dnd-kit/react) и следуйте руководству по началу работы для нужного фреймворка на сайте документации.
Нужны ли дополнительные библиотеки для поддержки сенсорных экранов или клавиатуры?Нет, встроенные сенсоры для указателя, мыши, сенсорного ввода и клавиатуры работают сразу, без дополнительной настройки.
Справится ли она со сложными макетами, такими как сетки и вложенные контейнеры, без дополнительных настроек?Да, она явно поддерживает списки, сетки, несколько контейнеров, вложенные контексты, элементы разного размера, виртуализированные списки и даже двумерные игры.
Есть ли готовый пакет для сортируемых списков?Да, @dnd-kit/dom/sortable — тонкий слой поверх ядра, предназначенный специально для создания интерфейсов с сортировкой.
Можно ли настроить поведение перетаскивания и анимации?Да, можно настраивать анимации, переходы и стили, создавать собственные сенсоры и алгоритмы определения столкновений, а также изменять сочетания клавиш.
Насколько библиотека доступна для пользователей клавиатуры и программ чтения с экрана?Она поддерживает управление с клавиатуры, использует разумные атрибуты ARIA по умолчанию и позволяет настраивать подсказки для программ чтения с экрана и живые регионы.
Где найти полную документацию и примеры?Полная документация, справочник по API, руководства и интерактивные примеры доступны на сайте dndkit.com.
What are similar projects?Sortable, react-beautiful-dnd, pragmatic-drag-and-drop, react-sortable-hoc, moveable, filepond, floating-ui, react-dnd
Which topics is it in?draggable, sortable, drag-and-drop, accessibility, monorepo, vue, ui, framework, react, npm, frontend, nodejs
Creator
clauderic
Size
11.4 MB
Stars
17.7K
Updated
CommitOct 15Release@dnd-kit/[email protected]Oct 15
Age
5y
Commits · 90 Days