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 是一个现代化的工具包,用于构建拖放界面,设计上轻量、高性能、易访问且可扩展。
这是只能用于 React 的单一库,还是也支持其他框架?它采用分层构建:一个与框架无关的核心(@dnd-kit/abstract)、一个 DOM 实现(@dnd-kit/dom),以及针对 React、Vue、Svelte 和 SolidJS 的轻量适配层。
我该如何把它添加到项目中?安装你所用框架对应的包(例如 @dnd-kit/react),然后按照文档网站上针对该框架的入门指南操作。
要支持触屏或键盘操作,我还需要额外安装输入相关的库吗?不需要,它开箱即带有针对指针、鼠标、触屏和键盘输入的内置传感器。
它能开箱即用地处理网格、嵌套容器等复杂布局吗?可以,它明确支持列表、网格、多容器、嵌套上下文、大小不一的元素、虚拟化列表,甚至二维游戏。
有现成的可排序列表包吗?有,@dnd-kit/dom/sortable 是建立在核心之上的轻量层,专门用于构建可排序界面。
我能自定义拖动行为和动画吗?可以,你可以自定义动画、过渡效果和样式,构建自己的传感器和碰撞检测算法,还能自定义快捷键绑定。
这个库对键盘用户和屏幕阅读器用户友好吗?友好,它包含键盘支持、合理的默认 ARIA 属性,并且可以自定义屏幕阅读器的提示说明和实时区域。
在哪里可以找到完整的文档和示例?完整的文档、API 参考、指南和互动示例都可以在 dndkit.com 上找到。
Creator
clauderic
Size
11.4 MB
Stars
17.7K
Age
5y
Commits · 90 Days