The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
Installations
npm install @dnd-kit/sortableReleases
@dnd-kit/sortable@9.0.0
Published on 23 Nov 2024
@dnd-kit/core@6.2.0
Published on 23 Nov 2024
@dnd-kit/modifiers@8.0.0
Published on 23 Nov 2024
@dnd-kit/accessibility@3.1.1
Published on 23 Nov 2024
@dnd-kit/helpers@0.0.5
Published on 11 Jul 2024
@dnd-kit/collision@0.0.5
Published on 11 Jul 2024
Contributors
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4){kind=avatar}
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4){kind=avatar}
Developer
Developer Guide
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
12.22.12
NPM Version
6.14.16
Statistics
13,249 Stars
471 Commits
656 Forks
37 Watching
28 Branches
49 Contributors
Updated on 28 Nov 2024
Bundle Size
9.88 kB
Minified
3.70 kB
Minified + Gzipped
Languages
TypeScript (92.59%)
CSS (6.73%)
JavaScript (0.49%)
HTML (0.19%)
Total Downloads
Cumulative downloads
Total Downloads
114,018,493
Last day
-0.4%
380,435
Compared to previous day
Last week
7.5%
2,009,629
Compared to previous week
Last month
16.4%
8,138,145
Compared to previous month
Last year
125.4%
70,438,525
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
2
Dev Dependencies
1
- Feature packed: customizable collision detection algorithms, multiple activators, draggable overlay, drag handles, auto-scrolling, constraints, and so much more.
- Built for React: exposes hooks such as
useDraggableanduseDroppable. and won't force you to re-architect your app or create additional wrapper DOM nodes. - Supports a wide range of use cases: lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D Games, and more.
- Zero dependencies and modular: the core of the library weighs around 10kb minified and has no external dependencies. It's built around built-in React state management and context, which keeps the library lean.
- Built-in support for multiple input methods: Pointer, mouse, touch and keyboard sensors.
- Fully customizable & extensible: Customize every detail: animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and so much more.
- Accessibility: Keyboard support, sensible default aria attributes, customizable screen reader instructions and live regions built-in.
- Performance: It was built with performance in mind in order to support silky smooth animations.
- Presets: Need to build a sortable interface? Check out
@dnd-kit/sortable, which is a thin layer built on top of@dnd-kit/core. More presets coming in the future.
Documentation
To learn how to get started with dnd kit, visit the official documentation website. You'll find in-depth API documentation, tips and guides to help you build drag and drop interfaces.
Key concepts
The core library of dnd kit exposes two main concepts:
Augment your existing components using the useDraggable and useDroppable hooks, or combine both to create components that can both be dragged and dropped over.
Handle events and customize the behaviour of your draggable elements and droppable areas using the <DndContext> provider. Configure sensors to handle different input methods.
Use the <DragOverlay> component to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport.
Check out our quick start guide to learn how get started.
Extensibility
Extensibility is at the core of dnd kit. It is built to be lean and extensible. It ships with the features we believe most people will want most of the time, and provides extension points to build the rest on top of @dnd-kit/core.
A prime example of the level of extensibility of dnd kit is the Sortable preset, which is built using the extension points that are exposed by @dnd-kit/core.
The primary extension points of dnd kit are:
- Sensors
- Modifiers
- Constraints
- Custom collision detection algorithms
Accessibility
Building accessible drag and drop interfaces is hard; dnd kit has a number of sensible defaults and starting points to help you make your drag and drop interface accessible:
- Customizable screen reader instructions for how to interact with draggable items
- Customizable live region updates to provide screen reader announcements in real-time of what is currently happening with draggable and droppable elements.
- Sensible defaults for
ariaattributes that should be passed to draggable items
Check out our Accessibility guide to learn more about how you can help provide a better experience for screen readers.
Architecture
Unlike most drag and drop libraries, dnd kit intentionally is not built on top of the HTML5 Drag and drop API. This was a deliberate architectural decision, that does come with tradeoffs that you should be aware of before deciding to use it, but for most applications, we believe the benefits outweigh the tradeoffs.
The HTML5 Drag and drop API has some severe limitations. It does not support touch devices or using the keyboard to drag items, which means that the libraries that are built on top of it need to expose an entirely different implementation to support those input methods. It also doesn't support common use-cases such as locking dragging to a specific axis or to the bounds of a container, custom collision detection strategies, or even customizing the preview of the dragged item.
While there are workarounds to some of these issues, those workarounds typically increase the complexity of the codebase and the overall bundle size of the library, and lead to inconsistencies between the mouse, touch and keyboard layers because they're powered by entirely different implementations.
The main tradeoff with not using the HTML5 Drag and drop API is that you won't be able to drag from the desktop or between windows. If the drag and drop use-case you have in mind involves this kind of functionality, you'll definitely want to use a library that's built on top of the HTML 5 Drag and drop API. We highly recommend you check out react-dnd for a React library that's has a native HTML 5 Drag and drop backend.
Performance
Minimizing DOM mutations
dnd kit lets you build drag and drop interfaces without having to mutate the DOM every time an item needs to shift position.
This is possible because dnd kit lazily calculates and stores the initial positions and layout of your droppable containers when a drag operation is initiated. These positions are passed down to your components that use useDraggable and useDroppable so that you can compute the new positions of your items while a drag operation is underway, and move them to their new positions using performant CSS properties that do not trigger a repaint such as translate3d and scale. For an example of how this can be achieved, check out the implementation of the sorting strategies that are exposed by the @dnd-kit/sortable library.
This isn't to say that you can't shift the position of the items in the DOM while dragging, this is something that is supported and sometimes inevitable. In some cases, it won't be possible to know in advance what the new position and layout of the item until you move it in the DOM. Just know that these kind of mutations to the DOM while dragging are much more expensive and will cause a repaint, so if possible, prefer computing the new positions using translate3d and scale.
Synthetic events
dnd kit also uses SyntheticEvent listeners for the activator events of all sensors, which leads to improved performance over manually adding event listeners to each individual draggable node.
Working in the @dnd-kit repository
Packages contained within this repository
@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities
Installing dependencies
You'll need to install all the dependencies in the root directory. Since the @dnd-kit is a monorepo that uses Lerna and Yarn Workspaces, npm CLI is not supported (only yarn).
1yarn install
This will install all dependencies in each project, build them, and symlink them via Lerna
Development workflow
In one terminal, run yarn start in parallel:
1yarn start
This builds each package to <packages>/<package>/dist and runs the project in watch mode so any edits you save inside <packages>/<package>/src cause a rebuild to <packages>/<package>/dist. The results will stream to to the terminal.
Running storybook
1yarn start:storybook
Runs the storybook Open http://localhost:6006 to view it in the browser.
Working with the playground
You can play with local packages in the Parcel-powered playground.
1yarn start:playground
This will start the playground on localhost:1234. If you have lerna running watch in parallel mode in one terminal, and then you run parcel, your playground will hot reload when you make changes to any imported module whose source is inside of packages/*/src/*. Note that to accomplish this, each package's start command passes TDSX the --noClean flag. This prevents Parcel from exploding between rebuilds because of File Not Found errors.
Important Safety Tip: When adding/altering packages in the playground, use alias object in package.json. This will tell Parcel to resolve them to the filesystem instead of trying to install the package from NPM. It also fixes duplicate React errors you may run into.
Running Cypress
(In a third terminal) you can run Cypress and it will run the integration tests against storybook.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
21 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 7/14 approved changesets -- score normalized to 5
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/chromatic.yml:1
- Warn: no topLevel permission defined: .github/workflows/integration.yml:1
- Warn: no topLevel permission defined: .github/workflows/lint.yml:1
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-experimental.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/size.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/chromatic.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/chromatic.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/chromatic.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/integration.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/integration.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/integration.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/integration.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/integration.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/integration.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/lint.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/lint.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/lint.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/main.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-experimental.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/release-experimental.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-experimental.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/release-experimental.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/size.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/size.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/clauderic/dnd-kit/size.yml/master?enable=pin
- Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 8 third-party GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 27 are checked with a SAST tool
Reason
80 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-7r3h-m5j6-3q42
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-79jw-6wg7-r9g4 / GHSA-r5cq-9537-9rpf
- Warn: Project is vulnerable to: GHSA-84p7-fh9c-6g8h
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
3.9
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to @dnd-kit/sortable
dnd-kit-sortable-tree
[](https://www.npmjs.org/package/dnd-kit-sortable-tree) [](https://www.npmjs.org/package/dnd-kit-sortable-tree) [](https://www.npmjs.org/package/dnd-kit-sortable-tree) [](https://www.npmjs.org/package/dnd-kit-sortable-tree) [](https://www.npmjs.org/package/dnd-kit-sortable-tree) [](https://www.npmjs.org/package/dnd-kit-sortable-tree) [![MIT](https: