Showing preview only (1,628K chars total). Download the full file or copy to clipboard to get everything.
Repository: clauderic/dnd-kit
Branch: main
Commit: ff96f11e8406
Files: 735
Total size: 1.4 MB
Directory structure:
gitextract_pui9u02i/
├── .browserslistrc
├── .changeset/
│ ├── README.md
│ ├── animation-last-wins.md
│ ├── autoscroller-options.md
│ ├── config.json
│ ├── drop-animation-source-context.md
│ ├── entity-batched-id-changes.md
│ ├── feedback-keyboard-transition.md
│ ├── feedback-placeholder-sibling-reorder.md
│ ├── feedback-transform-support.md
│ ├── fix-event-type-aliases.md
│ ├── fix-plugin-registry-dedup-ordering.md
│ ├── fix-pointer-sensor-stale-activation.md
│ ├── per-entity-plugin-config.md
│ ├── refactor-style-injector.md
│ ├── scroll-into-view-rewrite.md
│ ├── thick-cloths-poke.md
│ ├── use-deep-signal-flush-sync.md
│ └── whole-cloths-warn.md
├── .eslintrc.js
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ ├── chromatic.yml
│ ├── continous-release.yml
│ ├── playwright.yml
│ ├── release.yml
│ └── tests.yml
├── .gitignore
├── .nvmrc
├── .prettierrc
├── .vscode/
│ └── settings.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── apps/
│ ├── docs/
│ │ ├── README.md
│ │ ├── concepts/
│ │ │ ├── drag-drop-manager.mdx
│ │ │ ├── draggable.mdx
│ │ │ ├── droppable.mdx
│ │ │ └── sortable.mdx
│ │ ├── docs.json
│ │ ├── extend/
│ │ │ ├── modifiers.mdx
│ │ │ ├── plugins/
│ │ │ │ ├── accessibility.mdx
│ │ │ │ ├── auto-scroller.mdx
│ │ │ │ ├── cursor.mdx
│ │ │ │ ├── debug.mdx
│ │ │ │ ├── feedback.mdx
│ │ │ │ └── style-injector.mdx
│ │ │ ├── plugins.mdx
│ │ │ ├── sensors/
│ │ │ │ ├── keyboard-sensor.mdx
│ │ │ │ └── pointer-sensor.mdx
│ │ │ └── sensors.mdx
│ │ ├── legacy/
│ │ │ ├── api-documentation/
│ │ │ │ ├── context-provider/
│ │ │ │ │ ├── collision-detection-algorithms.mdx
│ │ │ │ │ ├── dnd-context.mdx
│ │ │ │ │ ├── use-dnd-context.mdx
│ │ │ │ │ └── use-dnd-monitor.mdx
│ │ │ │ ├── draggable/
│ │ │ │ │ ├── drag-overlay.mdx
│ │ │ │ │ └── use-draggable.mdx
│ │ │ │ ├── draggable.mdx
│ │ │ │ ├── droppable/
│ │ │ │ │ └── use-droppable.mdx
│ │ │ │ ├── droppable.mdx
│ │ │ │ ├── modifiers.mdx
│ │ │ │ ├── sensors/
│ │ │ │ │ ├── keyboard.mdx
│ │ │ │ │ ├── mouse.mdx
│ │ │ │ │ ├── pointer.mdx
│ │ │ │ │ └── touch.mdx
│ │ │ │ └── sensors.mdx
│ │ │ ├── guides/
│ │ │ │ └── accessibility.mdx
│ │ │ ├── introduction/
│ │ │ │ ├── getting-started.mdx
│ │ │ │ └── installation.mdx
│ │ │ └── presets/
│ │ │ └── sortable/
│ │ │ ├── overview.mdx
│ │ │ ├── sortable-context.mdx
│ │ │ └── use-sortable.mdx
│ │ ├── overview.mdx
│ │ ├── quickstart.mdx
│ │ ├── react/
│ │ │ ├── components/
│ │ │ │ ├── drag-drop-provider.mdx
│ │ │ │ └── drag-overlay.mdx
│ │ │ ├── guides/
│ │ │ │ ├── migration.mdx
│ │ │ │ ├── multiple-sortable-lists.mdx
│ │ │ │ └── sortable-state-management.mdx
│ │ │ ├── hooks/
│ │ │ │ ├── use-drag-drop-monitor.mdx
│ │ │ │ ├── use-draggable.mdx
│ │ │ │ ├── use-droppable.mdx
│ │ │ │ └── use-sortable.mdx
│ │ │ └── quickstart.mdx
│ │ ├── sandpack.js
│ │ ├── snippets/
│ │ │ ├── code.mdx
│ │ │ ├── quickstart/
│ │ │ │ └── intro.mdx
│ │ │ ├── sandbox.mdx
│ │ │ └── story.mdx
│ │ ├── solid/
│ │ │ ├── components/
│ │ │ │ ├── drag-drop-provider.mdx
│ │ │ │ └── drag-overlay.mdx
│ │ │ ├── hooks/
│ │ │ │ ├── use-draggable.mdx
│ │ │ │ ├── use-droppable.mdx
│ │ │ │ └── use-sortable.mdx
│ │ │ └── quickstart.mdx
│ │ ├── style.css
│ │ ├── svelte/
│ │ │ ├── components/
│ │ │ │ ├── drag-drop-provider.mdx
│ │ │ │ └── drag-overlay.mdx
│ │ │ ├── primitives/
│ │ │ │ ├── create-draggable.mdx
│ │ │ │ ├── create-droppable.mdx
│ │ │ │ └── create-sortable.mdx
│ │ │ └── quickstart.mdx
│ │ └── vue/
│ │ ├── components/
│ │ │ ├── drag-drop-provider.mdx
│ │ │ └── drag-overlay.mdx
│ │ ├── composables/
│ │ │ ├── use-draggable.mdx
│ │ │ ├── use-droppable.mdx
│ │ │ └── use-sortable.mdx
│ │ └── quickstart.mdx
│ ├── stories/
│ │ ├── .eslintrc.js
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── manager-head.html
│ │ │ ├── manager.ts
│ │ │ ├── preview-head.html
│ │ │ ├── preview.tsx
│ │ │ └── theme.ts
│ │ ├── package.json
│ │ ├── playwright.config.ts
│ │ ├── raw.d.ts
│ │ ├── stories/
│ │ │ ├── components/
│ │ │ │ ├── docs/
│ │ │ │ │ ├── Code/
│ │ │ │ │ │ ├── Code.module.css
│ │ │ │ │ │ ├── Code.tsx
│ │ │ │ │ │ ├── components/
│ │ │ │ │ │ │ ├── CodeHighlighter/
│ │ │ │ │ │ │ │ ├── CodeHighlighter.module.css
│ │ │ │ │ │ │ │ ├── CodeHighlighter.tsx
│ │ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── Info/
│ │ │ │ │ │ ├── Info.module.css
│ │ │ │ │ │ ├── Info.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── Preview/
│ │ │ │ │ │ ├── Preview.module.css
│ │ │ │ │ │ ├── Preview.tsx
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ └── index.ts
│ │ │ └── react/
│ │ │ ├── Draggable/
│ │ │ │ ├── DragHandles/
│ │ │ │ │ ├── DragHandles.stories.tsx
│ │ │ │ │ └── docs/
│ │ │ │ │ └── DragHandles.mdx
│ │ │ │ ├── DragOverlay/
│ │ │ │ │ └── DragOverlay.stories.tsx
│ │ │ │ ├── Draggable.stories.tsx
│ │ │ │ ├── DraggableApp.tsx
│ │ │ │ ├── DraggableExample.tsx
│ │ │ │ ├── Modifiers/
│ │ │ │ │ ├── Modifiers.stories.tsx
│ │ │ │ │ ├── SnapToGridExample.tsx
│ │ │ │ │ ├── docs/
│ │ │ │ │ │ └── ModifierDocs.mdx
│ │ │ │ │ └── styles.module.css
│ │ │ │ ├── Sensors/
│ │ │ │ │ ├── Sensors.stories.tsx
│ │ │ │ │ └── docs/
│ │ │ │ │ └── SensorDocs.mdx
│ │ │ │ └── docs/
│ │ │ │ ├── DraggableDocs.mdx
│ │ │ │ └── examples/
│ │ │ │ ├── Draggable.jsx
│ │ │ │ ├── MultipleDraggable.jsx
│ │ │ │ └── QuickStart.jsx
│ │ │ ├── Droppable/
│ │ │ │ ├── Droppable.stories.tsx
│ │ │ │ ├── DroppableApp.tsx
│ │ │ │ ├── DroppableExample.tsx
│ │ │ │ ├── MultipleDroppable/
│ │ │ │ │ ├── MultipleDroppable.stories.tsx
│ │ │ │ │ └── MultipleDroppableApp.tsx
│ │ │ │ └── docs/
│ │ │ │ ├── DroppableDocs.mdx
│ │ │ │ └── examples/
│ │ │ │ ├── Draggable.jsx
│ │ │ │ ├── Droppable.jsx
│ │ │ │ ├── MultipleDroppable.jsx
│ │ │ │ └── QuickStart.jsx
│ │ │ ├── Resizeable/
│ │ │ │ ├── Resizeable.css
│ │ │ │ ├── Resizeable.tsx
│ │ │ │ └── index.ts
│ │ │ ├── Sortable/
│ │ │ │ ├── CSSLayers/
│ │ │ │ │ ├── CSSLayers.stories.tsx
│ │ │ │ │ └── CSSLayersExample.tsx
│ │ │ │ ├── Grid/
│ │ │ │ │ ├── Grid.stories.tsx
│ │ │ │ │ └── GridSortableApp.tsx
│ │ │ │ ├── Horizontal/
│ │ │ │ │ ├── Horizontal.stories.tsx
│ │ │ │ │ └── HorizontalSortableApp.tsx
│ │ │ │ ├── Iframe/
│ │ │ │ │ ├── Iframe.stories.tsx
│ │ │ │ │ └── IframeExample.tsx
│ │ │ │ ├── MultipleLists/
│ │ │ │ │ ├── MultipleLists.stories.tsx
│ │ │ │ │ ├── MultipleLists.tsx
│ │ │ │ │ ├── MultipleListsApp.tsx
│ │ │ │ │ └── docs/
│ │ │ │ │ ├── MultipleLists.mdx
│ │ │ │ │ └── examples/
│ │ │ │ │ ├── Column.jsx
│ │ │ │ │ ├── Item.jsx
│ │ │ │ │ └── QuickStart.jsx
│ │ │ │ ├── Quickstart.tsx
│ │ │ │ ├── Sortable.stories.tsx
│ │ │ │ ├── SortableApp.tsx
│ │ │ │ ├── SortableExample.tsx
│ │ │ │ ├── Table/
│ │ │ │ │ ├── Table.stories.tsx
│ │ │ │ │ └── TableExample.tsx
│ │ │ │ ├── Transformed/
│ │ │ │ │ ├── Transformed.stories.tsx
│ │ │ │ │ └── TransformedExample.tsx
│ │ │ │ ├── Tree/
│ │ │ │ │ ├── Tree.module.css
│ │ │ │ │ ├── Tree.stories.tsx
│ │ │ │ │ ├── Tree.tsx
│ │ │ │ │ ├── TreeItem.tsx
│ │ │ │ │ ├── TreeItemOverlay.tsx
│ │ │ │ │ ├── types.ts
│ │ │ │ │ └── utilities.ts
│ │ │ │ ├── Vertical/
│ │ │ │ │ ├── AutoScrollExample.tsx
│ │ │ │ │ └── Vertical.stories.tsx
│ │ │ │ ├── Virtualized/
│ │ │ │ │ ├── ReactTinyVirtualListExample.tsx
│ │ │ │ │ ├── ReactVirtualExample.tsx
│ │ │ │ │ ├── ReactWindowExample.tsx
│ │ │ │ │ └── Virtualized.stories.tsx
│ │ │ │ └── docs/
│ │ │ │ ├── SortableDocs.mdx
│ │ │ │ └── examples/
│ │ │ │ ├── ControlledExample.jsx
│ │ │ │ ├── Example.jsx
│ │ │ │ └── UncontrolledExample.jsx
│ │ │ ├── components/
│ │ │ │ ├── Actions/
│ │ │ │ │ ├── Action.tsx
│ │ │ │ │ ├── Actions.module.css
│ │ │ │ │ ├── Actions.tsx
│ │ │ │ │ ├── Remove.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ ├── Button/
│ │ │ │ │ └── Button.tsx
│ │ │ │ ├── Container/
│ │ │ │ │ └── Container.tsx
│ │ │ │ ├── Dropzone/
│ │ │ │ │ └── Dropzone.tsx
│ │ │ │ ├── Grid/
│ │ │ │ │ ├── Grid.module.css
│ │ │ │ │ └── Grid.tsx
│ │ │ │ ├── Handle/
│ │ │ │ │ └── Handle.tsx
│ │ │ │ ├── Item/
│ │ │ │ │ └── Item.tsx
│ │ │ │ └── index.ts
│ │ │ └── icons/
│ │ │ ├── SortableIcon.tsx
│ │ │ └── index.ts
│ │ ├── tests/
│ │ │ ├── drag-offset.spec.ts
│ │ │ ├── draggable.spec.ts
│ │ │ ├── droppable.spec.ts
│ │ │ ├── sortable-autoscroll-options.spec.ts
│ │ │ ├── sortable-css-layers.spec.ts
│ │ │ ├── sortable-grid.spec.ts
│ │ │ ├── sortable-horizontal.spec.ts
│ │ │ ├── sortable-iframe.spec.ts
│ │ │ ├── sortable-multiple.spec.ts
│ │ │ ├── sortable-scroll.spec.ts
│ │ │ ├── sortable-table.spec.ts
│ │ │ ├── sortable-transformed.spec.ts
│ │ │ └── sortable-vertical.spec.ts
│ │ └── tsconfig.json
│ ├── stories-shared/
│ │ ├── components/
│ │ │ ├── Container/
│ │ │ │ ├── Container.css
│ │ │ │ ├── Container.ts
│ │ │ │ └── index.ts
│ │ │ ├── Item/
│ │ │ │ ├── Item.css
│ │ │ │ ├── Item.ts
│ │ │ │ └── index.ts
│ │ │ └── index.ts
│ │ ├── package.json
│ │ ├── preview-head.html
│ │ ├── register.ts
│ │ ├── styles/
│ │ │ ├── index.ts
│ │ │ └── sandbox.ts
│ │ ├── tests/
│ │ │ ├── drag-offset.tests.ts
│ │ │ ├── draggable.tests.ts
│ │ │ ├── droppable.tests.ts
│ │ │ ├── fixtures.ts
│ │ │ ├── sortable-transformed.tests.ts
│ │ │ └── sortable-vertical.tests.ts
│ │ └── utilities/
│ │ ├── classnames.ts
│ │ ├── createRange.ts
│ │ └── index.ts
│ ├── stories-solid/
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── manager-head.html
│ │ │ ├── manager.ts
│ │ │ ├── preview.ts
│ │ │ └── theme.ts
│ │ ├── custom-elements.d.ts
│ │ ├── package.json
│ │ ├── playwright.config.ts
│ │ ├── raw.d.ts
│ │ ├── stories/
│ │ │ ├── Draggable/
│ │ │ │ ├── DragHandles/
│ │ │ │ │ ├── DragHandles.stories.tsx
│ │ │ │ │ └── DragHandlesApp.tsx
│ │ │ │ ├── Draggable.stories.tsx
│ │ │ │ └── DraggableApp.tsx
│ │ │ ├── Droppable/
│ │ │ │ ├── Droppable.stories.tsx
│ │ │ │ ├── DroppableApp.tsx
│ │ │ │ └── MultipleDroppable/
│ │ │ │ ├── MultipleDroppable.stories.tsx
│ │ │ │ └── MultipleDroppableApp.tsx
│ │ │ └── Sortable/
│ │ │ ├── Grid/
│ │ │ │ ├── Grid.stories.tsx
│ │ │ │ └── GridSortableApp.tsx
│ │ │ ├── Horizontal/
│ │ │ │ ├── Horizontal.stories.tsx
│ │ │ │ └── HorizontalSortableApp.tsx
│ │ │ ├── MultipleLists/
│ │ │ │ ├── MultipleLists.stories.tsx
│ │ │ │ └── MultipleListsApp.tsx
│ │ │ ├── SortableApp.tsx
│ │ │ ├── SortableDragHandleApp.tsx
│ │ │ └── Vertical/
│ │ │ └── Vertical.stories.tsx
│ │ ├── tests/
│ │ │ ├── draggable.spec.ts
│ │ │ ├── droppable.spec.ts
│ │ │ └── sortable-vertical.spec.ts
│ │ └── tsconfig.json
│ ├── stories-svelte/
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── manager.ts
│ │ │ ├── preview.ts
│ │ │ └── theme.ts
│ │ ├── package.json
│ │ ├── playwright.config.ts
│ │ ├── raw.d.ts
│ │ ├── stories/
│ │ │ ├── Draggable/
│ │ │ │ ├── DragHandles/
│ │ │ │ │ ├── DragHandles.stories.ts
│ │ │ │ │ ├── DragHandlesApp.svelte
│ │ │ │ │ └── DraggableWithHandle.svelte
│ │ │ │ ├── DragOverlay/
│ │ │ │ │ ├── DragOverlay.stories.ts
│ │ │ │ │ ├── DragOverlayApp.svelte
│ │ │ │ │ └── DraggableItem.svelte
│ │ │ │ ├── Draggable.stories.ts
│ │ │ │ ├── Draggable.svelte
│ │ │ │ └── DraggableApp.svelte
│ │ │ ├── Droppable/
│ │ │ │ ├── DraggableItem.svelte
│ │ │ │ ├── Droppable.stories.ts
│ │ │ │ ├── DroppableApp.svelte
│ │ │ │ ├── DroppableZone.svelte
│ │ │ │ └── MultipleDroppable/
│ │ │ │ ├── MultipleDroppable.stories.ts
│ │ │ │ └── MultipleDroppableApp.svelte
│ │ │ └── Sortable/
│ │ │ ├── Grid/
│ │ │ │ ├── Grid.stories.ts
│ │ │ │ ├── GridSortableApp.svelte
│ │ │ │ └── GridSortableItem.svelte
│ │ │ ├── Horizontal/
│ │ │ │ ├── Horizontal.stories.ts
│ │ │ │ ├── HorizontalSortableApp.svelte
│ │ │ │ └── HorizontalSortableItem.svelte
│ │ │ ├── MultipleLists/
│ │ │ │ ├── MultipleLists.stories.ts
│ │ │ │ ├── MultipleListsApp.svelte
│ │ │ │ ├── SortableColumn.svelte
│ │ │ │ └── SortableItem.svelte
│ │ │ ├── SortableApp.svelte
│ │ │ ├── SortableDragHandleApp.svelte
│ │ │ ├── SortableItem.svelte
│ │ │ ├── SortableItemWithHandle.svelte
│ │ │ └── Vertical/
│ │ │ └── Vertical.stories.ts
│ │ ├── tests/
│ │ │ ├── draggable.spec.ts
│ │ │ ├── droppable.spec.ts
│ │ │ └── sortable-vertical.spec.ts
│ │ └── vite.config.ts
│ ├── stories-vanilla/
│ │ ├── .storybook/
│ │ │ ├── main.ts
│ │ │ ├── manager-head.html
│ │ │ ├── manager.ts
│ │ │ ├── preview.ts
│ │ │ └── theme.ts
│ │ ├── package.json
│ │ ├── raw.d.ts
│ │ └── stories/
│ │ ├── Draggable/
│ │ │ ├── DragHandle/
│ │ │ │ ├── DragHandle.stories.ts
│ │ │ │ └── DragHandleApp.ts
│ │ │ ├── Draggable.stories.ts
│ │ │ └── DraggableApp.ts
│ │ ├── Droppable/
│ │ │ ├── Droppable.stories.ts
│ │ │ ├── DroppableApp.ts
│ │ │ └── MultipleDroppable/
│ │ │ ├── MultipleDroppable.stories.ts
│ │ │ └── MultipleDroppableApp.ts
│ │ └── Sortable/
│ │ ├── Grid/
│ │ │ ├── Grid.stories.ts
│ │ │ └── GridSortableApp.ts
│ │ ├── Horizontal/
│ │ │ ├── Horizontal.stories.ts
│ │ │ └── HorizontalSortableApp.ts
│ │ ├── Sortable.stories.ts
│ │ └── SortableApp.ts
│ └── stories-vue/
│ ├── .storybook/
│ │ ├── main.ts
│ │ ├── manager-head.html
│ │ ├── manager.ts
│ │ ├── preview.ts
│ │ └── theme.ts
│ ├── package.json
│ ├── playwright.config.ts
│ ├── raw.d.ts
│ ├── stories/
│ │ ├── Draggable/
│ │ │ ├── DragHandles/
│ │ │ │ ├── DragHandles.stories.ts
│ │ │ │ └── DragHandlesApp.vue
│ │ │ ├── DragOverlay/
│ │ │ │ ├── DragOverlay.stories.ts
│ │ │ │ └── DragOverlayApp.vue
│ │ │ ├── Draggable.stories.ts
│ │ │ └── DraggableApp.vue
│ │ ├── Droppable/
│ │ │ ├── Droppable.stories.ts
│ │ │ ├── DroppableApp.vue
│ │ │ └── MultipleDroppable/
│ │ │ ├── MultipleDroppable.stories.ts
│ │ │ └── MultipleDroppableApp.vue
│ │ └── Sortable/
│ │ ├── Grid/
│ │ │ ├── Grid.stories.ts
│ │ │ └── GridSortableApp.vue
│ │ ├── Horizontal/
│ │ │ ├── Horizontal.stories.ts
│ │ │ └── HorizontalSortableApp.vue
│ │ ├── MultipleLists/
│ │ │ ├── MultipleLists.stories.ts
│ │ │ ├── MultipleListsApp.vue
│ │ │ ├── SortableColumn.vue
│ │ │ └── SortableItem.vue
│ │ ├── SortableApp.vue
│ │ ├── SortableDragHandleApp.vue
│ │ └── Vertical/
│ │ └── Vertical.stories.ts
│ └── tests/
│ ├── draggable.spec.ts
│ ├── droppable.spec.ts
│ └── sortable-vertical.spec.ts
├── bun.lockb
├── config/
│ └── typescript/
│ ├── base.json
│ ├── react.json
│ ├── solid.json
│ ├── svelte.json
│ ├── vanilla.json
│ └── vue.json
├── package.json
├── packages/
│ ├── abstract/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── collision/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── notifier.ts
│ │ │ │ │ ├── observer.ts
│ │ │ │ │ ├── types.ts
│ │ │ │ │ └── utilities.ts
│ │ │ │ ├── entities/
│ │ │ │ │ ├── draggable/
│ │ │ │ │ │ ├── draggable.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── droppable/
│ │ │ │ │ │ ├── droppable.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── entity/
│ │ │ │ │ │ ├── entity.ts
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── registry.ts
│ │ │ │ │ │ └── types.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── manager/
│ │ │ │ │ ├── actions.ts
│ │ │ │ │ ├── events.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── manager.ts
│ │ │ │ │ ├── operation.ts
│ │ │ │ │ ├── registry.ts
│ │ │ │ │ ├── renderer.ts
│ │ │ │ │ ├── status.ts
│ │ │ │ │ └── types.ts
│ │ │ │ ├── modifiers/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── modifier.ts
│ │ │ │ ├── plugins/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── plugin.ts
│ │ │ │ │ ├── registry.ts
│ │ │ │ │ ├── types.ts
│ │ │ │ │ └── utilities.ts
│ │ │ │ └── sensors/
│ │ │ │ ├── activation.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── sensor.ts
│ │ │ └── modifiers/
│ │ │ ├── axis.ts
│ │ │ ├── boundingRectangle.ts
│ │ │ ├── index.ts
│ │ │ └── snap.ts
│ │ ├── tests/
│ │ │ ├── manager-modifiers.test.ts
│ │ │ └── plugin-registry.test.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── collision/
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── algorithms/
│ │ │ │ ├── closestCenter.ts
│ │ │ │ ├── closestCorners.ts
│ │ │ │ ├── default.ts
│ │ │ │ ├── directionBiased.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── pointerDistance.ts
│ │ │ │ ├── pointerIntersection.ts
│ │ │ │ └── shapeIntersection.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── dom/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── entities/
│ │ │ │ │ ├── draggable/
│ │ │ │ │ │ ├── draggable.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── droppable/
│ │ │ │ │ │ ├── droppable.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── manager/
│ │ │ │ │ ├── events.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── manager.ts
│ │ │ │ ├── plugins/
│ │ │ │ │ ├── accessibility/
│ │ │ │ │ │ ├── Accessibility.ts
│ │ │ │ │ │ ├── HiddenText.ts
│ │ │ │ │ │ ├── LiveRegion.ts
│ │ │ │ │ │ ├── defaults.ts
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── types.ts
│ │ │ │ │ │ └── utilities.ts
│ │ │ │ │ ├── cursor/
│ │ │ │ │ │ ├── Cursor.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── feedback/
│ │ │ │ │ │ ├── Feedback.ts
│ │ │ │ │ │ ├── constants.ts
│ │ │ │ │ │ ├── dropAnimation.ts
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ ├── observers.ts
│ │ │ │ │ │ ├── types.ts
│ │ │ │ │ │ └── utilities.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── scrolling/
│ │ │ │ │ │ ├── AutoScroller.ts
│ │ │ │ │ │ ├── ScrollIntent.ts
│ │ │ │ │ │ ├── ScrollListener.ts
│ │ │ │ │ │ ├── ScrollLock.ts
│ │ │ │ │ │ ├── Scroller.ts
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── selection/
│ │ │ │ │ │ └── PreventSelection.ts
│ │ │ │ │ └── stylesheet/
│ │ │ │ │ └── StyleInjector.ts
│ │ │ │ └── sensors/
│ │ │ │ ├── drag/
│ │ │ │ │ ├── DragSensor.ts
│ │ │ │ │ ├── encoding.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── keyboard/
│ │ │ │ │ ├── KeyboardSensor.ts
│ │ │ │ │ └── index.ts
│ │ │ │ ├── pointer/
│ │ │ │ │ ├── DelayConstraint.ts
│ │ │ │ │ ├── DistanceConstraint.ts
│ │ │ │ │ ├── PointerActivationConstraints.ts
│ │ │ │ │ └── PointerSensor.ts
│ │ │ │ └── types.ts
│ │ │ ├── modifiers/
│ │ │ │ ├── RestrictToElement.ts
│ │ │ │ ├── RestrictToWindow.ts
│ │ │ │ └── index.ts
│ │ │ ├── plugins/
│ │ │ │ └── debug/
│ │ │ │ ├── debug.ts
│ │ │ │ └── index.ts
│ │ │ ├── sortable/
│ │ │ │ ├── index.ts
│ │ │ │ ├── plugins/
│ │ │ │ │ ├── OptimisticSortingPlugin.ts
│ │ │ │ │ └── SortableKeyboardPlugin.ts
│ │ │ │ ├── sortable.ts
│ │ │ │ └── utilities.ts
│ │ │ └── utilities/
│ │ │ ├── animations/
│ │ │ │ ├── forceFinishAnimations.ts
│ │ │ │ └── getFinalKeyframe.ts
│ │ │ ├── bounding-rectangle/
│ │ │ │ ├── getBoundingRectangle.ts
│ │ │ │ ├── getViewportBoundingRectangle.ts
│ │ │ │ ├── getVisibleBoundingRectangle.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── isOverflowVisible.ts
│ │ │ │ ├── isRectEqual.ts
│ │ │ │ └── isVisible.ts
│ │ │ ├── coordinates/
│ │ │ │ └── getEventCoordinates.ts
│ │ │ ├── element/
│ │ │ │ ├── cloneElement.ts
│ │ │ │ ├── getElementFromPoint.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── isInteractiveElement.ts
│ │ │ │ └── proxiedElements.ts
│ │ │ ├── event-listeners/
│ │ │ │ ├── Listeners.ts
│ │ │ │ └── index.ts
│ │ │ ├── execution-context/
│ │ │ │ ├── canUseDOM.ts
│ │ │ │ ├── getDocument.ts
│ │ │ │ ├── getDocuments.ts
│ │ │ │ ├── getFixedPositionOffset.ts
│ │ │ │ ├── getRoot.ts
│ │ │ │ ├── getWindow.ts
│ │ │ │ ├── isSafari.ts
│ │ │ │ └── prefersReducedMotion.ts
│ │ │ ├── frame/
│ │ │ │ ├── getFrameElement.ts
│ │ │ │ ├── getFrameElements.ts
│ │ │ │ └── getFrameTransform.ts
│ │ │ ├── index.ts
│ │ │ ├── misc/
│ │ │ │ └── generateUniqueId.ts
│ │ │ ├── observers/
│ │ │ │ ├── FrameObserver.ts
│ │ │ │ ├── PositionObserver.ts
│ │ │ │ ├── ResizeNotifier.ts
│ │ │ │ └── index.ts
│ │ │ ├── popover/
│ │ │ │ ├── hidePopover.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── showPopover.ts
│ │ │ │ └── supportsPopover.ts
│ │ │ ├── scheduling/
│ │ │ │ ├── index.ts
│ │ │ │ ├── scheduler.ts
│ │ │ │ ├── throttle.ts
│ │ │ │ └── timeout.ts
│ │ │ ├── scroll/
│ │ │ │ ├── canScroll.ts
│ │ │ │ ├── detectScrollIntent.ts
│ │ │ │ ├── documentScrollingElement.ts
│ │ │ │ ├── getScrollPosition.ts
│ │ │ │ ├── getScrollableAncestors.ts
│ │ │ │ ├── getScrollableElement.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── isFixed.ts
│ │ │ │ ├── isScrollable.ts
│ │ │ │ └── scrollIntoViewIfNeeded.ts
│ │ │ ├── shapes/
│ │ │ │ ├── DOMRectangle.ts
│ │ │ │ └── index.ts
│ │ │ ├── styles/
│ │ │ │ ├── Styles.ts
│ │ │ │ ├── getComputedStyles.ts
│ │ │ │ └── index.ts
│ │ │ ├── transform/
│ │ │ │ ├── animateTransform.ts
│ │ │ │ ├── applyTransform.ts
│ │ │ │ ├── computeTranslate.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── inverseTransform.ts
│ │ │ │ ├── parseScale.ts
│ │ │ │ ├── parseTransform.ts
│ │ │ │ └── parseTranslate.ts
│ │ │ └── type-guards/
│ │ │ ├── index.ts
│ │ │ ├── isDocument.ts
│ │ │ ├── isElement.ts
│ │ │ ├── isHTMLElement.ts
│ │ │ ├── isHTMLTableRowElement.ts
│ │ │ ├── isKeyboardEvent.ts
│ │ │ ├── isKeyframeEffect.ts
│ │ │ ├── isNode.ts
│ │ │ ├── isPointerEvent.ts
│ │ │ ├── isSVGElement.ts
│ │ │ ├── isShadowRoot.ts
│ │ │ ├── isTextInput.ts
│ │ │ ├── isWindow.ts
│ │ │ ├── supportsStyle.ts
│ │ │ └── supportsViewTransition.ts
│ │ ├── tests/
│ │ │ ├── pointer-sensor.test.ts
│ │ │ └── sortable-utilities.test.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── eslint-config/
│ │ ├── README.md
│ │ └── package.json
│ ├── geometry/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── distance/
│ │ │ │ ├── distance.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types.ts
│ │ │ ├── index.ts
│ │ │ ├── point/
│ │ │ │ ├── Point.ts
│ │ │ │ └── index.ts
│ │ │ ├── position/
│ │ │ │ ├── index.ts
│ │ │ │ └── position.ts
│ │ │ ├── shapes/
│ │ │ │ ├── Rectangle.ts
│ │ │ │ ├── Shape.ts
│ │ │ │ └── index.ts
│ │ │ └── types/
│ │ │ ├── alignment.ts
│ │ │ ├── axis.ts
│ │ │ ├── bounding-rectangle.ts
│ │ │ ├── coordinates.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── helpers/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── move.ts
│ │ ├── tests/
│ │ │ └── move.test.ts
│ │ └── tsconfig.json
│ ├── react/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── context/
│ │ │ │ │ ├── DragDropProvider.tsx
│ │ │ │ │ ├── context.ts
│ │ │ │ │ ├── hooks.ts
│ │ │ │ │ └── renderer.ts
│ │ │ │ ├── draggable/
│ │ │ │ │ ├── DragOverlay.tsx
│ │ │ │ │ └── useDraggable.ts
│ │ │ │ ├── droppable/
│ │ │ │ │ └── useDroppable.ts
│ │ │ │ ├── hooks/
│ │ │ │ │ ├── useDragDropManager.ts
│ │ │ │ │ ├── useDragDropMonitor.ts
│ │ │ │ │ ├── useDragOperation.ts
│ │ │ │ │ └── useInstance.ts
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── index.ts
│ │ │ │ ├── useComputed.ts
│ │ │ │ ├── useConstant.ts
│ │ │ │ ├── useDeepSignal.ts
│ │ │ │ ├── useForceUpdate.ts
│ │ │ │ ├── useImmediateEffect.ts
│ │ │ │ ├── useIsomorphicLayoutEffect.ts
│ │ │ │ ├── useLatest.ts
│ │ │ │ ├── useOnElementChange.ts
│ │ │ │ ├── useOnValueChange.ts
│ │ │ │ └── useSignal.ts
│ │ │ ├── sortable/
│ │ │ │ ├── index.ts
│ │ │ │ └── useSortable.ts
│ │ │ └── utilities/
│ │ │ ├── currentValue.ts
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── solid/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── context/
│ │ │ │ │ ├── DragDropProvider.tsx
│ │ │ │ │ ├── context.ts
│ │ │ │ │ └── renderer.ts
│ │ │ │ ├── draggable/
│ │ │ │ │ ├── DragOverlay.tsx
│ │ │ │ │ └── useDraggable.ts
│ │ │ │ ├── droppable/
│ │ │ │ │ └── useDroppable.ts
│ │ │ │ ├── hooks/
│ │ │ │ │ ├── useDragDropManager.ts
│ │ │ │ │ ├── useDragDropMonitor.ts
│ │ │ │ │ ├── useDragOperation.ts
│ │ │ │ │ └── useInstance.ts
│ │ │ │ └── index.ts
│ │ │ ├── hooks/
│ │ │ │ ├── index.ts
│ │ │ │ └── useDeepSignal.ts
│ │ │ ├── sortable/
│ │ │ │ ├── index.ts
│ │ │ │ └── useSortable.ts
│ │ │ └── utilities/
│ │ │ ├── index.ts
│ │ │ └── saveElementPosition.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── state/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── comparators.ts
│ │ │ ├── computed.ts
│ │ │ ├── decorators.ts
│ │ │ ├── effects.ts
│ │ │ ├── history.ts
│ │ │ ├── index.ts
│ │ │ ├── snapshot.ts
│ │ │ ├── store.ts
│ │ │ └── types.ts
│ │ ├── tests/
│ │ │ └── comparators.test.ts
│ │ └── tsconfig.json
│ ├── storybook-addon-codesandbox/
│ │ ├── package.json
│ │ └── src/
│ │ ├── collect-files.ts
│ │ ├── constants.ts
│ │ ├── define.ts
│ │ ├── index.ts
│ │ ├── manager.tsx
│ │ ├── preset.ts
│ │ ├── preview/
│ │ │ ├── CodeSandboxButton.tsx
│ │ │ ├── codesandbox-button-dom.ts
│ │ │ ├── decorator-dom.ts
│ │ │ └── decorator.tsx
│ │ └── types.ts
│ ├── svelte/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── core/
│ │ │ │ ├── context/
│ │ │ │ │ ├── DragDropProvider.svelte
│ │ │ │ │ ├── context.ts
│ │ │ │ │ └── renderer.svelte.ts
│ │ │ │ ├── draggable/
│ │ │ │ │ ├── DragOverlay.svelte
│ │ │ │ │ └── createDraggable.svelte.ts
│ │ │ │ ├── droppable/
│ │ │ │ │ └── createDroppable.svelte.ts
│ │ │ │ ├── hooks/
│ │ │ │ │ ├── createDragDropMonitor.svelte.ts
│ │ │ │ │ ├── createDragOperation.ts
│ │ │ │ │ ├── createInstance.svelte.ts
│ │ │ │ │ └── getDragDropManager.ts
│ │ │ │ └── index.ts
│ │ │ ├── sortable/
│ │ │ │ ├── createSortable.svelte.ts
│ │ │ │ └── index.ts
│ │ │ └── utilities/
│ │ │ ├── createDeepSignal.svelte.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── vue/
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── composables/
│ │ │ ├── index.ts
│ │ │ └── useDeepSignal.ts
│ │ ├── core/
│ │ │ ├── context/
│ │ │ │ ├── DragDropProvider.ts
│ │ │ │ ├── context.ts
│ │ │ │ └── renderer.ts
│ │ │ ├── draggable/
│ │ │ │ ├── DragOverlay.ts
│ │ │ │ └── useDraggable.ts
│ │ │ ├── droppable/
│ │ │ │ └── useDroppable.ts
│ │ │ ├── hooks/
│ │ │ │ ├── useDragDropManager.ts
│ │ │ │ ├── useDragDropMonitor.ts
│ │ │ │ ├── useDragOperation.ts
│ │ │ │ └── useInstance.ts
│ │ │ └── index.ts
│ │ ├── sortable/
│ │ │ ├── index.ts
│ │ │ └── useSortable.ts
│ │ ├── types.ts
│ │ └── utilities/
│ │ ├── context.ts
│ │ ├── element.ts
│ │ ├── index.ts
│ │ └── ref.ts
│ ├── tsconfig.json
│ └── tsup.config.ts
└── turbo.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .browserslistrc
================================================
defaults
last 2 version
not IE 11
not dead
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
================================================
FILE: .changeset/animation-last-wins.md
================================================
---
'@dnd-kit/dom': patch
---
Animation resolution now uses last-wins semantics matching CSS composite order. `getFinalKeyframe` returns the last matching keyframe across all running animations instead of short-circuiting on the first match. `getProjectedTransform` collects the latest value per CSS property (`transform`, `translate`, `scale`) rather than accumulating transforms additively.
================================================
FILE: .changeset/autoscroller-options.md
================================================
---
'@dnd-kit/dom': minor
---
Add `acceleration` and `threshold` options to the `AutoScroller` plugin.
- `acceleration` controls the base scroll speed multiplier (default: `25`).
- `threshold` controls the percentage of container dimensions that defines the scroll activation zone (default: `0.2`). Accepts a single number for both axes or `{ x, y }` for per-axis control. Setting an axis to `0` disables auto-scrolling on that axis.
```ts
AutoScroller.configure({
acceleration: 15,
threshold: { x: 0, y: 0.3 },
})
```
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@1.5.0/schema.json",
"changelog": ["@changesets/changelog-github", {"repo": "clauderic/dnd-kit"}],
"commit": false,
"fixed": [
[
"@dnd-kit/abstract",
"@dnd-kit/collision",
"@dnd-kit/dom",
"@dnd-kit/geometry",
"@dnd-kit/helpers",
"@dnd-kit/react",
"@dnd-kit/state",
"@dnd-kit/vue",
"@dnd-kit/solid",
"@dnd-kit/svelte"
]
],
"access": "public",
"baseBranch": "experimental",
"updateInternalDependencies": "patch",
"ignore": [],
"snapshot": {
"useCalculatedVersion": true
}
}
================================================
FILE: .changeset/drop-animation-source-context.md
================================================
---
'@dnd-kit/dom': minor
---
The `DropAnimationFunction` context now includes `source`, providing access to the draggable entity for conditional animation logic.
```tsx
Feedback.configure({
dropAnimation: async (context) => {
if (context.source.type === 'service-draggable') return;
// custom animation...
},
});
```
================================================
FILE: .changeset/entity-batched-id-changes.md
================================================
---
'@dnd-kit/abstract': minor
'@dnd-kit/dom': minor
---
Batch entity identity changes to prevent collision oscillation during virtualized sorting.
When entities swap ids (e.g. as `react-window` recycles DOM nodes during a drag), multiple registry updates could fire in an interleaved order, causing the collision detector to momentarily see stale or duplicate entries and oscillate between targets.
Entity `id` changes are now deferred to a microtask and flushed atomically in a single `batch()`, ensuring:
- The collision notifier skips detection while id changes are pending
- The registry cleans up ghost registrations (stale keys left behind after an id swap)
================================================
FILE: .changeset/feedback-keyboard-transition.md
================================================
---
'@dnd-kit/dom': minor
---
Add `keyboardTransition` option to the `Feedback` plugin for customizing or disabling the CSS transition applied when moving elements via keyboard.
By default, keyboard-driven moves animate with `250ms cubic-bezier(0.25, 1, 0.5, 1)`. You can now customize the `duration` and `easing`, or set the option to `null` to disable the transition entirely.
```ts
Feedback.configure({
keyboardTransition: { duration: 150, easing: 'ease-out' },
})
```
================================================
FILE: .changeset/feedback-placeholder-sibling-reorder.md
================================================
---
'@dnd-kit/dom': patch
---
Fix Feedback plugin placeholder not repositioning when siblings are moved around a stationary source element.
When a VDOM framework (e.g., Preact, Vue) reorders sibling elements during a drag operation, the source element and placeholder may remain in the DOM but no longer be adjacent. The existing `documentMutationObserver` only handled cases where the source or placeholder itself was re-added to the DOM. This adds a fallback adjacency check after processing all mutation entries, ensuring the placeholder stays next to the source element regardless of how siblings are rearranged.
================================================
FILE: .changeset/feedback-transform-support.md
================================================
---
'@dnd-kit/dom': minor
---
The Feedback plugin now supports full CSS `transform` property for compatibility with libraries like react-window v2 that position elements via transforms. Transform-related CSS transitions are filtered out to prevent conflicts with Feedback-managed properties. The ResizeObserver computes shapes from CSS values rather than re-measuring the element, avoiding mid-transition measurement errors. Sortable's `animate()` cancels CSS transitions on transform-related properties before measuring to ensure correct FLIP deltas.
================================================
FILE: .changeset/fix-event-type-aliases.md
================================================
---
'@dnd-kit/abstract': minor
'@dnd-kit/dom': minor
'@dnd-kit/helpers': minor
'@dnd-kit/react': minor
'@dnd-kit/solid': minor
'@dnd-kit/vue': minor
'@dnd-kit/svelte': minor
---
Redesign event type system to follow the DOM EventMap pattern. Introduces `DragDropEventMap` for event object types and `DragDropEventHandlers` for event handler signatures, replacing the ambiguously named `DragDropEvents`. Event type aliases (`CollisionEvent`, `DragStartEvent`, etc.) now derive directly from `DragDropEventMap` rather than using `Parameters<>` extraction.
### Migration guide
- **`DragDropEvents`** has been split into two types:
- `DragDropEventMap` — maps event names to event object types (like `WindowEventMap`)
- `DragDropEventHandlers` — maps event names to `(event, manager) => void` handler signatures
- If you were importing `DragDropEvents` to type **event objects**, use `DragDropEventMap` instead:
```ts
// Before
type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0];
// After
type MyEvent = DragDropEventMap<D, P, M>['dragend'];
```
- If you were importing `DragDropEvents` to type **event handlers**, use `DragDropEventHandlers` instead:
```ts
// Before
const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {};
// After
const handler: DragDropEventHandlers<D, P, M>['dragend'] = (event, manager) => {};
```
- The `DragDropEvents` re-export from `@dnd-kit/react` and `@dnd-kit/solid` has been removed. Import `DragDropEventMap` or `DragDropEventHandlers` from `@dnd-kit/abstract` directly if needed.
- Convenience aliases (`CollisionEvent`, `DragStartEvent`, `DragEndEvent`, etc.) are unchanged and continue to work as before.
================================================
FILE: .changeset/fix-plugin-registry-dedup-ordering.md
================================================
---
'@dnd-kit/abstract': patch
---
Fixed plugin registration order when deduplicating configured plugins.
When a plugin was provided via `Plugin.configure()` alongside an internally-registered instance of the same plugin, the dedup logic would reorder it to the end of the registration list. This broke plugins like `Feedback` that resolve `StyleInjector` from the registry during construction, since `StyleInjector` would not yet be registered.
This also prevented users from configuring `StyleInjector` with a CSP `nonce` without breaking drag feedback:
```ts
plugins: (defaults) => [...defaults, StyleInjector.configure({ nonce: 'abc123' })]
```
================================================
FILE: .changeset/fix-pointer-sensor-stale-activation.md
================================================
---
'@dnd-kit/dom': patch
---
Fixed `setPointerCapture` error on touch devices caused by stale pointer activation.
When a touch was released during the activation delay and followed by a quick re-touch, the pending delay timer from the first touch could fire with a stale `pointerId`, causing `setPointerCapture` to throw. The `PointerSensor` now properly aborts the activation controller during cleanup to cancel pending delay timers, and defensively handles `setPointerCapture` failures.
================================================
FILE: .changeset/per-entity-plugin-config.md
================================================
---
'@dnd-kit/abstract': minor
'@dnd-kit/dom': minor
'@dnd-kit/react': minor
'@dnd-kit/solid': minor
'@dnd-kit/vue': minor
'@dnd-kit/svelte': minor
---
Added per-entity plugin configuration and moved `feedback` from the Draggable entity to the Feedback plugin.
Draggable entities now accept a `plugins` property for per-entity plugin configuration, using the existing `Plugin.configure()` pattern. Plugins can read per-entity options via `source.pluginConfig(PluginClass)`.
The `feedback` property (`'default' | 'move' | 'clone' | 'none'`) has been moved from the Draggable entity to `FeedbackOptions`. Drop animation can also now be configured per-draggable.
Plugins listed in an entity's `plugins` array are auto-registered on the manager if not already present. The Sortable class now uses this generic mechanism instead of its own custom registration logic.
### Migration guide
The `feedback` property has been moved from the draggable/sortable hook input to per-entity Feedback plugin configuration.
**Before:**
```tsx
import { FeedbackType } from '@dnd-kit/dom';
useDraggable({ id: 'item', feedback: 'clone' });
useSortable({ id: 'item', index: 0, feedback: 'clone' });
```
**After:**
```tsx
import { Feedback } from '@dnd-kit/dom';
useDraggable({
id: 'item',
plugins: [Feedback.configure({ feedback: 'clone' })],
});
useSortable({
id: 'item',
index: 0,
plugins: [Feedback.configure({ feedback: 'clone' })],
});
```
Drop animation can now be configured per-draggable:
```tsx
useDraggable({
id: 'item',
plugins: [Feedback.configure({ feedback: 'clone', dropAnimation: null })],
});
```
================================================
FILE: .changeset/refactor-style-injector.md
================================================
---
'@dnd-kit/dom': minor
---
Renamed `StyleSheetManager` to `StyleInjector` and centralized CSP `nonce` configuration.
The `StyleInjector` plugin now accepts a `nonce` option that is applied to all injected `<style>` elements. The `nonce` options have been removed from the `Cursor`, `PreventSelection`, and `Feedback` plugin options.
Before:
```ts
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
Cursor.configure({ nonce: 'abc123' }),
PreventSelection.configure({ nonce: 'abc123' }),
],
});
```
After:
```ts
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
StyleInjector.configure({ nonce: 'abc123' }),
],
});
```
The `Cursor` and `PreventSelection` plugins now route their style injection through the `StyleInjector`, so all injected styles respect the centralized `nonce` configuration.
================================================
FILE: .changeset/scroll-into-view-rewrite.md
================================================
---
'@dnd-kit/dom': patch
---
Rewrite `scrollIntoViewIfNeeded` with manual scroll calculations for more predictable behavior in nested scroll containers.
================================================
FILE: .changeset/thick-cloths-poke.md
================================================
---
'@dnd-kit/abstract': patch
---
Infer type of source.data object from type argument
================================================
FILE: .changeset/use-deep-signal-flush-sync.md
================================================
---
'@dnd-kit/react': patch
---
Fix `useDeepSignal` calling `flushSync` from within a React lifecycle method.
When signal updates are triggered synchronously from a React effect (e.g. during a `useEffect` batch), calling `flushSync` directly violates React's internal invariant. The synchronous re-render is now deferred to a microtask via `queueMicrotask`, which runs after the current React batch completes but before the next paint.
================================================
FILE: .changeset/whole-cloths-warn.md
================================================
---
'@dnd-kit/dom': patch
---
recalculate AutoScroller options in the effect to avoid stale data
================================================
FILE: .eslintrc.js
================================================
module.exports = {
extends: [
'react-app',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
};
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [clauderic]
================================================
FILE: .github/workflows/chromatic.yml
================================================
name: 'Chromatic'
on:
pull_request:
push:
branches: [main]
jobs:
chromatic-vanilla:
name: Chromatic (Vanilla)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Check for Chromatic token
id: check
run: |
if [ -n "$TOKEN" ]; then
echo "has-token=true" >> "$GITHUB_OUTPUT"
else
echo "has-token=false" >> "$GITHUB_OUTPUT"
fi
env:
TOKEN: ${{ secrets.CHROMATIC_VANILLA_TOKEN }}
- name: Publish to Chromatic
if: steps.check.outputs.has-token == 'true'
uses: chromaui/action@v15
id: vanilla
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_VANILLA_TOKEN }}
buildScriptName: 'build'
workingDir: 'apps/stories-vanilla'
- name: Build Storybook (fork fallback)
if: steps.check.outputs.has-token == 'false'
working-directory: apps/stories-vanilla
run: bun run build
- name: Upload Storybook artifact
if: steps.check.outputs.has-token == 'false'
uses: actions/upload-artifact@v4
with:
name: storybook-vanilla
path: apps/stories-vanilla/storybook-static
retention-days: 30
outputs:
storybookUrl: ${{ steps.vanilla.outputs.storybookUrl }}
has-token: ${{ steps.check.outputs.has-token }}
chromatic-vue:
name: Chromatic (Vue)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Check for Chromatic token
id: check
run: |
if [ -n "$TOKEN" ]; then
echo "has-token=true" >> "$GITHUB_OUTPUT"
else
echo "has-token=false" >> "$GITHUB_OUTPUT"
fi
env:
TOKEN: ${{ secrets.CHROMATIC_VUE_TOKEN }}
- name: Publish to Chromatic
if: steps.check.outputs.has-token == 'true'
uses: chromaui/action@v15
id: vue
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_VUE_TOKEN }}
buildScriptName: 'build'
workingDir: 'apps/stories-vue'
- name: Build Storybook (fork fallback)
if: steps.check.outputs.has-token == 'false'
working-directory: apps/stories-vue
run: bun run build
- name: Upload Storybook artifact
if: steps.check.outputs.has-token == 'false'
uses: actions/upload-artifact@v4
with:
name: storybook-vue
path: apps/stories-vue/storybook-static
retention-days: 30
outputs:
storybookUrl: ${{ steps.vue.outputs.storybookUrl }}
has-token: ${{ steps.check.outputs.has-token }}
chromatic-solid:
name: Chromatic (Solid)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Check for Chromatic token
id: check
run: |
if [ -n "$TOKEN" ]; then
echo "has-token=true" >> "$GITHUB_OUTPUT"
else
echo "has-token=false" >> "$GITHUB_OUTPUT"
fi
env:
TOKEN: ${{ secrets.CHROMATIC_SOLID_TOKEN }}
- name: Publish to Chromatic
if: steps.check.outputs.has-token == 'true'
uses: chromaui/action@v15
id: solid
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_SOLID_TOKEN }}
buildScriptName: 'build'
workingDir: 'apps/stories-solid'
- name: Build Storybook (fork fallback)
if: steps.check.outputs.has-token == 'false'
working-directory: apps/stories-solid
run: bun run build
- name: Upload Storybook artifact
if: steps.check.outputs.has-token == 'false'
uses: actions/upload-artifact@v4
with:
name: storybook-solid
path: apps/stories-solid/storybook-static
retention-days: 30
outputs:
storybookUrl: ${{ steps.solid.outputs.storybookUrl }}
has-token: ${{ steps.check.outputs.has-token }}
chromatic-svelte:
name: Chromatic (Svelte)
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Check for Chromatic token
id: check
run: |
if [ -n "$TOKEN" ]; then
echo "has-token=true" >> "$GITHUB_OUTPUT"
else
echo "has-token=false" >> "$GITHUB_OUTPUT"
fi
env:
TOKEN: ${{ secrets.CHROMATIC_SVELTE_TOKEN }}
- name: Publish to Chromatic
if: steps.check.outputs.has-token == 'true'
uses: chromaui/action@v15
id: svelte
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_SVELTE_TOKEN }}
buildScriptName: 'build'
workingDir: 'apps/stories-svelte'
- name: Build Storybook (fork fallback)
if: steps.check.outputs.has-token == 'false'
working-directory: apps/stories-svelte
run: bun run build
- name: Upload Storybook artifact
if: steps.check.outputs.has-token == 'false'
uses: actions/upload-artifact@v4
with:
name: storybook-svelte
path: apps/stories-svelte/storybook-static
retention-days: 30
outputs:
storybookUrl: ${{ steps.svelte.outputs.storybookUrl }}
has-token: ${{ steps.check.outputs.has-token }}
chromatic:
name: Chromatic
runs-on: ubuntu-latest
needs:
- chromatic-vanilla
- chromatic-vue
- chromatic-solid
- chromatic-svelte
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Check for Chromatic token
id: check
run: |
if [ -n "$TOKEN" ]; then
echo "has-token=true" >> "$GITHUB_OUTPUT"
else
echo "has-token=false" >> "$GITHUB_OUTPUT"
fi
env:
TOKEN: ${{ secrets.CHROMATIC_TOKEN }}
- name: Publish to Chromatic
if: steps.check.outputs.has-token == 'true'
uses: chromaui/action@v15
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_TOKEN }}
buildScriptName: 'build'
workingDir: 'apps/stories'
env:
VANILLA_STORYBOOK_URL: ${{ needs.chromatic-vanilla.outputs.storybookUrl }}
VUE_STORYBOOK_URL: ${{ needs.chromatic-vue.outputs.storybookUrl }}
SOLID_STORYBOOK_URL: ${{ needs.chromatic-solid.outputs.storybookUrl }}
SVELTE_STORYBOOK_URL: ${{ needs.chromatic-svelte.outputs.storybookUrl }}
- name: Build Storybook (fork fallback)
if: steps.check.outputs.has-token == 'false'
working-directory: apps/stories
run: bun run build
- name: Upload Storybook artifact
if: steps.check.outputs.has-token == 'false'
uses: actions/upload-artifact@v4
with:
name: storybook-react
path: apps/stories/storybook-static
retention-days: 30
- name: Summary
if: steps.check.outputs.has-token == 'false' && github.event_name == 'pull_request'
uses: actions/github-script@v7
with:
script: |
const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
const body = [
`### Storybook Preview (Fork PR)`,
``,
`Chromatic was skipped because the Chromatic project tokens are not available on fork PRs.`,
`Storybook builds have been uploaded as workflow artifacts instead:`,
``,
`| Storybook | Artifact |`,
`| --- | --- |`,
`| React | \`storybook-react\` |`,
`| Vanilla | \`storybook-vanilla\` |`,
`| Vue | \`storybook-vue\` |`,
`| Solid | \`storybook-solid\` |`,
`| Svelte | \`storybook-svelte\` |`,
``,
`Download artifacts from the [workflow run](${runUrl}) and open \`index.html\` to preview.`,
].join('\n');
// Check for an existing comment to update
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
});
const marker = '### Storybook Preview (Fork PR)';
const existing = comments.find(c => c.body?.startsWith(marker));
if (existing) {
await github.rest.issues.updateComment({
owner: context.repo.owner,
repo: context.repo.repo,
comment_id: existing.id,
body,
});
} else {
await github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
body,
});
}
core.summary.addHeading('Storybook Preview (Fork PR)', 2);
core.summary.addRaw(
'Chromatic was skipped because project tokens are not available on fork PRs. ' +
'Storybook builds have been uploaded as workflow artifacts. ' +
'Download them from the Artifacts section of this workflow run to preview changes locally.'
);
await core.summary.write();
================================================
FILE: .github/workflows/continous-release.yml
================================================
name: Continuous Release
on:
pull_request:
push:
branches: [main]
jobs:
build:
name: Continuous release
runs-on: ubuntu-latest
environment: production
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- name: Setup node
uses: actions/setup-node@v2
with:
node-version: 20
# https://github.com/atlassian/changesets/issues/550#issuecomment-811245508
registry-url: https://registry.npmjs.org
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Publish
run: npx pkg-pr-new publish './packages/*'
================================================
FILE: .github/workflows/playwright.yml
================================================
name: Playwright
on:
pull_request:
push:
branches: [main]
jobs:
e2e:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
- name: Setup Bun
uses: oven-sh/setup-bun@v1
with:
bun-version: latest
- name: Install Dependencies
run: bun install
- name: Install Playwright Browsers
run: bunx playwright install --with-deps chromium
- name: Build Packages
run: bun run build
- name: Run Playwright Tests (React)
working-directory: apps/stories
run: bunx playwright test
- name: Run Playwright Tests (Vue)
working-directory: apps/stories-vue
run: bunx playwright test
- name: Run Playwright Tests (Solid)
working-directory: apps/stories-solid
run: bunx playwright test
- name: Upload Test Results
uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
with:
name: playwright-report
path: |
apps/stories/playwright-report/
apps/stories-vue/playwright-report/
apps/stories-solid/playwright-report/
retention-days: 14
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches:
- main
permissions:
id-token: write # Required for OIDC
contents: write # Required for changesets/action@v1
pull-requests: write # Required for changesets/action@v1
jobs:
release:
name: ${{ matrix.channel }}
runs-on: ubuntu-latest
environment: production
strategy:
max-parallel: 1
matrix:
channel:
- current
- beta
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup node
uses: actions/setup-node@v4
with:
node-version: '20'
# https://github.com/atlassian/changesets/issues/550#issuecomment-811245508
registry-url: 'https://registry.npmjs.org'
- run: npm install -g npm@latest
- uses: oven-sh/setup-bun@v1
- run: bun install && bun run build
- name: Create Release Pull Request or Publish to npm
if: matrix.channel == 'current'
uses: changesets/action@v1
with:
publish: npm run release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Publish packages on npm with @beta tag
if: matrix.channel == 'beta'
run: |
npm run version-packages:beta
npm run release:beta
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .github/workflows/tests.yml
================================================
name: Tests
on:
pull_request:
push:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v3
- name: Setup Bun
uses: oven-sh/setup-bun@v1
with:
bun-version: latest
- name: Install Dependencies
run: bun install
- name: Run Tests
run: bun run test
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
.turbo
*.log
.next
dist
dist-ssr
*.local
.env
.cache
server/dist
public/dist
storybook-static/
test-results/
playwright-report/
/packages/**/*.js
/packages/**/*.js.map
/packages/**/*.cjs
/packages/**/*.cjs.map
/packages/**/*.d.ts
/packages/**/*.d.cts
/packages/**/*.d.ts.map
/packages/**/*.d.cts.map
.svelte-kit
================================================
FILE: .nvmrc
================================================
22
================================================
FILE: .prettierrc
================================================
{
"bracketSpacing": false,
"singleQuote": true,
"semi": true,
"trailingComma": "es5"
}
================================================
FILE: .vscode/settings.json
================================================
{
"editor.formatOnSave": true,
"typescript.tsdk": "node_modules/typescript/lib",
"search.exclude": {
"**/dist": true,
"**/.cache": true,
"packages/**/*.js": true,
"packages/**/*.js.map": true,
"packages/**/*.cjs": true,
"packages/**/*.cjs.map": true,
"packages/**/*.d.ts": true,
"packages/**/*.d.cts": true
},
"files.exclude": {
"**/dist": true,
"**/node_modules": true,
"**/.git": true,
"**/.cache": true,
"**/.DS_Store": true,
"**/coverage": true,
"**/storybook-static": true,
"packages/**/*.js": true,
"packages/**/*.js.map": true,
"packages/**/*.cjs": true,
"packages/**/*.cjs.map": true,
"packages/**/*.d.ts": true,
"packages/**/*.d.cts": true
}
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to dnd-kit
Thank you for your interest in contributing to dnd-kit! This document provides guidelines and instructions for contributing to the project.
## Project Structure
dnd-kit is a monorepo managed with [Turborepo](https://turbo.build/docs). The main packages are:
- `@dnd-kit/abstract`: Core abstractions and utilities
- `@dnd-kit/dom`: DOM-specific implementation
- `@dnd-kit/react`: React-specific implementation
- `@dnd-kit/geometry`: Geometry utilities
- `@dnd-kit/state`: State management
- `@dnd-kit/collision`: Collision detection
- `@dnd-kit/helpers`: Shared helper functions
The project also includes:
- `apps/stories`: Storybook stories for testing and demonstrating features
- `apps/docs`: Documentation site
## Development Setup
1. Fork and clone the repository
2. Install dependencies:
```bash
bun install
```
3. Build all packages:
```bash
bun run build
```
## Development Workflow
1. Create a new branch for your feature or bugfix
2. Start the development server
```bash
bun run dev
```
3. Make your changes
4. Verify that the packages build:
```bash
bun run build
```
5. Submit a pull request
## Testing and Documentation
### Stories
The project uses Storybook for testing and demonstrating features. To run stories:
```bash
bun run dev
```
When adding new features:
- Add stories to demonstrate usage
- Include different variations and edge cases
- Ensure stories are interactive and testable
### Documentation
Documentation is maintained in the `apps/docs` directory. When making changes:
- Update relevant documentation
- Add examples for new features
- Ensure code examples are working
- Follow the existing documentation style
To run the documentation site locally:
```bash
npm install -g mintlify
mintlify dev
```
## Pull Request Guidelines
- Keep pull requests focused and small
- Include tests for new features
- Update documentation as needed
- Follow the existing code style
- Provide a clear description of changes
- Add changeset if your changes affect the public API
- Add or update stories for new features
- Update documentation if needed
## Code Style
- Use TypeScript for all new code
- Follow the project's ESLint configuration
- Use meaningful variable and function names
- Add appropriate comments and documentation
- Keep functions small and focused
## Testing
- Write tests for new features
- Ensure all tests pass
- Maintain or improve test coverage
- Test across different browsers and devices
- Add stories for visual testing
- Update documentation with examples
## Documentation
- Update README files as needed
- Add JSDoc comments for new code
- Keep documentation up to date
- Provide examples for new features
- Add stories to demonstrate usage
- Ensure documentation is accurate and clear
## Release Process
This project uses Changesets to manage releases. When making changes that affect the public API:
1. Add a changeset:
```bash
bun run changeset
```
2. Follow the prompts to describe your changes
3. The changeset will be included in the next release
The release process is automated and will:
1. Update version numbers based on changesets
2. Update CHANGELOG.md
3. Create release tags
4. Publish to npm
## Questions?
If you have any questions, feel free to:
- Open an [issue](https://github.com/clauderic/dnd-kit/issues/new)
- Join our [Slack community](https://dnd-kit.slack.com/)
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2021, Claudéric Demers
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://dndkit.com">
<img alt="@dnd-kit – the modern toolkit for building drag & drop interfaces" src=".github/assets/dnd-kit-hero-banner.svg">
</a>
</p>
<p align="center">
A modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web
</p>
## Features
- **Framework agnostic core:** The architecture is built in layers — a framework-agnostic core (`@dnd-kit/abstract`), a DOM implementation (`@dnd-kit/dom`), and thin adapters for your framework of choice.
- **Supports a wide range of use cases:** lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D games, and more.
- **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 more.
- **Accessibility:** Keyboard support, sensible default ARIA attributes, customizable screen reader instructions and live regions built-in.
- **Performance:** Built with performance in mind to support silky smooth animations.
- **Sortable:** Need to build a sortable interface? Check out `@dnd-kit/dom/sortable`, a thin layer built on top of the core.
<h2 align="left">Getting started</h2>
<p>
Choose your preferred framework to get started:
</p>
<br>
<table width="100%" cellpadding="32">
<tr>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/javascript/F7DF1E" height="22" alt="JavaScript" />
<br>
<strong><a href="https://dndkit.com/quickstart">Vanilla</a></strong>
Build drag and drop interfaces using plain JavaScript
<br>
</td>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/react/61DAFB" height="22" alt="React" />
<br>
<strong><a href="https://dndkit.com/react/quickstart">React</a></strong>
Build drag and drop interfaces using React components and hooks
<br><br>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/vue.js/4FC08D" height="22" alt="Vue" />
<br>
<strong><a href="https://dndkit.com/vue/quickstart">Vue</a></strong>
Build drag and drop interfaces using Vue composables and components
<br><br>
</td>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/svelte/FF3E00" height="22" alt="Svelte" />
<br>
<strong><a href="https://dndkit.com/svelte/quickstart">Svelte</a></strong>
Build drag and drop interfaces using Svelte primitives and components
<br><br>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<br>
<img src="https://cdn.simpleicons.org/solid/2C4F7C" height="22" alt="SolidJS" />
<br>
<strong><a href="https://dndkit.com/solid/quickstart">Solid</a></strong>
Build drag and drop interfaces using SolidJS hooks and components
<br><br>
</td>
<td width="50%" valign="top">
</td>
</tr>
</table>
## Documentation
Visit **[dndkit.com](https://dndkit.com)** for full documentation, API reference, guides, and interactive examples.
## Packages
| Package | Version | Description |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- |
| [`@dnd-kit/abstract`](packages/abstract) | [](https://npm.im/@dnd-kit/abstract) | Abstract core |
| [`@dnd-kit/collision`](packages/collision) | [](https://npm.im/@dnd-kit/collision) | Collision detection |
| [`@dnd-kit/dom`](packages/dom) | [](https://npm.im/@dnd-kit/dom) | Framework-agnostic DOM layer |
| [`@dnd-kit/geometry`](packages/geometry) | [](https://npm.im/@dnd-kit/geometry) | Geometry utilities |
| [`@dnd-kit/helpers`](packages/helpers) | [](https://npm.im/@dnd-kit/helpers) | Helper functions |
| [`@dnd-kit/react`](packages/react) | [](https://npm.im/@dnd-kit/react) | React adapter |
| [`@dnd-kit/solid`](packages/solid) | [](https://npm.im/@dnd-kit/solid) | SolidJS adapter |
| [`@dnd-kit/state`](packages/state) | [](https://npm.im/@dnd-kit/state) | Reactive state management |
| [`@dnd-kit/svelte`](packages/svelte) | [](https://npm.im/@dnd-kit/svelte) | Svelte adapter |
| [`@dnd-kit/vue`](packages/vue) | [](https://npm.im/@dnd-kit/vue) | Vue adapter |
## Contributing
This is a monorepo managed with [Turborepo](https://turbo.build/) and [bun](https://bun.sh/).
```bash
# Install dependencies
bun install
# Build all packages
bun run build
# Run dev mode
bun run dev
```
## License
[MIT](./LICENSE)
================================================
FILE: apps/docs/README.md
================================================
# Documentation
## Contributing to the @dnd-kit documentation
Contributions are welcome to improve the @dnd-kit documentation. Open a [Pull request](https://github.com/clauderic/dnd-kit/pulls) and add the `Documentation` label.
## Development
Install the [Mintlify CLI](https://www.npmjs.com/package/mintlify) to preview the documentation changes locally. To install, use the following command
```
npm i -g mintlify
```
Run the following command at the root of the `/apps/docs` directory:
```
mintlify dev
```
#### Troubleshooting
- Mintlify dev isn't running - Run `mintlify install` it'll re-install dependencies.
- Page loads as a 404 - Make sure you are running in a folder with `mint.json`
================================================
FILE: apps/docs/concepts/drag-drop-manager.mdx
================================================
---
title: 'DragDropManager'
description: 'Orchestrate drag and drop interactions between elements.'
icon: 'sitemap'
---
The `DragDropManager` is the central orchestrator of the drag and drop system. It coordinates all interactions between draggable and droppable elements.
```mermaid
graph TD
M[Manager]
R[Registry]
E[Events]
I[Entities]
D[Draggable]
Dr[Droppable]
P[Plugins]
S[Sensors]
Mod[Modifiers]
O[Operation]
M -.-> R
R -.-> I
R -.-> P
R -.-> S
R -.-> Mod
S -.-> |Detect input| O
O -.-> |Trigger| E
Mod -.-> |Transform| O
I -.-> Dr
I -.-> D
```
## Usage
Create a manager instance to coordinate drag and drop interactions:
```js
import {DragDropManager} from '@dnd-kit/dom';
const manager = new DragDropManager();
```
<ParamField path="options" type="object">
Optional configuration for the manager:
- `sensors`: [Sensors](/extend/sensors) to detect drag interactions — an array or a function that receives the defaults
- `plugins`: [Plugins](/extend/plugins) to extend functionality — an array or a function that receives the defaults
- `modifiers`: [Modifiers](/extend/modifiers) to customize behavior — an array or a function that receives the defaults
</ParamField>
## Configuration
The manager comes with sensible defaults, but you can customize its behavior. The `plugins`, `sensors`, and `modifiers` options accept either an array (which replaces the defaults) or a function that receives the default values and returns a new array.
### Extending defaults
Use the function form to add to or configure the defaults without replacing them:
```js
import {DragDropManager} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';
const manager = new DragDropManager({
// Add a plugin to the defaults
plugins: (defaults) => [...defaults, MyPlugin],
// Configure a default sensor
sensors: (defaults) => [
...defaults,
PointerSensor.configure({
activationConstraints: { distance: 5 },
}),
],
// Add a modifier
modifiers: (defaults) => [...defaults, RestrictToWindow],
});
```
### Replacing defaults
Pass an array to fully replace the defaults:
```js
import {
DragDropManager,
KeyboardSensor,
PointerSensor,
} from '@dnd-kit/dom';
const manager = new DragDropManager({
sensors: [
PointerSensor, // Handles mouse and touch
KeyboardSensor, // Enables keyboard navigation
],
plugins: [
AutoScroller, // Automatic scrolling during drag
Accessibility, // ARIA attributes management
],
modifiers: [
RestrictToWindow, // Keeps dragged items within window bounds
],
});
```
<AccordionGroup>
<Accordion title="Default configuration">
The manager includes these defaults out of the box:
**Sensors**
- `PointerSensor`: Handles mouse and touch interactions
- Mouse: Activates immediately on drag handle
- Touch: 250ms delay with 5px movement tolerance
- Other pointers: 200ms delay with 5px distance threshold
- `KeyboardSensor`: Enables keyboard navigation with arrow keys
**Plugins**
- `Accessibility`: Manages ARIA attributes and announcements
- `AutoScroller`: Scrolls containers when dragging near edges
- `Cursor`: Updates cursor appearance during drag
- `Feedback`: Controls visual feedback during drag
- `PreventSelection`: Prevents text selection while dragging
- `ScrollListener`: Monitors scroll events during drag
- `Scroller`: Handles programmatic scrolling
</Accordion>
</AccordionGroup>
## Events
The manager's `monitor` lets you observe drag and drop events:
```js
// Observe drag start
manager.monitor.addEventListener('beforedragstart', (event) => {
// Optionally prevent dragging
if (shouldPreventDrag(event.operation.source)) {
event.preventDefault();
}
});
// Track movement
manager.monitor.addEventListener('dragmove', (event) => {
const {source, position} = event.operation;
console.log(`Dragging ${source.id} to ${position.current}`);
});
// Detect collisions
manager.monitor.addEventListener('collision', (event) => {
const [firstCollision] = event.collisions;
if (firstCollision) {
console.log(`Colliding with ${firstCollision.id}`);
}
});
// Listen for when dragging ends
manager.monitor.addEventListener('dragend', (event) => {
const {source, target, canceled} = event.operation;
if (!canceled && target) {
console.log(`Dropped ${source.id} onto ${target.id}`);
}
});
```
### Available Events
<ResponseField name="beforedragstart" type="Event">
Fires before drag begins. Can be prevented.
<Expandable title="Properties">
<ResponseField name="operation" type="object">
The drag operation that is about to begin
</ResponseField>
<ResponseField name="preventDefault" type="function">
Call to prevent the drag operation from starting
</ResponseField>
</Expandable>
</ResponseField>
<ResponseField name="dragstart" type="Event">
Fires when drag starts.
<Expandable title="Properties">
<ResponseField name="operation" type="object">
The current drag operation
</ResponseField>
<ResponseField name="nativeEvent" type="Event">
The original browser event that triggered the drag
</ResponseField>
</Expandable>
</ResponseField>
<ResponseField name="dragmove" type="Event">
Fires during movement. Can be prevented.
<Expandable title="Properties">
<ResponseField name="operation" type="object">
The current drag operation
</ResponseField>
<ResponseField name="to" type="Point">
The destination coordinates
</ResponseField>
<ResponseField name="by" type="Point">
The movement delta
</ResponseField>
<ResponseField name="nativeEvent" type="Event">
The original browser event
</ResponseField>
</Expandable>
</ResponseField>
<ResponseField name="dragover" type="Event">
Fires when over a droppable. Call `event.preventDefault()` to prevent the default behavior of plugins that respond to this event.
<Expandable title="Properties">
<ResponseField name="operation" type="object">
The current drag operation
</ResponseField>
</Expandable>
</ResponseField>
<ResponseField name="collision" type="Event">
Fires on droppable collision. Can be prevented.
<Expandable title="Properties">
<ResponseField name="collisions" type="Collision[]">
Array of detected collisions with droppable targets
</ResponseField>
</Expandable>
</ResponseField>
<ResponseField name="dragend" type="Event">
Fires when drag ends.
<Expandable title="Properties">
<ResponseField name="operation" type="object">
The completed drag operation
</ResponseField>
<ResponseField name="canceled" type="boolean">
Whether the operation was canceled
</ResponseField>
<ResponseField name="nativeEvent" type="Event">
The original browser event
</ResponseField>
</Expandable>
</ResponseField>
## Registration
The manager's `registry` tracks draggable and droppable elements:
```js
// Manual registration
const cleanup = manager.registry.register(draggable);
cleanup(); // Or manager.registry.unregister(draggable);
// Auto-registration with manager reference
const draggable = new Draggable({
id: 'draggable-1',
element,
}, manager);
// Opt out of auto-registration
const draggable = new Draggable({
id: 'draggable-1',
element,
register: false
}, manager);
```
<Tip>
Elements automatically register when created with a manager reference. Only use manual registration for advanced use cases.
</Tip>
## API Reference
### Properties
- `registry`: Tracks active elements and extensions
- `draggables`: Map of registered draggable elements
- `droppables`: Map of registered droppable elements
- `plugins`: Registry of active plugins
- `sensors`: Registry of active sensors
- `modifiers`: Registry of active modifiers
- `dragOperation`: Current drag operation state
- `source`: Currently dragged element
- `target`: Current drop target
- `position`: Current drag coordinates
- `status`: Current operation status
- `canceled`: Whether operation was canceled
- `monitor`: Event system
- `addEventListener`: Add event listener
- `removeEventListener`: Remove listener
- `renderer`: Integration with asynchronous renderers such as React
### Methods
<ParamField path="destroy()" type="function">
Clean up the manager and all registered elements:
- Unregisters all draggables and droppables
- Cleans up all plugins, sensors, and modifiers
- Removes all event listeners
</ParamField>
## Lifecycle
1. **Initialization**
- Manager created
- Default plugins and sensors registered
- Custom configuration applied
2. **Registration**
- Draggable and droppable elements register
- Plugins initialize
- Event listeners bound
3. **Operation**
- Drag operations tracked
- Events dispatched
- Collisions detected
4. **Cleanup**
- Elements unregister
- Event listeners removed
- Resources released
================================================
FILE: apps/docs/concepts/draggable.mdx
================================================
---
title: 'Draggable'
description: 'Make elements draggable to drop them over droppable targets.'
icon: 'bullseye-pointer'
---
import {Story} from '/snippets/story.mdx';
import {CodeSandbox} from '/snippets/sandbox.mdx';
import {draggableStyles} from '/snippets/code.mdx';
## Usage
First, create a [DragDropManager](/concepts/drag-drop-manager) instance to orchestrate the drag and drop system. Then use the `Draggable` class to make elements draggable:
export const code = `
import {Draggable, DragDropManager} from '@dnd-kit/dom';
export function App() {
const manager = new DragDropManager();
const element = document.createElement('button');
element.innerText = 'draggable';
element.classList.add('btn');
const draggable = new Draggable({
id: 'draggable-1', // Required - must be unique
element,
}, manager);
document.body.appendChild(element);
}
`.trim();
<CodeSandbox files={{
'index.js': {code: `import './styles.css';\nimport {App} from './draggable.js';\n\nApp();`, hidden: true},
'draggable.js': {code, active: true},
'styles.css': {code: draggableStyles, hidden: true},
}} height={360} previewHeight={200} template="vanilla" hero />
## Handles
By default, the entire element can be used to initiate dragging. You can restrict dragging to a specific handle element:
```js
const element = document.createElement('div');
const handle = document.createElement('div');
handle.classList.add('handle');
handle.innerHTML = '⋮'; // Three dots menu icon for drag handle
element.appendChild(handle);
const draggable = new Draggable({
id: 'draggable-1',
element,
handle, // Only allow dragging from the handle
}, manager);
```
## Types
You can assign types to draggable elements to restrict which [droppable targets](/concepts/droppable) they can be dropped on:
```js
// Assign a type
const draggable = new Draggable({
id: 'draggable-1',
element,
type: 'item', // Only droppables accepting 'item' type will be valid targets
}, manager);
```
## Feedback
You can customize how the element behaves while being dragged using the [Feedback](/extend/plugins/feedback) plugin's per-entity configuration:
```js
import {Draggable, DragDropManager, Feedback} from '@dnd-kit/dom';
const draggable = new Draggable({
id: 'draggable-1',
element,
plugins: [Feedback.configure({ feedback: 'clone' })],
}, manager);
```
Available feedback options:
- `'default'`: The original element moves with the drag (best for most cases)
- `'clone'`: A copy of the element stays in place while the original moves (good for drag-to-copy)
- `'move'`: The element moves without a placeholder (minimal visual feedback)
- `'none'`: No visual feedback (useful for custom drag overlays)
## API Reference
### Arguments
The `Draggable` class accepts the following arguments:
<ParamField path="id" type="string | number" required>
A unique identifier for this draggable element within the same [drag and drop context provider](/concepts/drag-drop-manager).
</ParamField>
<ParamField path="element" type="Element">
The DOM element to make draggable. While not required in the constructor, it must be set to enable dragging.
</ParamField>
<ParamField path="handle" type="Element">
Optionally specify a drag handle element. If not provided, the entire element will be draggable. See [drag handles](#handles).
</ParamField>
<ParamField path="type" type="string | number | Symbol">
Optionally assign a type to restrict which droppable targets can accept this element. See [types](#types).
</ParamField>
<ParamField path="plugins" type="PluginDescriptor[]">
An array of plugin descriptors for per-entity plugin configuration. Use `Plugin.configure()` to create descriptors. See [feedback](#feedback).
</ParamField>
<ParamField path="disabled" type="boolean">
Set to `true` to temporarily prevent dragging this element.
</ParamField>
<ParamField path="modifiers" type="Modifier[]">
An array of [modifiers](/extend/modifiers) to customize drag behavior.
</ParamField>
<ParamField path="sensors" type="Sensors[]">
An array of [sensors](/extend/sensors) to detect drag interactions.
</ParamField>
<ParamField path="data" type="{[key: string]: any}">
Optional data to associate with this draggable element, available in event handlers.
</ParamField>
<ParamField path="effects" type="() => Effect[]">
<Info>This is an advanced feature and should not need to be used by most consumers.</Info>
You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the `destroy()` method of this instance.
</ParamField>
### Properties
The `Draggable` instance provides these key properties:
- `id`: The unique identifier
- `element`: The main DOM element
- `handle`: The drag handle element (if specified)
- `type`: The assigned type
- `disabled`: Whether dragging is disabled
- `isDragging`: Whether this element is currently being dragged
- `isDropping`: Whether this element is being dropped
### Methods
- `register()`: Register this draggable with the manager
- `unregister()`: Remove this draggable from the manager
- `destroy()`: Clean up this draggable instance and remove all listeners
================================================
FILE: apps/docs/concepts/droppable.mdx
================================================
---
title: 'Droppable'
description: 'Create droppable targets for draggable elements.'
icon: 'expand'
---
import {Story} from '/snippets/story.mdx';
<Story id="droppable-basic-setup--example" framework="vanilla" height="400" hero />
## Usage
The `Droppable` class creates drop targets that can receive [draggable](/concepts/draggable) elements. First, create a [DragDropManager](/concepts/drag-drop-manager) instance:
```js
import {Droppable, DragDropManager} from '@dnd-kit/dom';
const manager = new DragDropManager();
const element = document.createElement('div');
element.classList.add('droppable');
// Create a droppable target
const droppable = new Droppable({
id: 'drop-zone',
element,
}, manager);
document.body.appendChild(element);
// Listen for drop events
manager.monitor.addEventListener('dragend', (event) => {
if (event.operation.target?.id === droppable.id) {
console.log('Item dropped!', event.operation.source);
}
});
```
## Accepting Specific Types
You can restrict which draggable elements can be dropped by using the `accepts` property. See the [draggable types](/concepts/draggable#types) documentation for more details.
```js
// Accept only draggables with type 'item'
const droppable = new Droppable({
id: 'drop-zone',
element,
accepts: 'item'
}, manager);
// Accept multiple types
const droppable = new Droppable({
id: 'drop-zone',
element,
accepts: ['item', 'card']
}, manager);
// Use a function for custom logic
const droppable = new Droppable({
id: 'drop-zone',
element,
accepts: (draggable) => {
// Custom acceptance logic
return draggable.type === 'item' && draggable.data.category === 'fruit';
}
}, manager);
```
## Collision Detection
By default, the `Droppable` class uses rectangle intersection to detect when draggable elements are over the drop target:
<img src="/images/droppable/shape-intersection.svg" alt="Rectangle intersection collision detection" />
You can customize this behavior with different collision detection algorithms:
```js
import {
closestCenter,
pointerIntersection,
directionBiased
} from '@dnd-kit/collision';
// Use closest center point for card stacking
const droppable = new Droppable({
id: 'card-stack',
element,
collisionDetector: closestCenter
}, manager);
```
For example, the `closestCenter` detector will detect collisions based on the distance between the center points, which is ideal for card stacking:
<img src="/images/droppable/closest-center.svg" alt="Closest center collision detection" />
### Collision Priority
When multiple droppable targets overlap, you can set priority to determine which one should receive the drop. This is particularly useful for nested containers:
```js
const container = new Droppable({
id: 'container',
element: containerElement,
collisionPriority: 1 // Lower priority
}, manager);
const item = new Droppable({
id: 'item',
element: itemElement,
collisionPriority: 2 // Higher priority
}, manager);
```
## API Reference
### Arguments
The `Droppable` class accepts the following arguments:
<ParamField path="id" type="string | number" required>
A unique identifier for this droppable target within the same [drag and drop context provider](/concepts/drag-drop-manager).
</ParamField>
<ParamField path="element" type="Element">
The DOM element to make droppable. While not required in the constructor, it must be set to enable dropping.
</ParamField>
<ParamField path="accepts" type="string | number | Symbol | ((draggable: Draggable) => boolean)">
Specify which draggable elements can be dropped on this target. See [accepting specific types](#accepting-specific-types) for more details.
</ParamField>
<ParamField path="collisionDetector" type="CollisionDetector">
A function to determine when draggable elements are over this target. See [collision detection](#collision-detection) for built-in options, such as:
- `shapeIntersection`: Default, uses rectangle intersection
- `pointerIntersection`: Uses pointer position for precise detection
- `closestCenter`: Uses center point distance, ideal for card stacking
- `directionBiased`: Considers drag direction, useful for sortable lists
</ParamField>
<ParamField path="collisionPriority" type="number">
Priority level when multiple droppable targets overlap. Higher numbers take precedence. See [collision priority](#collision-priority) for more details.
</ParamField>
<ParamField path="disabled" type="boolean">
Set to `true` to temporarily prevent dropping on this target.
</ParamField>
<ParamField path="data" type="{[key: string]: any}">
Optional data to associate with this droppable target, available in event handlers.
</ParamField>
<ParamField path="effects" type="() => Effect[]">
<Info>This is an advanced feature and should not need to be used by most consumers.</Info>
You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when invoking the `destroy()` method of this instance.
</ParamField>
### Properties
The `Droppable` instance provides these key properties:
- `id`: The unique identifier
- `element`: The DOM element acting as the drop target
- `disabled`: Whether dropping is currently disabled
- `isDropTarget`: Whether a draggable is currently over this target
- `shape`: The current bounding shape of the drop target
### Methods
- `accepts(draggable)`: Check if this target accepts a draggable element
- `refreshShape()`: Recalculate the target's dimensions
- `register()`: Register this target with the manager
- `unregister()`: Remove this target from the manager
- `destroy()`: Clean up this droppable instance and remove all listeners
================================================
FILE: apps/docs/concepts/sortable.mdx
================================================
---
title: 'Sortable'
description: 'Reorder elements in a list or across multiple lists.'
icon: 'layer-group'
---
import {Story} from '/snippets/story.mdx';
import {CodeSandbox} from '/snippets/sandbox.mdx';
import {sortableStyles} from '/snippets/code.mdx';
<Story id="react-sortable--example" height="320" hero />
## Usage
The `Sortable` class allows you to reorder elements in a list or across multiple lists. A sortable element is both [Droppable](/concepts/droppable) and [Draggable](/concepts/draggable), which means you can drag it and drop it to reorder.
First, create a [DragDropManager](/concepts/drag-drop-manager) instance and use it to create sortable items:
export const code = `
import {DragDropManager} from '@dnd-kit/dom';
import {Sortable} from '@dnd-kit/dom/sortable';
export function App() {
const manager = new DragDropManager();
const wrapper = document.createElement('ul');
const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
wrapper.classList.add('list');
items.forEach((item, index) => {
const element = document.createElement('li');
element.classList.add('item');
element.innerText = item;
const sortable = new Sortable({
id: item,
index, // Required - the position in the list
element,
}, manager);
wrapper.appendChild(element);
});
document.body.appendChild(wrapper);
}
`.trim();
<CodeSandbox files={{
'index.js': {code: `import './styles.css';\nimport {App} from './sortable.js';\n\nApp();`, hidden: true},
'sortable.js': {code, active: true},
'styles.css': {code: sortableStyles, hidden: true},
}} height={580} previewHeight={180} template="vanilla" />
## Multiple Lists
You can create multiple sortable lists by assigning sortable items to different groups:
```js
const list1 = ['Item 1', 'Item 2'];
const list2 = ['Item 3', 'Item 4'];
// First list
list1.forEach((item, index) => {
new Sortable({
id: item,
index,
group: 'list1', // Assign to first group
element: createItemElement(item),
}, manager);
});
// Second list
list2.forEach((item, index) => {
new Sortable({
id: item,
index,
group: 'list2', // Assign to second group
element: createItemElement(item),
}, manager);
});
```
## Drag Handles
By default, the entire sortable element can be used to initiate dragging. You can restrict dragging to a specific handle element:
```js
const element = document.createElement('li');
const handle = document.createElement('div');
handle.classList.add('handle');
element.appendChild(handle);
new Sortable({
id: 'item-1',
index: 0,
element,
handle, // Only allow dragging from the handle
}, manager);
```
## Animations
Sortable items automatically animate when their position changes. You can customize the animation through the `transition` option:
```js
new Sortable({
id: 'item-1',
index: 0,
transition: {
duration: 250, // Animation duration in ms
easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // Animation easing
idle: false, // Whether to animate when no drag is in progress
}
}, manager);
```
## Optimistic Sorting
By default, every `Sortable` instance registers the `OptimisticSortingPlugin`. This plugin optimistically reorders DOM elements during a drag operation so that the UI feels responsive — without requiring your framework to re-render on every `dragover` event.
### How it works
When you drag a sortable item over another sortable item, the plugin:
1. Physically moves the DOM elements to reflect the new order.
2. Updates the `index` (and `group`, for multi-list scenarios) on each affected `Sortable` instance.
3. Sets the **drop target** to the drag source itself by calling `manager.actions.setDropTarget(source.id)`.
Step 3 has an important consequence: **during a drag, `source` and `target` on the operation will refer to the same element.** This also means that `isDragSource` and `isDropTarget` will both be `true` on the dragged item.
### Tracking position changes
Since `source` and `target` are the same, you cannot compare their IDs to determine what moved. Instead, use the sortable-specific properties available on the source:
| Property | Description |
|----------|-------------|
| `index` | The current position of the item (updated by the plugin as it moves) |
| `initialIndex` | The position the item was in when the drag started |
| `group` | The current group the item belongs to |
| `initialGroup` | The group the item was in when the drag started |
### Preventing optimistic sorting for a single event
If you call `event.preventDefault()` in a `dragover` handler, the `OptimisticSortingPlugin` will skip the optimistic update for that particular event. This is useful when you want to handle certain moves yourself (for example, to prevent items from being dragged into a specific group) while still letting the plugin handle the rest:
```js
manager.monitor.addEventListener('dragover', (event) => {
const {source, target} = event.operation;
if (shouldPreventMove(source, target)) {
event.preventDefault(); // Optimistic sorting will not run for this event
}
});
```
### Disabling optimistic sorting
If you prefer to manage sorting entirely in your application state (for example, by handling every `dragover` event), you can disable optimistic sorting by omitting the `OptimisticSortingPlugin` from the `plugins` array:
```js
import {SortableKeyboardPlugin} from '@dnd-kit/dom/sortable';
new Sortable({
id: 'item-1',
index: 0,
element,
plugins: [SortableKeyboardPlugin], // No OptimisticSortingPlugin
}, manager);
```
Without optimistic sorting, `source` and `target` will be different elements during drag, and you can use their IDs directly. However, you will need to handle reordering in your `dragover` listener for smooth visual feedback.
## Managing state without the move helper
The `move` helper from `@dnd-kit/helpers` is a convenience function that takes your items and a drag event and returns a new array with the item moved to its new position. It supports flat arrays and grouped records, handles canceled drags, and works with optimistic sorting out of the box.
If you need more control over state updates, you can manage state manually using the sortable properties and the `isSortable` type guard.
### Single list
With optimistic sorting enabled (the default), you only need to handle the `dragend` event. The `isSortable` type guard narrows the `source` to expose `initialIndex` and `index`:
```js
import {isSortable} from '@dnd-kit/dom/sortable';
manager.monitor.addEventListener('dragend', (event) => {
if (event.canceled) return;
const {source} = event.operation;
if (isSortable(source)) {
const {initialIndex, index} = source;
if (initialIndex !== index) {
// Reorder your data: move the item from initialIndex to index
const newItems = [...items];
const [removed] = newItems.splice(initialIndex, 1);
newItems.splice(index, 0, removed);
items = newItems;
}
}
});
```
### Multiple lists
For multiple lists, use `initialGroup` and `group` to detect whether the item stayed in the same list or moved to a different one:
```js
manager.monitor.addEventListener('dragend', (event) => {
if (event.canceled) return;
const {source} = event.operation;
if (isSortable(source)) {
const {initialIndex, index, initialGroup, group} = source;
if (initialGroup === group) {
// Same group: reorder within the list
const groupItems = [...items[group]];
const [removed] = groupItems.splice(initialIndex, 1);
groupItems.splice(index, 0, removed);
items = {...items, [group]: groupItems};
} else {
// Cross-group transfer
const sourceItems = [...items[initialGroup]];
const [removed] = sourceItems.splice(initialIndex, 1);
const targetItems = [...items[group]];
targetItems.splice(index, 0, removed);
items = {...items, [initialGroup]: sourceItems, [group]: targetItems};
}
}
});
```
## Type Guards
`@dnd-kit/dom/sortable` exports two type guards to help you work with sortable drag operations.
### `isSortable`
Checks whether a `Draggable` or `Droppable` instance is a sortable element. If it returns `true`, the type is narrowed to expose sortable-specific properties like `index`, `initialIndex`, `group`, and `initialGroup`.
```js
import {isSortable} from '@dnd-kit/dom/sortable';
const {source} = event.operation;
if (isSortable(source)) {
console.log(source.index); // number
console.log(source.initialIndex); // number
console.log(source.group); // string | number | undefined
console.log(source.initialGroup); // string | number | undefined
}
```
### `isSortableOperation`
Checks whether **both** `source` and `target` of a drag operation are sortable elements. This is useful when you want to narrow the entire operation at once:
```js
import {isSortableOperation} from '@dnd-kit/dom/sortable';
const {operation} = event;
if (isSortableOperation(operation)) {
// Both source and target are narrowed to sortable types
console.log(operation.source.initialIndex);
console.log(operation.target.index);
}
```
Both type guards are also available from framework-specific packages:
- `@dnd-kit/react/sortable`
- `@dnd-kit/vue/sortable`
- `@dnd-kit/svelte/sortable`
- `@dnd-kit/solid/sortable`
## API Reference
### Arguments
The `Sortable` class accepts the following arguments:
<ParamField path="id" type="string | number" required>
A unique identifier for this sortable item within the drag and drop manager.
</ParamField>
<ParamField path="index" type="number" required>
The position of this item within its sortable group.
</ParamField>
<ParamField path="element" type="Element">
The DOM element to make sortable. While not required in the constructor, it must be set to enable sorting.
</ParamField>
<ParamField path="group" type="string | number">
Optionally assign this item to a group. Items can only be sorted within their group.
</ParamField>
<ParamField path="handle" type="Element">
Optionally specify a drag handle element. If not provided, the entire element will be draggable.
</ParamField>
<ParamField path="target" type="Element">
Optionally specify a different element to use as the drop target. By default, uses the main element.
</ParamField>
<ParamField path="transition" type="SortableTransition | null">
Configure the animation when items are reordered:
```ts
interface SortableTransition {
duration?: number; // Duration in ms (default: 250)
easing?: string; // CSS easing function (default: cubic-bezier)
idle?: boolean; // Animate when not dragging (default: false)
}
```
</ParamField>
<ParamField path="disabled" type="boolean">
Set to `true` to temporarily disable sorting for this item.
</ParamField>
<ParamField path="type" type="string | number | Symbol">
Optionally restrict which types of items can be sorted together.
</ParamField>
<ParamField path="accepts" type="string | number | Symbol | ((type) => boolean)">
Optionally restrict which types of items can be dropped on this item.
</ParamField>
<ParamField path="modifiers" type="Modifier[]">
An array of [modifiers](/extend/modifiers) to customize drag behavior.
</ParamField>
<ParamField path="sensors" type="Sensors[]">
An array of [sensors](/extend/sensors) to detect drag interactions.
</ParamField>
<ParamField path="data" type="{[key: string]: any}">
Optional data to associate with this sortable item, available in event handlers.
</ParamField>
### Properties
The `Sortable` instance provides these key properties:
- `index`: The current position in the list
- `group`: The assigned group identifier
- `isDragging`: Whether this item is currently being dragged
- `isDropTarget`: Whether this item is currently a drop target
- `disabled`: Whether sorting is disabled for this item
- `element`: The main DOM element
- `target`: The drop target element (if different from main element)
### Methods
- `register()`: Register this sortable item with the manager
- `unregister()`: Remove this item from the manager
- `destroy()`: Clean up this sortable instance
- `accepts(draggable)`: Check if this item accepts a draggable
- `refreshShape()`: Recalculate the item's dimensions
================================================
FILE: apps/docs/docs.json
================================================
{
"$schema": "https://mintlify.com/docs.json",
"theme": "mint",
"name": "@dnd-kit",
"colors": {
"primary": "#596dff",
"light": "#596dff",
"dark": "#596dff"
},
"favicon": "/favicon.png",
"navigation": {
"versions": [
{
"version": "Latest",
"anchors": [
{
"anchor": "Vanilla",
"icon": "js",
"groups": [
{
"group": " ",
"pages": ["overview"]
},
{
"group": "Get Started",
"pages": ["quickstart"]
},
{
"group": "Concepts",
"pages": [
"concepts/drag-drop-manager",
"concepts/draggable",
"concepts/droppable",
"concepts/sortable"
]
},
{
"group": "Extensibility",
"pages": [
{
"group": "Plugins",
"icon": "cube",
"pages": [
"extend/plugins",
"extend/plugins/accessibility",
"extend/plugins/auto-scroller",
"extend/plugins/cursor",
"extend/plugins/debug",
"extend/plugins/feedback",
"extend/plugins/style-injector"
]
},
{
"group": "Sensors",
"icon": "monitor-waveform",
"pages": [
"extend/sensors",
"extend/sensors/pointer-sensor",
"extend/sensors/keyboard-sensor"
]
},
"extend/modifiers"
]
}
]
},
{
"anchor": "React",
"icon": "react",
"groups": [
{
"group": "Get Started",
"pages": ["react/quickstart"]
},
{
"group": "Components",
"pages": [
"react/components/drag-drop-provider",
"react/components/drag-overlay"
]
},
{
"group": "Hooks",
"pages": [
"react/hooks/use-draggable",
"react/hooks/use-droppable",
"react/hooks/use-sortable",
"react/hooks/use-drag-drop-monitor"
]
},
{
"group": "Guides",
"pages": [
"react/guides/migration",
"react/guides/multiple-sortable-lists",
"react/guides/sortable-state-management"
]
}
]
},
{
"anchor": "Vue",
"icon": "vuejs",
"groups": [
{
"group": "Get Started",
"pages": ["vue/quickstart"]
},
{
"group": "Components",
"pages": [
"vue/components/drag-drop-provider",
"vue/components/drag-overlay"
]
},
{
"group": "Composables",
"pages": [
"vue/composables/use-draggable",
"vue/composables/use-droppable",
"vue/composables/use-sortable"
]
}
]
},
{
"anchor": "Svelte",
"icon": "svelte",
"groups": [
{
"group": "Get Started",
"pages": ["svelte/quickstart"]
},
{
"group": "Components",
"pages": [
"svelte/components/drag-drop-provider",
"svelte/components/drag-overlay"
]
},
{
"group": "Primitives",
"pages": [
"svelte/primitives/create-draggable",
"svelte/primitives/create-droppable",
"svelte/primitives/create-sortable"
]
}
]
},
{
"anchor": "Solid",
"icon": "solidjs",
"groups": [
{
"group": "Get Started",
"pages": ["solid/quickstart"]
},
{
"group": "Components",
"pages": [
"solid/components/drag-drop-provider",
"solid/components/drag-overlay"
]
},
{
"group": "Hooks",
"pages": [
"solid/hooks/use-draggable",
"solid/hooks/use-droppable",
"solid/hooks/use-sortable"
]
}
]
}
]
},
{
"version": "Legacy",
"anchors": [
{
"anchor": "React",
"icon": "react",
"groups": [
{
"group": "Get started",
"pages": [
"legacy/introduction/installation",
"legacy/introduction/getting-started"
]
},
{
"group": "Concepts",
"pages": [
{
"group": "Context Provider",
"pages": [
"legacy/api-documentation/context-provider/dnd-context",
"legacy/api-documentation/context-provider/collision-detection-algorithms",
"legacy/api-documentation/context-provider/use-dnd-context",
"legacy/api-documentation/context-provider/use-dnd-monitor"
],
"icon": "sitemap"
},
{
"group": "Draggable",
"pages": [
"legacy/api-documentation/draggable",
"legacy/api-documentation/draggable/use-draggable",
"legacy/api-documentation/draggable/drag-overlay"
],
"icon": "bullseye-pointer"
},
{
"group": "Droppable",
"pages": [
"legacy/api-documentation/droppable",
"legacy/api-documentation/droppable/use-droppable"
],
"icon": "expand"
},
{
"group": "Sortable",
"pages": [
"legacy/presets/sortable/overview",
"legacy/presets/sortable/sortable-context",
"legacy/presets/sortable/use-sortable"
],
"icon": "layer-group"
}
]
},
{
"group": "Extensibility",
"pages": [
{
"group": "Sensors",
"pages": [
"legacy/api-documentation/sensors",
"legacy/api-documentation/sensors/pointer",
"legacy/api-documentation/sensors/mouse",
"legacy/api-documentation/sensors/touch",
"legacy/api-documentation/sensors/keyboard"
],
"icon": "signal-stream"
},
"legacy/api-documentation/modifiers"
]
},
{
"group": "Guides",
"pages": ["legacy/guides/accessibility"]
}
]
}
]
}
]
},
"contextual": {
"options": ["copy", "view", "chatgpt", "claude"]
},
"redirects": [
{
"source": "/introduction/getting-started",
"destination": "/legacy/introduction/getting-started"
},
{
"source": "/introduction/installation",
"destination": "/legacy/introduction/installation"
},
{
"source": "/introduction/:slug*",
"destination": "/legacy/introduction/:slug*"
},
{
"source": "/api-documentation/context-provider",
"destination": "/legacy/api-documentation/context-provider/dnd-context"
},
{
"source": "/api-documentation/context-provider/usedndcontext",
"destination": "/legacy/api-documentation/context-provider/use-dnd-context"
},
{
"source": "/api-documentation/context-provider/usedndmonitor",
"destination": "/legacy/api-documentation/context-provider/use-dnd-monitor"
},
{
"source": "/api-documentation/context-provider/dndcontext",
"destination": "/legacy/api-documentation/context-provider/dnd-context"
},
{
"source": "/api-documentation/draggable/usedraggable",
"destination": "/legacy/api-documentation/draggable/use-draggable"
},
{
"source": "/api-documentation/droppable/usedroppable",
"destination": "/legacy/api-documentation/droppable/use-droppable"
},
{
"source": "/api-documentation/:slug*",
"destination": "/legacy/api-documentation/:slug*"
},
{
"source": "/presets/sortable",
"destination": "/legacy/presets/sortable/overview"
},
{
"source": "/presets/sortable/usesortable",
"destination": "/legacy/presets/sortable/use-sortable"
},
{
"source": "/presets/sortable/:slug*",
"destination": "/legacy/presets/sortable/:slug*"
},
{
"source": "/guides/:slug*",
"destination": "/legacy/guides/:slug*"
},
{
"source": "/react/migration",
"destination": "/react/guides/migration"
}
],
"logo": "/images/logo/logo.svg",
"navbar": {
"links": [
{
"label": "Examples",
"href": "https://examples.dndkit.com"
},
{
"label": "Community",
"href": "https://dnd-kit.slack.com/"
}
],
"primary": {
"type": "button",
"label": "Github",
"href": "https://github.com/clauderic/dnd-kit"
}
},
"footer": {
"socials": {
"x": "https://x.com/dndkit",
"github": "https://github.com/clauderic/dnd-kit"
}
}
}
================================================
FILE: apps/docs/extend/modifiers.mdx
================================================
---
title: 'Modifiers'
description: 'Transform and constrain drag movement.'
icon: 'arrows-from-line'
---
## Overview
Modifiers transform the movement of draggable elements during drag operations. They can restrict movement to axes or boundaries, adjust positioning, or implement any custom movement logic.
## Built-in Modifiers
### Abstract Modifiers
Available in `@dnd-kit/abstract/modifiers`, these modifiers are environment-agnostic:
<CardGroup cols={2}>
<Card title="RestrictToHorizontalAxis">
Constrain movement to the horizontal axis only
</Card>
<Card title="RestrictToVerticalAxis">
Constrain movement to the vertical axis only
</Card>
<Card title="Snap">
Snap movement to a grid with configurable size
</Card>
</CardGroup>
Example using axis restriction:
```ts
import {RestrictToVerticalAxis} from '@dnd-kit/abstract/modifiers';
// Only allow vertical movement
const manager = new DragDropManager({
modifiers: [RestrictToVerticalAxis],
});
```
Example combining modifiers:
```ts
import {
Snap,
RestrictToHorizontalAxis
} from '@dnd-kit/abstract/modifiers';
// Horizontal movement that snaps to a grid
const manager = new DragDropManager({
modifiers: [
RestrictToHorizontalAxis,
Snap.configure({
size: {
x: 20, // Snap every 20px horizontally
y: 0 // No vertical snapping (already restricted)
}
})
],
});
```
<Info>
Modifiers are applied in order, so place restrictions before transformations.
</Info>
### Concrete Modifiers
Environment-specific modifiers for the DOM, available in `@dnd-kit/dom/modifiers`:
<CardGroup cols={2}>
<Card title="RestrictToWindow">
Constrain movement within the window boundaries
</Card>
<Card title="RestrictToElement">
Constrain movement within a container element
</Card>
</CardGroup>
## Usage
Modifiers can be applied globally or per draggable element. The `modifiers` option accepts either an array or a function that receives the default modifiers.
### Extending defaults
Use the function form to add modifiers without replacing the defaults:
```ts
import {DragDropManager} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';
const manager = new DragDropManager({
modifiers: (defaults) => [...defaults, RestrictToWindow],
});
```
### Replacing defaults
Pass an array to fully replace the default modifiers:
```ts
import {DragDropManager} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';
const manager = new DragDropManager({
modifiers: [RestrictToWindow],
});
```
### Per-draggable modifiers
Modifiers can also be configured on individual draggable elements:
```ts
import {RestrictToElement} from '@dnd-kit/dom/modifiers';
const draggable = new Draggable({
id: 'draggable-1',
element,
modifiers: [
RestrictToElement.configure({
element: containerElement
})
],
}, manager);
```
<Info>
Local modifiers on draggable elements take precedence over global modifiers.
</Info>
## Creating Custom Modifiers
Create custom modifiers by extending the `Modifier` class:
```ts
import {Modifier} from '@dnd-kit/abstract';
import type {Coordinates} from '@dnd-kit/geometry';
interface GridOptions {
gridSize: number;
}
class SnapToGrid extends Modifier {
constructor(manager, options?: GridOptions) {
super(manager, options);
}
public apply(operation): Coordinates {
if (this.disabled) return operation.transform;
const {gridSize = 20} = this.options ?? {};
const {transform} = operation;
return {
x: Math.round(transform.x / gridSize) * gridSize,
y: Math.round(transform.y / gridSize) * gridSize,
};
}
}
```
## Modifier Lifecycle
1. **Construction**
- Modifier instance created
- Options configured
2. **Application**
- `apply()` called during drag
- Transforms coordinates
- Can access drag operation state
3. **Cleanup**
- Resources cleaned up on destroy
## API Reference
### Base Modifier Class
<ParamField path="manager" type="DragDropManager" required>
Reference to the drag and drop manager instance.
</ParamField>
<ParamField path="options" type="Record<string, any>">
Optional configuration for the modifier.
</ParamField>
### Methods
- `apply(operation)`: Transform drag coordinates
- `enable()`: Enable the modifier
- `disable()`: Disable the modifier
- `isDisabled()`: Check if modifier is disabled
- `destroy()`: Clean up resources
### Static Methods
- `configure(options)`: Create configured modifier
```ts
const snapToGrid = SnapToGrid.configure({
gridSize: 10
});
const manager = new DragDropManager({
modifiers: [snapToGrid]
});
```
================================================
FILE: apps/docs/extend/plugins/accessibility.mdx
================================================
---
title: 'Accessibility'
description: 'Manages ARIA attributes and screen reader announcements for drag and drop operations.'
icon: 'universal-access'
---
## Overview
The `Accessibility` plugin provides screen reader support for drag and drop operations. It automatically manages ARIA attributes on draggable elements, provides screen reader instructions, and announces drag events via a live region.
This plugin is included by default when creating a new `DragDropManager`.
## Configuration
Use `Accessibility.configure()` to customize announcements, screen reader instructions, and other options:
<CodeGroup>
```ts Vanilla
import {DragDropManager, Accessibility} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
Accessibility.configure({
announcements: {
dragstart({operation: {source}}) {
if (!source) return;
return `Started dragging ${source.id}`;
},
dragover({operation: {source, target}}) {
if (!source || !target) return;
return `${source.id} is over ${target.id}`;
},
dragend({operation: {source, target}, canceled}) {
if (!source) return;
if (canceled) return `Dragging canceled`;
return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
},
},
}),
],
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {Accessibility} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
Accessibility.configure({
announcements: {
dragstart({operation: {source}}) {
if (!source) return;
return `Started dragging ${source.id}`;
},
dragover({operation: {source, target}}) {
if (!source || !target) return;
return `${source.id} is over ${target.id}`;
},
dragend({operation: {source, target}, canceled}) {
if (!source) return;
if (canceled) return `Dragging canceled`;
return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
},
},
}),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Accessibility} from '@dnd-kit/dom';
const plugins = (defaults) => [
...defaults,
Accessibility.configure({
announcements: {
dragstart({operation: {source}}) {
if (!source) return;
return `Started dragging ${source.id}`;
},
dragover({operation: {source, target}}) {
if (!source || !target) return;
return `${source.id} is over ${target.id}`;
},
dragend({operation: {source, target}, canceled}) {
if (!source) return;
if (canceled) return `Dragging canceled`;
return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
},
},
}),
];
</script>
<template>
<DragDropProvider :plugins="plugins">
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {Accessibility} from '@dnd-kit/dom';
const plugins = (defaults) => [
...defaults,
Accessibility.configure({
announcements: {
dragstart({operation: {source}}) {
if (!source) return;
return `Started dragging ${source.id}`;
},
dragover({operation: {source, target}}) {
if (!source || !target) return;
return `${source.id} is over ${target.id}`;
},
dragend({operation: {source, target}, canceled}) {
if (!source) return;
if (canceled) return `Dragging canceled`;
return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
},
},
}),
];
</script>
<DragDropProvider {plugins}>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {Accessibility} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
Accessibility.configure({
announcements: {
dragstart({operation: {source}}) {
if (!source) return;
return `Started dragging ${source.id}`;
},
dragover({operation: {source, target}}) {
if (!source || !target) return;
return `${source.id} is over ${target.id}`;
},
dragend({operation: {source, target}, canceled}) {
if (!source) return;
if (canceled) return `Dragging canceled`;
return `Dropped ${source.id} on ${target?.id ?? 'nothing'}`;
},
},
}),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
## ARIA Attributes
The plugin automatically sets the following attributes on draggable activator elements (the handle or, if no handle is set, the draggable element itself):
- `role="button"` — unless the element is already a `<button>` or has an explicit `role`
- `aria-roledescription="draggable"`
- `aria-describedby` — points to a hidden element containing screen reader instructions
- `aria-pressed` and `aria-grabbed` — reflect the current dragging state
- `aria-disabled` — reflects the disabled state of the draggable
- `tabindex="0"` — ensures the element is focusable (added when the element is not natively focusable)
## Default Announcements
The plugin ships with default announcements for the `dragstart`, `dragover`, and `dragend` events:
- **dragstart**: `"Picked up draggable item {id}."`
- **dragover** (over a target): `"Draggable item {id} was moved over droppable target {targetId}."`
- **dragover** (no target): `"Draggable item {id} is no longer over a droppable target."`
- **dragend** (dropped on target): `"Draggable item {id} was dropped over droppable target {targetId}"`
- **dragend** (canceled): `"Dragging was cancelled. Draggable item {id} was dropped."`
- **dragend** (no target): `"Draggable item {id} was dropped."`
## Default Screen Reader Instructions
The default instructions read:
> To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item in a given direction. Press space again to drop the item in its new position, or press escape to cancel.
## Options
<ParamField path="announcements" type="Announcements">
Custom announcement functions for drag events. Each function receives the event and the `DragDropManager` instance, and returns a string to announce (or `undefined` to skip the announcement).
```ts
interface Announcements {
dragstart: (event, manager) => string | undefined;
dragmove?: (event, manager) => string | undefined;
dragover?: (event, manager) => string | undefined;
dragend: (event, manager) => string | undefined;
}
```
</ParamField>
<ParamField path="screenReaderInstructions" type="ScreenReaderInstructions">
Custom screen reader instructions displayed in a visually hidden element that is referenced by `aria-describedby` on draggable activator elements.
```ts
interface ScreenReaderInstructions {
draggable: string;
}
```
</ParamField>
<ParamField path="debounce" type="number" default="500">
The number of milliseconds to debounce announcement updates. Only `dragover` and `dragmove` announcements are debounced; `dragstart` and `dragend` announcements are dispatched immediately.
</ParamField>
<ParamField path="id" type="string">
A stable identifier used to generate the `id` attributes for the hidden description and live region elements. When not provided, a unique id is generated automatically. Useful when you need to reference these elements from outside the plugin.
</ParamField>
<ParamField path="idPrefix" type="{description?: string; announcement?: string}">
Custom prefixes for the generated element ids.
Defaults to `{description: 'dnd-kit-description', announcement: 'dnd-kit-announcement'}`.
</ParamField>
================================================
FILE: apps/docs/extend/plugins/auto-scroller.mdx
================================================
---
title: 'AutoScroller'
description: 'Automatically scrolls containers when dragging near edges.'
icon: 'arrows-up-down'
---
## Overview
The `AutoScroller` plugin automatically scrolls scrollable containers when the pointer approaches their edges during a drag operation. It works in conjunction with the internal `Scroller` plugin that detects scrollable ancestors and computes scroll intent.
This plugin is included by default when creating a new `DragDropManager`.
## Behavior
When a drag operation is in progress and the pointer is near the edge of a scrollable container, the `AutoScroller` will:
1. Detect the nearest scrollable ancestor of the element under the pointer.
2. Compute the scroll direction and speed based on the pointer's proximity to the edge.
3. Continuously scroll the container at the computed speed until the pointer moves away from the edge or the container can no longer scroll in that direction.
The scroll speed increases as the pointer gets closer to the edge of the container.
## Configuration
Use `AutoScroller.configure()` to customize the scroll speed and activation zone:
<CodeGroup>
```ts Vanilla
import {DragDropManager, AutoScroller} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
AutoScroller.configure({
acceleration: 15,
threshold: { x: 0, y: 0.3 },
}),
],
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {AutoScroller} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
AutoScroller.configure({
acceleration: 15,
threshold: { x: 0, y: 0.3 },
}),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {AutoScroller} from '@dnd-kit/dom';
</script>
<template>
<DragDropProvider
:plugins="(defaults) => [...defaults, AutoScroller.configure({ acceleration: 15, threshold: { x: 0, y: 0.3 } })]"
>
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {AutoScroller} from '@dnd-kit/dom';
</script>
<DragDropProvider
plugins={(defaults) => [...defaults, AutoScroller.configure({ acceleration: 15, threshold: { x: 0, y: 0.3 } })]}
>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {AutoScroller} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
AutoScroller.configure({
acceleration: 15,
threshold: { x: 0, y: 0.3 },
}),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
## Options
<ParamField path="acceleration" type="number" default="25">
Base scroll speed multiplier. The scroll speed scales linearly as the pointer approaches the edge of a scrollable container — higher values scroll faster.
</ParamField>
<ParamField path="threshold" type="number | { x: number; y: number }" default="{ x: 0.2, y: 0.2 }">
Percentage of container dimensions that defines the scroll activation zone. For example, `0.2` means scrolling activates when the pointer enters the outer 20% of a scrollable container.
A single number applies to both axes. Use `{ x, y }` for per-axis control. Setting an axis to `0` disables auto-scrolling on that axis.
</ParamField>
## Disabling
To disable auto-scrolling, omit the `AutoScroller` from the plugins array:
<CodeGroup>
```ts Vanilla
import {DragDropManager, AutoScroller} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => defaults.filter((plugin) => plugin !== AutoScroller),
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {AutoScroller} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => defaults.filter((plugin) => plugin !== AutoScroller)}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {AutoScroller} from '@dnd-kit/dom';
</script>
<template>
<DragDropProvider
:plugins="(defaults) => defaults.filter((plugin) => plugin !== AutoScroller)"
>
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {AutoScroller} from '@dnd-kit/dom';
</script>
<DragDropProvider
plugins={(defaults) => defaults.filter((plugin) => plugin !== AutoScroller)}
>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {AutoScroller} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => defaults.filter((plugin) => plugin !== AutoScroller)}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
To dynamically disable auto-scrolling at runtime, access the plugin instance from the manager registry and call its `disable()` method:
<CodeGroup>
```ts Vanilla
import {DragDropManager, AutoScroller} from '@dnd-kit/dom';
const manager = new DragDropManager();
const autoScroller = manager.registry.plugins.get(AutoScroller);
// Disable auto-scrolling
autoScroller.disable();
// Re-enable auto-scrolling
autoScroller.enable();
```
```tsx React
import {useDragDropManager} from '@dnd-kit/react';
import {AutoScroller} from '@dnd-kit/dom';
function AutoScrollToggle() {
const manager = useDragDropManager();
const autoScroller = manager.registry.plugins.get(AutoScroller);
return (
<button onClick={() => {
autoScroller.disabled
? autoScroller.enable()
: autoScroller.disable();
}}>
Toggle auto-scroll
</button>
);
}
```
```vue Vue
<script setup>
import {useDragDropManager} from '@dnd-kit/vue';
import {AutoScroller} from '@dnd-kit/dom';
const manager = useDragDropManager();
const autoScroller = manager.registry.plugins.get(AutoScroller);
function toggle() {
autoScroller.disabled
? autoScroller.enable()
: autoScroller.disable();
}
</script>
<template>
<button @click="toggle">Toggle auto-scroll</button>
</template>
```
```svelte Svelte
<script>
import {getDragDropManager} from '@dnd-kit/svelte';
import {AutoScroller} from '@dnd-kit/dom';
const manager = getDragDropManager();
const autoScroller = manager.registry.plugins.get(AutoScroller);
function toggle() {
autoScroller.disabled
? autoScroller.enable()
: autoScroller.disable();
}
</script>
<button onclick={toggle}>Toggle auto-scroll</button>
```
```tsx Solid
import {useDragDropManager} from '@dnd-kit/solid';
import {AutoScroller} from '@dnd-kit/dom';
function AutoScrollToggle() {
const manager = useDragDropManager();
const autoScroller = manager.registry.plugins.get(AutoScroller);
return (
<button onClick={() => {
autoScroller.disabled
? autoScroller.enable()
: autoScroller.disable();
}}>
Toggle auto-scroll
</button>
);
}
```
</CodeGroup>
================================================
FILE: apps/docs/extend/plugins/cursor.mdx
================================================
---
title: 'Cursor'
description: 'Updates cursor styles during drag operations.'
icon: 'arrow-pointer'
---
## Overview
The `Cursor` plugin overrides the cursor style on the entire document while a drag operation is in progress, providing visual feedback that an element is being dragged.
This plugin is included by default when creating a new `DragDropManager`.
## Configuration
Use `Cursor.configure()` to customize the cursor style:
<CodeGroup>
```ts Vanilla
import {DragDropManager, Cursor} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
Cursor.configure({ cursor: 'move' }),
],
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {Cursor} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
Cursor.configure({ cursor: 'move' }),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Cursor} from '@dnd-kit/dom';
</script>
<template>
<DragDropProvider
:plugins="(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]"
>
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {Cursor} from '@dnd-kit/dom';
</script>
<DragDropProvider
plugins={(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]}
>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {Cursor} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
Cursor.configure({ cursor: 'move' }),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
## Options
<ParamField path="cursor" type="string" default="grabbing">
The CSS cursor value to apply to the document body during drag operations.
</ParamField>
================================================
FILE: apps/docs/extend/plugins/debug.mdx
================================================
---
title: 'Debug'
description: 'Visualize drag and drop operations for debugging.'
icon: 'bug'
---
import {Story} from '/snippets/story.mdx';
## Overview
The `Debug` plugin renders visual overlays that help you understand what's happening during drag and drop operations. It displays the shapes of draggable and droppable elements, highlights collision targets, and shows the current pointer position.
This plugin is **not** included by default — add it during development to help debug layout, collision, and positioning issues.
## Usage
<CodeGroup>
```ts Vanilla
import {DragDropManager} from '@dnd-kit/dom';
import {Debug} from '@dnd-kit/dom/plugins/debug';
const manager = new DragDropManager({
plugins: (defaults) => [...defaults, Debug],
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {Debug} from '@dnd-kit/dom/plugins/debug';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [Debug, ...defaults]}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Debug} from '@dnd-kit/dom/plugins/debug';
</script>
<template>
<DragDropProvider
:plugins="(defaults) => [Debug, ...defaults]"
>
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {Debug} from '@dnd-kit/dom/plugins/debug';
</script>
<DragDropProvider
plugins={(defaults) => [Debug, ...defaults]}
>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {Debug} from '@dnd-kit/dom/plugins/debug';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [Debug, ...defaults]}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
<Warning>
The `Debug` plugin is intended for development only. Remove it before shipping to production.
</Warning>
## Example
<Story id="react-sortable-vertical-list--debug" height="320" />
## What It Shows
- **Draggable shape** (blue overlay): The computed bounding rectangle of the element being dragged.
- **Droppable zones** (gray overlays): The bounding rectangles of all registered droppable elements.
- **Drop target** (green overlay): The current drop target.
- **Top collisions** (yellow overlays): The next closest collision candidates.
- **Pointer crosshair**: The current pointer position tracked by the drag operation.
================================================
FILE: apps/docs/extend/plugins/feedback.mdx
================================================
---
title: 'Feedback'
description: 'Manages visual feedback during drag operations, including top layer promotion and drop animations.'
icon: 'eye'
---
## Overview
The `Feedback` plugin manages the visual appearance of elements during drag operations. It promotes dragged elements to the browser's [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) using the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API), and injects CSS rules to handle positioning and to reset browser default popover styles.
This plugin is included by default when creating a new `DragDropManager`.
## Configuration
Use `Feedback.configure()` to customize the drop animation or other options:
<CodeGroup>
```ts Vanilla
import {DragDropManager, Feedback} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
Feedback.configure({ dropAnimation: null }),
],
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {Feedback} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
Feedback.configure({ dropAnimation: null }),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Feedback} from '@dnd-kit/dom';
</script>
<template>
<DragDropProvider
:plugins="(defaults) => [...defaults, Feedback.configure({ dropAnimation: null })]"
>
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {Feedback} from '@dnd-kit/dom';
</script>
<DragDropProvider
plugins={(defaults) => [...defaults, Feedback.configure({ dropAnimation: null })]}
>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {Feedback} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
Feedback.configure({ dropAnimation: null }),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
## Per-entity configuration
In addition to global configuration on the `DragDropManager`, you can configure the Feedback plugin on individual draggable or sortable entities using `Feedback.configure()` in the entity's `plugins` array. Per-entity options override the global configuration for that entity.
<CodeGroup>
```tsx React
import {useDraggable} from '@dnd-kit/react';
import {Feedback} from '@dnd-kit/dom';
function Draggable({id}) {
const {ref} = useDraggable({
id,
plugins: [
Feedback.configure({
feedback: 'clone',
dropAnimation: null,
}),
],
});
return <button ref={ref}>Draggable</button>;
}
```
```ts Vanilla
import {Draggable, Feedback} from '@dnd-kit/dom';
const draggable = new Draggable({
id: 'draggable-1',
element,
plugins: [
Feedback.configure({
feedback: 'clone',
dropAnimation: null,
}),
],
}, manager);
```
</CodeGroup>
### Per-entity options
<ParamField path="feedback" type="FeedbackType">
The type of visual feedback to show during drag for this entity.
- `'default'` — the original element moves with the drag
- `'clone'` — a copy of the element stays in place while the original moves
- `'move'` — the element moves without a placeholder
- `'none'` — no visual feedback (useful for custom drag overlays)
</ParamField>
<ParamField path="dropAnimation" type="DropAnimation | null">
Customize or disable the drop animation for this entity. Overrides the global `dropAnimation` option.
</ParamField>
## Global options
<ParamField path="dropAnimation" type="DropAnimation | null">
Customize or disable the drop animation that plays when a dragged element is released.
- `undefined` (default) — use the built-in drop animation
- `null` — disable the drop animation entirely
- `DropAnimationOptions` — customize the duration and easing of the built-in animation
- `DropAnimationFunction` — provide a fully custom animation function
</ParamField>
<ParamField path="keyboardTransition" type="KeyboardTransition | null">
Customize or disable the CSS transition applied when moving elements via keyboard.
By default, keyboard-driven moves animate with `250ms cubic-bezier(0.25, 1, 0.5, 1)`. This transition is automatically disabled when the user prefers reduced motion.
- `undefined` (default) — use the built-in keyboard transition
- `null` — disable the transition (moves are instant, like pointer operations)
- `{ duration, easing }` — customize the transition duration (in ms) and CSS easing function
</ParamField>
<ParamField path="rootElement" type="Element | ((source: Draggable) => Element)">
An element (or a function returning one) to use as the root container for the dragged element. When set, the dragged element is moved into this container during the drag operation.
</ParamField>
## CSS Cascade Layer
The Feedback plugin uses a CSS cascade layer named `dnd-kit` to reset user-agent popover styles (such as `background`, `border`, `margin`, and `padding`) that browsers apply to elements promoted to the top layer.
By default, this layer is injected at the beginning of the document's `<head>`, giving it the lowest cascade priority. This means your styles will take precedence without needing `!important`.
If you use a CSS framework that defines its own cascade layers (such as Tailwind CSS v4), you can explicitly declare the `dnd-kit` layer first to ensure it has the lowest priority:
```css
@layer dnd-kit, base, components, utilities;
```
================================================
FILE: apps/docs/extend/plugins/style-injector.mdx
================================================
---
title: 'StyleInjector'
description: 'Centralized style injection for drag and drop operations.'
icon: 'palette'
---
## Overview
The `StyleInjector` plugin is the centralized style injection layer used by dnd-kit. It manages CSS rules that need to be present during drag operations, handling injection into both `Document` and `ShadowRoot` contexts.
This plugin is always included automatically — you do not need to add it to your plugins array.
## How It Works
Other plugins (such as [Feedback](/extend/plugins/feedback)) register CSS rules with the `StyleInjector`. During a drag operation, the `StyleInjector` automatically injects those rules into the relevant document and shadow roots, and cleans them up when the operation ends.
### Document Roots
For `Document` roots, CSS is injected via a `<style>` element prepended to `<head>`. This ensures that any `@layer` declarations appear before layers from regular stylesheets, giving them the lowest cascade priority.
A `MutationObserver` monitors the `<head>` to re-inject the `<style>` element if it is removed by other scripts during a drag operation.
### Shadow DOM Roots
For `ShadowRoot` roots, CSS is injected via [`adoptedStyleSheets`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets) to avoid DOM side effects like interfering with `:first-child` or `:nth-child` selectors inside the shadow tree.
## Configuration
Use `StyleInjector.configure()` to set a CSP nonce that will be applied to all injected `<style>` elements:
<CodeGroup>
```ts Vanilla
import {DragDropManager, StyleInjector} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
StyleInjector.configure({ nonce: 'abc123' }),
],
});
```
```tsx React
import {DragDropProvider} from '@dnd-kit/react';
import {StyleInjector} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
StyleInjector.configure({ nonce: 'abc123' }),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
```vue Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {StyleInjector} from '@dnd-kit/dom';
</script>
<template>
<DragDropProvider
:plugins="(defaults) => [...defaults, StyleInjector.configure({ nonce: 'abc123' })]"
>
<!-- ... -->
</DragDropProvider>
</template>
```
```svelte Svelte
<script>
import {DragDropProvider} from '@dnd-kit/svelte';
import {StyleInjector} from '@dnd-kit/dom';
</script>
<DragDropProvider
plugins={(defaults) => [...defaults, StyleInjector.configure({ nonce: 'abc123' })]}
>
<!-- ... -->
</DragDropProvider>
```
```tsx Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {StyleInjector} from '@dnd-kit/dom';
function App() {
return (
<DragDropProvider
plugins={(defaults) => [
...defaults,
StyleInjector.configure({ nonce: 'abc123' }),
]}
>
{/* ... */}
</DragDropProvider>
);
}
```
</CodeGroup>
<Info>
The `StyleInjector` is the single place to configure CSP nonces. All built-in plugins that inject styles (such as [Feedback](/extend/plugins/feedback), [Cursor](/extend/plugins/cursor), and [PreventSelection](/extend/plugins/prevent-selection)) route their style injection through the `StyleInjector`.
</Info>
## Options
<ParamField path="nonce" type="string">
A nonce value applied to all `<style>` elements injected into `Document` roots. Required when your site uses a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) that restricts inline styles.
</ParamField>
## API
### `register(cssRules: string)`
Registers CSS rules to be injected into the active drag operation's document and shadow roots. Returns a cleanup function that unregisters the rules.
```ts
const styleInjector = manager.registry.plugins.get(StyleInjector);
const unregister = styleInjector.register(`
.my-drag-styles { opacity: 0.5; }
`);
// Later, when no longer needed:
unregister();
```
### `addRoot(root: Document | ShadowRoot)`
Adds an additional root to track for style injection. This is useful when a dragged element is rendered in a different document or shadow root than the drag source. Returns a cleanup function that removes the root.
```ts
const removeRoot = styleInjector.addRoot(shadowRoot);
// Later:
removeRoot();
```
================================================
FILE: apps/docs/extend/plugins.mdx
================================================
---
title: 'Plugins'
description: 'Extend beyond the core functionality with plugins.'
sidebarTitle: 'Overview'
---
## Overview
Plugins are a powerful way to extend the core functionality of @dnd-kit. They can be used to add new features, modify existing behavior, or react to drag and drop operations.
## Built-in Plugins
Several plugins are included by default when creating a new `DragDropManager`:
<CardGroup cols={2}>
<Card
title="Accessibility"
icon="universal-access"
href="./plugins/accessibility"
>
Manages ARIA attributes and screen reader announcements for drag and drop operations.
</Card>
<Card
title="AutoScroller"
icon="arrows-up-down"
href="./plugins/auto-scroller"
>
Automatically scrolls containers when dragging near edges.
</Card>
<Card
title="Cursor"
icon="arrow-pointer"
href="./plugins/cursor"
>
Updates cursor styles during drag operations.
</Card>
<Card
title="Debug"
icon="bug"
href="./plugins/debug"
>
Visualize drag shapes, droppable zones, and collisions for debugging.
</Card>
<Card
title="Feedback"
icon="eye"
href="./plugins/feedback"
>
Manages visual feedback during dragging, including top layer promotion and drop animations.
</Card>
<Card
title="StyleInjector"
icon="palette"
href="./plugins/style-injector"
>
Centralized style injection with CSP nonce support.
</Card>
</CardGroup>
## Using Plugins
The `plugins` option accepts either an array or a function that receives the default plugins.
### Extending defaults
Use the function form to add plugins to the defaults or configure existing ones, without replacing them:
```ts
import {DragDropManager} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [...defaults, MyPlugin],
});
```
```ts
import {DragDropManager, Feedback} from '@dnd-kit/dom';
const manager = new DragDropManager({
plugins: (defaults) => [
...defaults,
Feedback.configure({ dropAnimation: null }),
],
});
```
### Replacing defaults
Pass an array to fully replace the default plugins:
```ts
const manager = new DragDropManager({
plugins: [
MyPlugin.configure({ delay: 500 }),
AutoScroller,
]
});
```
## Creating a Plugin
To create a custom plugin, extend the `Plugin` class:
```ts
import {Plugin} from '@dnd-kit/abstract';
interface MyPluginOptions {
delay?: number;
}
class MyPlugin extends Plugin {
constructor(manager, options?: MyPluginOptions) {
super(manager, options);
this.registerEffect(() => {
const {monitor} = this.manager;
const cleanup = monitor.addEventListener('dragstart', (event) => {
console.log('Drag started:', event.operation.source.id);
});
return cleanup;
});
}
public customMethod() {
if (this.disabled) return;
// Custom functionality
}
}
```
## Plugin Lifecycle
1. **Construction**: Plugin instance created with manager reference
2. **Configuration**: Options applied if provided
3. **Registration**: Plugin registered with manager
4. **Operation**: Plugin effects are run
5. **Cleanup**: Plugin destroyed when manager is destroyed
## API Reference
### Plugin Class
The base class for all plugins:
<ParamField path="manager" type="DragDropManager" required>
Reference to the drag and drop manager instance.
</ParamField>
<ParamField path="options" type="PluginOptions">
Optional configuration options for the plugin.
</ParamField>
### Properties
- `disabled`: Whether the plugin is currently disabled
- `options`: Current plugin options
### Methods
- `enable()`: Enable the plugin
- `disable()`: Disable the plugin
- `isDisabled()`: Check if plugin is disabled
- `configure(options)`: Update plugin options
- `destroy()`: Clean up plugin resources
- `registerEffect(callback)`: Register a reactive effect
### Static Methods
- `configure(options)`: Create a configured plugin descriptor
```ts
const configuredPlugin = MyPlugin.configure({
delay: 500
});
const manager = new DragDropManager({
plugins: [configuredPlugin]
});
```
### Effects
Plugins can register effects that automatically clean up:
```ts
class MyPlugin extends Plugin {
constructor(manager) {
super(manager);
this.registerEffect(() => {
const interval = setInterval(() => {
// Do something periodically
}, 100);
return () => clearInterval(interval);
});
}
}
```
### Best Practices
1. **Clean Up Resources**: Always clean up listeners and timers in the `destroy` method
2. **Check Disabled State**: Check `this.disabled` before performing operations
3. **Use Type Safety**: Leverage TypeScript for better type checking
4. **Document Options**: Clearly document all available options
5. **Follow Patterns**: Study built-in plugins for patterns and conventions
================================================
FILE: apps/docs/extend/sensors/keyboard-sensor.mdx
================================================
---
title: 'Keyboard Sensor'
description: 'Detect keyboard input to initiate drag and drop operations.'
icon: 'keyboard'
---
## Overview
The Keyboard sensor enables keyboard-based drag and drop interactions. It is enabled by default in the [DragDropManager](/concepts/drag-drop-manager).
## Usage
```ts
import {DragDropManager} from '@dnd-kit/dom';
import {KeyboardSensor} from '@dnd-kit/dom/sensors';
const manager = new DragDropManager({
sensors: [
KeyboardSensor.configure({
keyboardCodes: {
start: ['Space', 'Enter'],
cancel: ['Escape'],
end: ['Space', 'Enter'],
up: ['ArrowUp'],
down: ['ArrowDown'],
left: ['ArrowLeft'],
right: ['ArrowRight'],
},
}),
],
});
```
## Default Key Bindings
The Keyboard sensor comes with these default key bindings:
```ts
const defaultKeyboardCodes = {
start: ['Space', 'Enter'], // Start dragging
cancel: ['Escape'], // Cancel drag operation
end: ['Space', 'Enter'], // End dragging
up: ['ArrowUp'], // Move up
down: ['ArrowDown'], // Move down
left: ['ArrowLeft'], // Move left
right: ['ArrowRight'], // Move right
};
```
## Customizing Key Bindings
You can customize which keys trigger different actions:
```ts
KeyboardSensor.configure({
keyboardCodes: {
// Use Tab to start/end dragging
start: ['Tab'],
end: ['Tab'],
// Use WASD for movement
up: ['KeyW'],
down: ['KeyS'],
left: ['KeyA'],
right: ['KeyD'],
// Additional cancel keys
cancel: ['Escape', 'KeyQ'],
},
});
```
## Default behavior
By default, each key press moves the dragged item by 10 pixels. Hold <kbd>Shift</kbd> to move by 50 pixels instead.
## API Reference
### Options
<ParamField path="keyboardCodes" type="KeyboardCodes">
Configure which keyboard codes trigger different actions:
```ts
interface KeyboardCodes {
start: KeyCode[]; // Start dragging
cancel: KeyCode[]; // Cancel operation
end: KeyCode[]; // End dragging
up: KeyCode[]; // Move up
down: KeyCode[]; // Move down
left: KeyCode[]; // Move left
right: KeyCode[]; // Move right
}
type KeyCode = KeyboardEvent['code'];
```
</ParamField>
### Events
The Keyboard sensor handles these events:
- `keydown`: Key press detection
- `keyup`: Key release detection
### Activation
The sensor activates when:
1. A draggable element or its handle has focus
2. A configured start key is pressed
3. The element isn't disabled
### Best Practices
1. Provide clear focus indicators:
- Use visible focus rings
- Maintain sufficient contrast
2. Support screen readers:
- Use proper ARIA attributes
- Provide clear instructions
3. Consider key combinations:
- Avoid conflicts with browser shortcuts
- Support standard keyboard patterns
================================================
FILE: apps/docs/extend/sensors/pointer-sensor.mdx
================================================
---
title: 'Pointer Sensor'
description: 'Detect pointer events to initiate drag and drop operations.'
icon: 'arrow-pointer'
---
## Overview
The Pointer sensor responds to [Pointer events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) for mouse, touch, and pen input. It is enabled by default in the [DragDropManager](/concepts/drag-drop-manager).
## Usage
```ts
import {DragDropManager} from '@dnd-kit/dom';
import {PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';
const manager = new DragDropManager({
sensors: [
PointerSensor.configure({
activationConstraints: [
// Start dragging after moving 5px
new PointerActivationConstraints.Distance({value: 5}),
// Or after holding for 200ms with 10px tolerance
new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),
],
}),
],
});
```
## Activation Constraints
The Pointer sensor supports composable activation constraints through the `PointerActivationConstraints` class. Multiple constraints can be combined to create sophisticated activation behaviors.
### Distance Constraint
Activates dragging after the pointer moves a certain distance:
```ts
import {PointerActivationConstraints} from '@dnd-kit/dom';
PointerSensor.configure({
activationConstraints: [
new PointerActivationConstraints.Distance({
// Required distance in pixels
value: 5,
// Optional tolerance - aborts if exceeded
tolerance: 10,
}),
],
});
```
The `tolerance` option defines a movement threshold that, if exceeded, will abort the activation. This is useful for distinguishing between intentional drags and accidental movements.
### Delay Constraint
Activates dragging after holding the pointer for a duration:
```ts
import {PointerActivationConstraints} from '@dnd-kit/dom';
PointerSensor.configure({
activationConstraints: [
new PointerActivationConstraints.Delay({
// Required hold duration in ms
value: 200,
// Movement tolerance during delay (in pixels)
tolerance: 5,
}),
],
});
```
The `tolerance` option specifies how much the pointer can move during the delay period before the activation is aborted.
### Combining Constraints
Multiple constraints can be combined in an array. The drag operation activates when any constraint is satisfied:
```ts
PointerSensor.configure({
activationConstraints: [
// Activate after 200ms delay OR 5px movement
new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),
new PointerActivationConstraints.Distance({value: 5}),
],
});
```
## Default Behavior
By default, the Pointer sensor uses different activation constraints based on the pointer type and context:
- **Mouse on handle**: Immediate activation
- **Touch**: 250ms delay with 5px tolerance
- **Text inputs**: 200ms delay with 0px tolerance
- **Other pointers**: 200ms delay with 10px tolerance + 5px distance
You can customize this behavior by providing a function that returns constraints based on the event and source:
```ts
import {PointerActivationConstraints} from '@dnd-kit/dom';
PointerSensor.configure({
activationConstraints(event, source) {
const {pointerType, target} = event;
// Custom constraints based on pointer type
switch (pointerType) {
case 'mouse':
return [
new PointerActivationConstraints.Distance({value: 5}),
];
case 'touch':
return [
new PointerActivationConstraints.Delay({value: 250, tolerance: 5}),
];
default:
return [
new PointerActivationConstraints.Delay({value: 200, tolerance: 10}),
new PointerActivationConstraints.Distance({value: 5}),
];
}
},
});
```
## API Reference
### Options
<ParamField path="activationConstraints" type="ActivationConstraints<PointerEvent> | (event: PointerEvent, source: Draggable) => ActivationConstraints<PointerEvent>">
Configure when dragging should start using an array of constraint instances:
```ts
import {PointerActivationConstraints} from '@dnd-kit/dom';
// Array of constraint instances
type ActivationConstraints<E extends Event> = ActivationConstraint<E>[];
// Distance type
type Distance = number | {x?: number; y?: number};
// Distance constraint
new PointerActivationConstraints.Distance({
value: number; // Required distance in pixels
tolerance?: Distance; // Optional abort threshold
});
// Delay constraint
new PointerActivationConstraints.Delay({
value: number; // Required duration in ms
tolerance: Distance; // Movement tolerance
});
```
Can be a fixed array of constraints or a function that returns constraints based on the event and source.
</ParamField>
### Built-in constraints
The `PointerActivationConstraints` class provides built-in constraint primitives. You can also create your own custom activation constraints by extending the `ActivationConstraint` class.
#### Distance
Activates dragging after the pointer moves a certain distance.
##### Options for `Distance`
<ParamField path="value" type="number" required>
Required distance in pixels.
</ParamField>
<ParamField path="tolerance" type="number | {x?: number; y?: number}" optional>
If specified, aborts activation if movement exceeds this threshold. Can be a number or an object with optional x and y properties.
</ParamField>
#### Delay
Activates dragging after holding the pointer for a duration.
##### Options
<ParamField path="value" type="number" required>
Required hold duration in milliseconds.
</ParamField>
<ParamField path="tolerance" type="number | {x?: number; y?: number}" optional>
Maximum movement allowed during delay. Can be a number or an object with optional x and y properties. Exceeding this aborts activation.
</ParamField>
### Events
The Pointer sensor handles these events:
- `pointerdown`: Initial pointer contact
- `pointermove`: Pointer movement
- `pointerup`: Pointer release
The sensor automatically binds listeners across all same-origin documents, enabling drag operations across same-origin iframes.
### Best Practices
1. Use appropriate constraints for different input types:
- Shorter delays for mouse
- Longer delays with tolerance for touch
- Distance constraints for precision
2. Consider accessibility:
- Don't rely solely on hover
- Provide clear activation feedback
- Support keyboard input via [KeyboardSensor](/extend/sensors/keyboard-sensor)
================================================
FILE: apps/docs/extend/sensors.mdx
================================================
---
title: 'Sensors'
description: 'Detect user input and translate it into drag and drop operations.'
sidebarTitle: 'Overview'
---
## Overview
Sensors detect user input and translate it into drag and drop operations. They handle the initiation, movement, and completion of drag operations from different input sources.
## Built-in Sensors
The `@dnd-kit/dom` package provides a set of built-in sensors that can be used to detect user input in the browser:
<CardGroup cols={2}>
<Card
title="Pointer"
icon="arrow-pointer"
href="./sensors/pointer-sensor"
>
Handles mouse, touch, and pen input with configurable activation constraints.
</Card>
<Card
title="Keyboard"
icon="keyboard"
href="./sensors/keyboard-sensor"
>
Enables keyboard navigation and activation using customizable key bindings.
</Card>
</CardGroup>
## Usage
Sensors can be configured both globally and per draggable element. The `sensors` option accepts either an array or a function that receives the default sensors.
### Extending defaults
Use the function form to configure or add sensors without replacing the defaults:
```ts
import {DragDropManager} from '@dnd-kit/dom';
import {PointerSensor, PointerActivationConstraints} from '@dnd-kit/dom';
const manager = new DragDropManager({
sensors: (defaults) => [
...defaults,
PointerSensor.configure({
activationConstraints: [
new PointerActivationConstraints.Distance({value: 5}),
],
}),
],
});
```
### Replacing defaults
Pass an array to fully replace the default sensors:
```ts
import {DragDropManager} from '@dnd-kit/dom';
import {
PointerSensor,
PointerActivationConstraints,
KeyboardSensor
} from '@dnd-kit/dom';
const manager = new DragDropManager({
sensors: [
PointerSensor.configure({
activationConstraints: [
new PointerActivationConstraints.Distance({value: 5}),
new PointerActivationConstraints.Delay({
value: 200,
tolerance: {x: 10, y: 5},
}),
]
}),
KeyboardSensor,
]
});
```
### Per-draggable sensors
Sensors can also be configured on individual draggable elements:
```ts
const draggable = new Draggable({
id: 'draggable-1',
element,
sensors: [KeyboardSensor],
}, manager);
```
<Info>
Local sensors configured on individual draggable elements take precedence over global sensors.
</Info>
## Creating Custom Sensors
You can create custom sensors by extending the `Sensor` class:
```ts
import {Sensor} from '@dnd-kit/abstract';
interface CustomSensorOptions {
delay?: number;
}
class CustomSensor extends Sensor {
constructor(manager, options?: CustomSensorOptions) {
super(manager, options);
}
public bind(source) {
// Register event listeners
const unbind = this.registerEffect(() => {
const target = source.handle ?? source.element;
if (!target) return;
const handleStart = (event) => {
if (this.disabled) return;
this.manager.actions.setDragSource(source.id);
this.manager.actions.start({
event,
coordinates: getCoordinates(event)
});
};
target.addEventListener('customstart', handleStart);
return () => {
target.removeEventListener('customstart', handleStart);
};
});
return unbind;
}
}
```
## Sensor Lifecycle
1. **Construction**
- Sensor instance created
- Options configured
- Initial setup performed
2. **Binding**
- Sensor bound to draggable element
- Event listeners registered
- Effects set up
3. **Operation**
- Input detected
- Coordinates tracked
- Drag operations managed
4. **Cleanup**
- Event listeners removed
- Effects cleaned up
- Resources released
## API Reference
### Base Sensor Class
<ParamField path="manager" type="DragDropManager" required>
Reference to the drag and drop manager instance.
</ParamField>
<ParamField path="options" type="SensorOptions">
Optional configuration options for the sensor.
</ParamField>
### Methods
- `bind(source: Draggable)`: Bind sensor to draggable element
- `enable()`: Enable the sensor
- `disable()`: Disable the sensor
- `isDisabled()`: Check if sensor is disabled
- `destroy()`: Clean up sensor resources
### Static Methods
- `configure(options)`: Create a configured sensor descriptor
```ts
const configuredSensor = CustomSensor.configure({
delay: 500
});
const manager = new DragDropManager({
sensors: [configuredSensor]
});
```
================================================
FILE: apps/docs/legacy/api-documentation/context-provider/collision-detection-algorithms.mdx
================================================
---
title: Collision detection algorithms
---
If you're familiar with how 2D games are built, you may have come across the notion of collision detection algorithms.
One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning rectangles that are not rotated. This form of collision detection is generally referred to as [Axis-Aligned Bounding Box](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Axis-Aligned_Bounding_Box) (AABB).
The built-in collision detection algorithms assume a rectangular bounding box.
> The bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants.\
> – Source: [MDN](https://developer.mozilla.org/en-US/docs/Glossary/bounding_box)
This means that even if the draggable or droppable nodes look round or triangular, their bounding boxes will still be rectangular:
If you'd like to use other shapes than rectangles for detecting collisions, build your own [custom collision detection algorithm](./collision-detection-algorithms#custom-collision-detection-strategies).
## Rectangle intersection
By default, [`DndContext`](./dnd-context) uses the **rectangle intersection** collision detection algorithm.
The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.
This means that in order for a draggable item to be considered **over** a droppable area, there needs to be an intersection between both rectangles:
## Closest center
While the rectangle intersection algorithm is well suited for most drag and drop use cases, it can be unforgiving, since it requires both the draggable and droppable bounding rectangles to come into direct contact and intersect.
For some use cases, such as [sortable](../../presets/sortable/) lists, using a more forgiving collision detection algorithm is recommended.
As its name suggests, the closest center algorithm finds the droppable container who's center is closest to the center of the bounding rectangle of the active draggable item:
## Closest corners
Like to the closest center algorithm, the closest corner algorithm doesn't require the draggable and droppable rectangles to intersect.
Rather, it measures the distance between all four corners of the active draggable item and the four corners of each droppable container to find the closest one.
The distance is measured from the top left corner of the draggable item to the top left corner of the droppable bounding rectangle, top right to top right, bottom left to bottom left, and bottom right to bottom right.
### **When should I use the closest corners algorithm instead of closest center?**
In most cases, the **closest center** algorithm works well, and is generally the recommended default for sortable lists because it provides a more forgiving experience than the **rectangle intersection algorithm**.
In general, the closest center and closest corners algorithms will yield the same results. However, when building interfaces where droppable containers are stacked on top of one another, for example, when building a Kanban, the closest center algorithm can sometimes return the underlaying droppable of the entire Kanban column rather than the droppable areas within that column.
In those situations, the **closest corners** algorithm is preferred and will yield results that are more aligned with what the human eye would predict:
## Pointer within
As its name suggests, the pointer within collision detection algorithm only registers collision when the pointer is contained within the bounding rectangle of other droppable containers.
This collision detection algorithm is well suited for high precision drag and drop interfaces.
<Info>
As its name suggests, this collision detection algorithm **only works with pointer-based sensors**. For this reason, we suggest you use [composition of collision detection algorithms](#composition-of-existing-algorithms) if you intend to use the `pointerWithin` collision detection algorithm so that you can fall back to a different collision detection algorithm for the Keyboard sensor.
</Info>
## Custom collision detection algorithms
In advanced use cases, you may want to build your own collision detection algorithms if the ones provided out of the box do not suit your use case.
You can either write a new collision detection algorithm from scratch, or compose two or more existing collision detection algorithms.
### Composition of existing algorithms
Sometimes, you don't need to build custom collision detection algorithms from scratch. Instead, you can compose existing collision algorithms to augment them.
A common example of this is when using the `pointerWithin` collision detection algorithm. As its name suggest, this collision detection algorithm depends on pointer coordinates, and therefore does not work when using other sensors like the Keyboard sensor. It's also a very high precision collision detection algorithm, so it can sometimes be helpful to fall back to a more tolerant collision detection algorithm when the `pointerWithin` algorithm does not return any collisions.
```javascript
import {pointerWithin, rectIntersection} from '@dnd-kit/core';
function customCollisionDetectionAlgorithm(args) {
// First, let's see if there are any collisions with the pointer
const pointerCollisions = pointerWithin(args);
// Collision detection algorithms return an array of collisions
if (pointerCollisions.length > 0) {
return pointerCollisions;
}
// If there are no collisions with the pointer, return rectangle intersections
return rectIntersection(args);
}
```
Another example where composition of existing algorithms can be useful is if you want some of your droppable containers to have a different collision detection algorithm than the others.
For instance, if you were building a sortable list that also supported moving items to a trash bin, you may want to compose both the `closestCenter` and `rectangleIntersection` collision detection algorithms.
From an implementation perspective, the custom intersection algorithm described in the example above would look like:
```javascript
import {closestCorners, rectIntersection} from '@dnd-kit/core';
function customCollisionDetectionAlgorithm({droppableContainers, ...args}) {
// First, let's see if the `trash` droppable rect is intersecting
const rectIntersectionCollisions = rectIntersection({
...args,
droppableContainers: droppableContainers.filter(({id}) => id === 'trash'),
});
// Collision detection algorithms return an array of collisions
if (rectIntersectionCollisions.length > 0) {
// The trash is intersecting, return early
return rectIntersectionCollisions;
}
// Compute other collisions
return closestCorners({
...args,
droppableContainers: droppableContainers.filter(({id}) => id !== 'trash'),
});
}
```
### Building custom collision detection algorithms
For advanced use cases or to detect collision between non-rectangular or non-axis aligned shapes, you'll want to build your own collision detection algorithms.
Here's an example to [detect collisions between circles](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Circle_Collision) instead of rectangles:
```javascript
/**
* Sort collisions in descending order (from greatest to smallest value)
*/
export function sortCollisionsDesc(
{data: {value: a}},
{data: {value: b}}
) {
return b - a;
}
function getCircleIntersection(entry, target) {
// Abstracted the logic to calculate the radius for simplicity
var circle1 = {radius: 20, x: entry.offsetLeft, y: entry.offsetTop};
var circle2 = {radius: 12, x: target.offsetLeft, y: target.offsetTop};
var dx = circle1.x - circle2.x;
var dy = circle1.y - circle2.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < circle1.radius + circle2.radius) {
return distance;
}
return 0;
}
/**
* Returns the circle that has the greatest intersection area
*/
function circleIntersection({
collisionRect,
droppableRects,
droppableContainers,
}) => {
const collisions = [];
for (const droppableContainer of droppableContainers) {
const {id} = droppableContainer;
const rect = droppableRects.get(id);
if (rect) {
const intersectionRatio = getCircleIntersection(rect, collisionRect);
if (intersectionRatio > 0) {
collisions.push({
id,
data: {droppableContainer, value: intersectionRatio},
});
}
}
}
return collisions.sort(sortCollisionsDesc);
};
```
To learn more, refer to the implementation of the built-in collision detection algorithms.
================================================
FILE: apps/docs/legacy/api-documentation/context-provider/dnd-context.mdx
================================================
---
title: DndContext
description: >-
The parent component for your drag and drop application.
sidebarTitle: <DndContext>
---
## Application structure
In order for your your [Droppable](../droppable) and [Draggable](../draggable) components to interact with each other, you'll need to make sure that the part of your React tree that uses them is nested within a parent `<DndContext>` component. The `<DndContext>` provider makes use of the [React Context API](https://reactjs.org/docs/context.html) to share data between draggable and droppable components and hooks.
> React context provides a way to pass data through the component tree without having to pass props down manually at every level.
Therefore, components that use [`useDraggable`](../draggable/use-draggable), [`useDroppable`](../droppable/use-droppable) or [`DragOverlay`](../draggable/drag-overlay) will need to be nested within a `DndContext` provider.
They don't need to be direct descendants, but, there does need to be a parent `<DndContext>` provider somewhere higher up in the tree.
```jsx
import React from 'react';
import {DndContext} from '@dnd-kit/core';
function App() {
return (
<DndContext>
{/* Components that use `useDraggable`, `useDroppable` */}
</DndContext>
);
}
```
## Nesting
You may also nest `<DndContext>` providers within other `<DndContext>` providers to achieve nested draggable/droppable interfaces that are independent of one another.
```jsx
import React from 'react';
import {DndContext} from '@dnd-kit/core';
function App() {
return (
<DndContext>
{/* Components that use `useDraggable`, `useDroppable` */}
<DndContext>
{/* ... */}
<DndContext>{/* ... */}</DndContext>
</DndContext>
</DndContext>
);
}
```
When nesting `DndContext` providers, keep in mind that the `useDroppable` and `useDraggable` hooks will only have access to the other draggable and droppable nodes within that context.
If multiple `DndContext` providers are listening for the same event, events will be captured by the first `DndContext` that contains a [Sensor](../sensors/) that is activated by that event, similar to how [events bubble in the DOM](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).
## Props
```typescript
interface Props {
announcements?: Announcements;
autoScroll?: boolean;
cancelDrop?: CancelDrop;
children?: React.ReactNode;
collisionDetection?: CollisionDetection;
layoutMeasuring?: Partial<LayoutMeasuring>;
modifiers?: Modifiers;
screenReaderInstructions?: ScreenReaderInstructions;
sensors?: SensorDescriptor<any>[];
onDragStart?(event: DragStartEvent): void;
onDragMove?(event: DragMoveEvent): void;
onDragOver?(event: DragOverEvent): void;
onDragEnd?(event: DragEndEvent): void;
onDragCancel?(): void;
}
```
### Event handlers
As you can see from the list of props above, there are a number of different events emitted by `<DndContext>` that you can listen to and decide how to handle.
The main events you can listen to are:
#### `onDragStart`
Fires when a drag event that meets the [activation constraints](../sensors/#concepts) for that [sensor ](../sensors/)happens, along with the unique identifier of the draggable element that was picked up.
#### `onDragMove`
Fires anytime as the [draggable](../draggable) item is moved. Depending on the activated [sensor](../sensors/#activators), this could for example be as the [Pointer](../sensors/pointer) is moved or the [Keyboard](../sensors/keyboard) movement keys are pressed.
#### `onDragOver`
Fires when a [draggable](../draggable) item is moved over a [droppable](../droppable) container, along with the unique identifier of that droppable container.
#### `onDragEnd`
Fires after a draggable item is dropped.
This event contains information about the active draggable `id` along with information on whether the draggable item was dropped `over`.
If there are no [collisions detected](./collision-detection-algorithms) when the draggable item is dropped, the `over` property will be `null`. If a collision is detected, the `over` property will contain the `id` of the droppable over which it was dropped.
<Info>
It's important to understand that the `onDragEnd` event **does not move** [**draggable**](../draggable) **items into** [**droppable**](../droppable) **containers.**
Rather, it provides **information** about which draggable item was dropped and whether it was over a droppable container when it was dropped.
It is up to the **consumer** of `DndContext` to decide what to do with that information and how to react to it, for example, by updating \(or not\) its internal state in response to the event so that the items are declaratively rendered in a different parent droppable.
</Info>
#### `onDragCancel`
Fires if a drag operation is cancelled, for example, if the user presses `escape` while dragging a draggable item.
### Accessibility
For more details and best practices around accessibility of draggable and droppable components, read the accessibility section:
<Card href="/legacy/guides/accessibility" horizontal icon="universal-access" iconType="light">
Accessibility
</Card>
#### Announcements
Use the `announcements` prop to customize the screen reader announcements that are announced in the live region when draggable items are picked up, moved over droppable regions, and dropped.
The default announcements are:
```javascript
const defaultAnnouncements = {
onDragStart(id) {
return `Picked up draggable item ${id}.`;
},
onDragOver(id, overId) {
if (overId) {
return `Draggable item ${id} was moved over droppable area ${overId}.`;
}
return `Draggable item ${id} is no longer over a droppable area.`;
},
onDragEnd(id, overId) {
if (overId) {
return `Draggable item was dropped over droppable area ${overId}`;
}
return `Draggable item ${id} was dropped.`;
},
onDragCancel(id) {
return `Dragging was cancelled. Draggable item ${id} was dropped.`;
},
};
```
While these default announcements are sensible defaults that should cover most simple use cases, you know your application best, and we highly recommend that you customize these to provide a screen reader experience that is more tailored to the use case you are building.
#### Screen reader instructions
Use the `screenReaderInstructions` prop to customize the instructions that are read to screen readers when the focus is moved
### Autoscroll
Use the optional `autoScroll` boolean prop to temporarily or permanently disable auto-scrolling for all sensors used within this `DndContext`.
Auto-scrolling may also be disabled on an individual sensor basis using the static property `autoScrollEnabled` of the sensor. For example, the [Keyboard sensor](../sensors/keyboard) manages scrolling internally, and therefore has the static property `autoScrollEnabled` set to `false`.
### Collision detection
Use the `collisionDetection` prop to customize the collision detection algorithm used to detect collisions between draggable nodes and droppable areas within the`DndContext` provider.
The default collision detection algorithm is the [rectangle intersection](./collision-detection-algorithms.md#rectangle-intersection) algorithm.
The built-in collision detection algorithms are:
- [Rectangle intersection](./collision-detection-algorithms.md#rectangle-intersection)
- [Closest center](./collision-detection-algorithms.md#closest-center)
- [Closest corners](./collision-detection-algorithms.md#closest-corners)
You may also build custom collision detection algorithms or compose existing ones.
To learn more, read the collision detection guide:
<Card href="./collision-detection-algorithms">
Learn more about collision detection
</Card>
### Sensors
Sensors are an abstraction to detect different input methods in order to initiate drag operations, respond to movement and end or cancel the operation.
The default sensors used by `DndContext` are the [Pointer](../sensors/pointer) and [Keyboard](../sensors/keyboard) sensors.
To learn how to customize sensors or how to pass different sensors to `DndContext`, read the Sensors guide:
<Card href="../sensors ">
Learn more about sensors
</Card>
### Modifiers
Modifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use cases, for example:
- Restricting motion to a single axis
- Restricting motion to the draggable node container's bounding rectangle
- Restricting motion to the draggable node's scroll container bounding rectangle
- Applying resistance or clamping the motion
To learn more about how to use Modifiers, read the Modifiers guide:
<Card href="../modifiers">
Learn more about modifiers
</Card>
### Layout measuring
You can configure when and how often `DndContext` should measure its droppable elements by using the `layoutMeasuring` prop.
The `frequency` argument controls how frequently layouts should be measured. By default, layout measuring is set to `optimized`, which only measures layouts based on the `strategy`.
Specify one of the following strategies:
- `LayoutMeasuringStrategy.WhileDragging`: Default behavior, only measure droppable elements right after dragging has begun.
`LayoutMeasuringStrategy.BeforeDragging`: Measure droppable elements before dragging begins and right after it ends.
- `LayoutMeasuringStrategy.Always`: Measure droppable elements before dragging begins, right after dragging has begun, and after it ends.
Example usage:
```jsx
import {DndContext, LayoutMeasuringStrategy} from '@dnd-kit/core';
<DndContext layoutMeasuring={{strategy: LayoutMeasuringStrategy.Always}} />;
```
================================================
FILE: apps/docs/legacy/api-documentation/context-provider/use-dnd-context.mdx
================================================
---
title: useDndContext
---
The `useDndContext` hook can be used within components wrapped in a `DndContext` provider to access the internal context of the `DndContext`. This can be useful if you're building your own custom components or presets on top of `@dnd-kit/core`.
```jsx
import {useDndContext} from '@dnd-kit/core';
function App() {
<DndContext>
<MyComponent />
</DndContext>
}
function MyComponent() {
const dndContext = useDndContext();
console.log(dndContext);
}
```
<Warning>
Make sure you use the `useDndContext` hook within a [`<DndContext>`](./dnd-context) provider.
</Warning>
================================================
FILE: apps/docs/legacy/api-documentation/context-provider/use-dnd-monitor.mdx
================================================
---
title: useDndMonitor
---
The `useDndMonitor` hook can be used within components wrapped in a `DndContext` provider to monitor the different drag and drop events that happen for that `DndContext`.
```jsx
import {DndContext, useDndMonitor} from '@dnd-kit/core';
function App() {
return (
<DndContext>
<MyComponent />
</DndContext>
);
}
function MyComponent() {
// Monitor drag and drop events that happen on the parent `DndContext` provider
useDndMonitor({
onDragStart(event) {
console.log('Drag started', event);
},
onDragMove(event) {
console.log('Drag moved', event);
},
onDragOver(event) {
console.log('Drag over', event);
},
onDragEnd(event) {
console.log('Drag ended', event);
},
onDragCancel(event) {
console.log('Drag cancelled', event);
},
});
}
```
<Warning>
Make sure you use the `useDndMonitor` hook within a [`<DndContext>`](./dnd-context) provider.
</Warning>
================================================
FILE: apps/docs/legacy/api-documentation/draggable/drag-overlay.mdx
================================================
---
title: Drag overlay
sidebarTitle: <DragOverlay>
description: >-
The `<DragOverlay>` component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport.
---
## When should I use a drag overlay?
Depending on your use-case, you may want to use a drag overlay rather than transforming the original draggable source element that is connected to the [`useDraggable`](./use-draggable) hook:
- If you'd like to **show a preview** of where the draggable source will be when dropped, you can update the position of the draggable source while dragging without affecting the drag overlay.
- If your item needs to **move from one container to another while dragging**, we strongly recommend you use the `<DragOverlay>` component so the draggable item can unmount from its original container while dragging and mount back into a different container without affecting the drag overlay.
- If your draggable item is within a **scrollable container,** we also recommend you use a `<DragOverlay>`, otherwise you'll need to set the draggable element to `position: fixed` yourself so the item isn't restricted to the overflow and stacking context of its scroll container, and can move without being affected by the scroll position of its container.
- If your `useDraggable` items are within a **virtualized list**, you will absolutely want to use a drag overlay, since the original drag source can unmount while dragging as the virtualized container is scrolled.
- If you want **smooth drop animations** without the effort of building them yourself.
## Usage
You may render any valid JSX within the children of the `<DragOverlay>`.
The `<DragOverlay>` component should **remain mounted at all times** so that it can perform the drop animation. If you conditionally render the `<DragOverlay>` component, drop animations will not work.
As a rule of thumb, try to render the `<DragOverlay>` outside of your draggable components, and follow the [presentational component pattern ](./drag-overlay#presentational-components)to maintain a good separation of concerns.
Instead, you should conditionally render the children passed to the `<DragOverlay>`:
<CodeGroup>
```jsx App.jsx
import React, {useState} from 'react';
import {DndContext, DragOverlay} from '@dnd-kit/core';
import {Draggable} from './Draggable';
/*
* The implementation details of <Item> and <ScrollableList> are not
* relevant for this example and are therefore omitted.
*/
function App() {
const [items] = useState(['1', '2', '3', '4', '5']);
const [activeId, setActiveId] = useState(null);
return (
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<ScrollableList>
{items.map(id =>
<Draggable key={id} id={id}>
<Item value={`Item ${id}`} />
</Draggable>
)}
</ScrollableList>
<DragOverlay>
{activeId ? (
<Item value={`Item ${activeId}`} />
): null}
</DragOverlay>
</DndContext>
);
function handleDragStart(event) {
setActiveId(event.active.id);
}
function handleDragEnd() {
setActiveId(null);
}
}
```
```jsx Draggable.jsx
import React from 'react';
import {useDraggable} from '@dnd-kit/core';
function Draggable(props) {
const {attributes, listeners, setNodeRef} = useDraggable({
id: props.id,
});
return (
<li ref={setNodeRef} {...listeners} {...attributes}>
{props.children}
</li>
);
}
```
</CodeGroup>
## Patterns
### Presentational components
While this is an optional pattern, we recommend that the components you intend to make draggable be [presentational components ](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)that are decoupled from `@dnd-kit`.
Using this pattern, create a presentational version of your component that you intend on rendering within the drag overlay, and another version that is draggable and renders the presentational component.
#### Wrapper nodes
As you may have noticed from the example above, we can create small abstract components that render a wrapper node and make any children rendered within draggable:
<CodeGroup>
```jsx Draggable.jsx
import React from 'react';
import {useDraggable} from '@dnd-kit/core';
function Draggable(props) {
const Element = props.element || 'div';
const {attributes, listeners, setNodeRef} = useDraggable({
id: props.id,
});
return (
<Element ref={setNodeRef} {...listeners} {...attributes}>
{props.children}
</Element>
);
}
```
</CodeGroup>
Using this pattern, we can then render our presentational components within `<Draggable>` and within `<DragOverlay>`:
<CodeGroup>
```jsx App.jsx
```jsx
import React, {useState} from 'react';
import {DndContext, DragOverlay} from '@dnd-kit/core';
import {Draggable} from './Draggable';
/* The implementation details of <Item> is not
* relevant for this example and therefore omitted. */
function App() {
const [isDragging, setIsDragging] = useState(false);
return (
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Draggable id="my-draggable-element">
<Item />
</Draggable>
<DragOverlay>
{isDragging ? (
<Item />
): null}
</DragOverlay>
</DndContext>
);
function handleDragStart() {
setIsDragging(true);
}
function handleDragEnd() {
setIsDragging(false);
}
}
```
</CodeGroup>
#### Ref forwarding
Use the[ ref forwarding pattern](https://reactjs.org/docs/forwarding-refs.html) to connect your presentational components to the `useDraggable` hook:
```jsx
import React, {forwardRef} from 'react';
const Item = forwardRef(({children, ...props}, ref) => {
return (
<li {...props} ref={ref}>
{children}
</li>
);
});
```
This way, you can create two versions of your component, one that is presentational, and one that is draggable and renders the presentational component **without the need for additional wrapper elements**:
```jsx
import React from 'react';
import {useDraggable} from '@dnd-kit/core';
function DraggableItem(props) {
const {attributes, listeners, setNodeRef} = useDraggable({
id: props.id,
});
return (
<Item ref={setNodeRef} {...attributes} {...listeners}>
{value}
</Item>
)
});
```
### Portals
The drag overlay is not rendered in a portal by default. Rather, it is rendered in the container where it is rendered.
If you would like to render the `<DragOverlay>` in a different container than where it is rendered, import the [`createPortal`](https://reactjs.org/docs/portals.html) helper from `react-dom`:
```jsx
import React, {useState} from 'react';
import {createPortal} from 'react-dom';
import {DndContext, DragOverlay} from '@dnd-kit/core';
function App() {
return (
<DndContext>
{createPortal(<DragOverlay>{/* ... */}</DragOverlay>, document.body)}
</DndContext>
);
}
```
## Props
```typescript
{
adjustScale?: boolean;
children?: React.ReactNode;
className?: string;
dropAnimation?: DropAnimation | null;
style?: React.CSSProperties;
transition?: string | TransitionGetter;
modifiers?: Modifiers;
wrapperElement?: keyof JSX.IntrinsicElements;
zIndex?: number;
}
```
### Children
You may render any valid JSX within the children of the `<DragOverlay>`. However, **make sure that the components rendered within the drag overlay do not use the `useDraggable` hook**.
Prefer conditionally rendering the `children` of `<DragOverlay>` rather than conditionally rendering `<DragOverlay>`, otherwise drop animations will not work.
### Class name and inline styles
If you'd like to customize the[ wrapper element](./drag-overlay#wrapper-element) that the `DragOverlay`'s children are rendered into, use the `className` and `style` props:
```jsx
<DragOverlay
className="my-drag-overlay"
style={{
width: 500,
}}
>
{/* ... */}
</DragOverlay>
```
### Drop animation
Use the `dropAnimation` prop to configure the drop animation.
```typescript
interface DropAnimation {
duration: number;
easing: string;
}
```
The `duration` option should be a number, in `milliseconds`. The default value is `250` milliseconds. The `easing` option should be a string that represents a valid [CSS easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). The default easing is `ease`.
```jsx
<DragOverlay
dropAnimation={{
duration: 500,
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
}}
>
{/* ... */}
</DragOverlay>
```
To disable drop animations, set the `dropAnimation` prop to `null`.
```jsx
<DragOverlay dropAnimation={null}>{/* ... */}</DragOverlay>
```
<Warning>
The `<DragOverlay>` component should **remain mounted at all times** so that it can perform the drop animation. If you conditionally render the `<DragOverlay>` component, drop animations will not work.
</Warning>
### Modifiers
Modifiers let you dynamically modify the movement coordinates that are detected by sensors. They can be used for a wide range of use-cases, which you can learn more about by reading the [Modifiers](../modifiers) documentation.
For example, you can use modifiers to restrict the movement of the `<DragOverlay>` to the bounds of the window:
```jsx
import {DndContext, DragOverlay} from '@dnd-kit';
import {restrictToWindowEdges} from '@dnd-kit/modifiers';
function App() {
return (
<DndContext>
{/* ... */}
<DragOverlay modifiers={[restrictToWindowEdges]}>{/* ... */}</DragOverlay>
</DndContext>
);
}
```
### Transition
By default, the `<DragOverlay>` component does not have any transitions, unless activated by the [`Keyboard` sensor](../sensors/keyboard). Use the `transition` prop to create a function that returns the transition based on the [activator event](../sensors/#activators). The default implementation is:
```javascript
function defaultTransition(activatorEvent) {
const isKeyboardActivator = activatorEvent instanceof KeyboardEvent;
return isKeyboardActivator ? 'transform 250ms ease' : undefined;
}
```
### Wrapper element
By default, the `<DragOverlay>` component renders your elements within a `div` element. If your draggable elements are list items, you'll want to update the `<DragOverlay>` component to render a `ul` wrapper instead, since wrapping a `li` item without a parent `ul` is invalid HTML:
```jsx
<DragOverlay wrapperElement="ul">{/* ... */}</DragOverlay>
```
### `z-index`
The `zIndex` prop sets the [z-order](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) of the drag overlay. The default value is `999` for compatibility reasons, but we highly recommend you use a lower value.
================================================
FILE: apps/docs/legacy/api-documentation/draggable/use-draggable.mdx
================================================
---
title: useDraggable
---
## Arguments
```typescript
interface UseDraggableArguments {
id: string | number;
attributes?: {
role?: string;
roleDescription?: string;
tabIndex?: number;
};
data?: Record<string, any>;
disabled?: boolean;
}
```
### Identifier
The `id` argument is a `string` or `number` that should be a unique identifier, meaning there should be no other **draggable** elements that share that same identifier within a given [`DndContext`](../context-provider/) provider.
If you're building a component that uses both the `useDraggable` and `useDroppable` hooks, they can both share the same identifier since draggable elements are stored in a different key-value store than droppable elements.
### Data
The `data` argument is for advanced use-cases where you may need access to additional data about the draggable element in event handlers, modifiers or custom sensors.
For example, if you were building a sortable preset, you could use the `data` attribute to store the index of the draggable element within a sortable list to access it within a custom sensor.
```jsx
const {setNodeRef} = useDraggable({
id: props.id,
data: {
index: props.index,
},
});
```
Another more advanced example where the `data` argument can be useful is create relationships between draggable nodes and droppable areas, for example, to specify which types of droppable nodes your draggable node can be dropped on:
```jsx
import {DndContext, useDraggable, useDroppable} from '@dnd-kit/core';
function Droppable() {
const {setNodeRef} = useDroppable({
id: 'droppable',
data: {
type: 'type1',
},
});
/* ... */
}
function Draggable() {
const {attributes, listeners, setNodeRef, transform} = useDraggable({
id: 'draggable',
data: {
supports: ['type1', 'type2'],
},
});
/* ... */
}
function App() {
return <DndContext onDragEnd={handleDragEnd}>/* ... */</DndContext>;
function handleDragEnd(event) {
const {active, over} = event;
if (over && active.data.current.supports.includes(over.data.current.type)) {
// do stuff
}
}
}
```
### Disabled
Since [hooks cannot be conditionally invoked](https://react.dev/reference/rules/rules-of-hooks), use the `disabled` argument and set it to `true` if you need to temporarily disable a `draggable` element.
### Attributes
The default values for the `attributes` property are sensible defaults that should cover a wide range of use cases, but there is no one-size-fits-all solution.
You know your application best, and we encourage you to manually attach only the attributes that you think make sense in the context of your application rather than using them all without considering whether it makes sense to do so.
For example, if the HTML element you are attaching the `useDraggable` `listeners` to is already a native HTML `button` element, although it's harmless to do so, there's no need to add the `role="button"` attribute, since that is already the default role of `button`.
#### Role
The ARIA `"role"` attribute lets you explicitly define the role for an element, which communicates its purpose to assistive technologies.
The default value for the `"role"` attribute is `"button"`.
<Info>
If it makes sense in the context of what you are building, we recommend that you leverage the native HTML `<button>` element for draggable elements.
</Info>
#### Role description
The `roleDescription` argument can be used to tailor the screen reader experience to your application. For example, if you're building a sortable list of products you'd want to set the `roleDescription` value to something like `"sortable product"`.
**Tab index**
The `tabindex` attribute dictates the order in which focus moves throughout the document.
- Natively interactive elements such as [buttons](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) and[ form controls ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection)have a default `tabindex` value of `0`.
- Custom elements that are intended to be interactive and receive keyboard focus need to have an explicitly assigned `tabindex="0"`(for example, `div` and `li` elements)
In other words, in order for your draggable elements to receive keyboard focus, they **need** to have the `tabindex` attribute set to `0` if they are not natively interactive elements (such as the HTML `button` element).
For this reason, the `useDraggable` hook sets the `tabindex="0"` attribute by default.
## Properties
```typescript
{
active: {
id: UniqueIdentifier;
node: React.MutableRefObject<HTMLElement>;
rect: ViewRect;
} | null;
attributes: {
role: string;
tabIndex: number;
'aria-diabled': boolean;
'aria-roledescription': string;
'aria-describedby': string;
},
isDragging: boolean;
listeners: Record<SyntheticListenerName, Function> | undefined;
node: React.MutableRefObject<HTMLElement | null>;
over: {id: UniqueIdentifier} | null;
setNodeRef(HTMLElement | null): void;
setActivatorNodeRef(HTMLElement | null): void;
transform: {x: number, y: number, scaleX: number, scaleY: number} | null;
}
```
### Active
#### `active`
If there is currently an active draggable element within the [`DndContext`](../context-provider/) provider where the `useDraggable` hook is used, the `active` property will be defined with the corresponding `id`, `node` and `rect` of that draggable element.
Otherwise, the `active` property will be set to `null`.
#### `isDragging`
If the draggable element that is currently being dragged is the current one where `useDraggable` is used, the `isDragging` property will be `true`. Otherwise the `isDragging` property will be false.
Internally, the `isActive` property just checks if the `active.id === id`.
### Listeners
The `useDraggable` hook requires that you attach `listeners` to the DOM node that you would like to become the activator to start dragging.
While we could have attached these listeners manually to the node provided to `setNodeRef`, there are actually a number of key advantages to forcing the consumer to manually attach the listeners.
#### Flexibility
While many drag and drop libraries need to expose the concept of "drag handles", creating a drag handle with the `useDraggable` hook is as simple as manually attaching the listeners to a different DOM element than the one that is set as the draggable source DOM node:
```jsx
import {useDraggable} from '@dnd-kit/core';
function Draggable() {
const {attributes, listeners, setNodeRef} = useDraggable({
id: 'unique-id',
});
return (
<div ref={setNodeRef}>
/* Some other content that does not activate dragging */
<button {...listeners} {...attributes}>
Drag handle
</button>
</div>
);
}
```
<Info>
When attaching the listeners to a different element than the node that is draggable, make sure you also attach the attributes to the same node that has the listeners attached so that it is still [accessible](../../guides/accessibility).
</Info>
You can even have multiple drag handles if that makes sense in the context of your application:
```jsx
import {useDraggable} from '@dnd-kit/core';
function Draggable() {
const {attributes, listeners, setNodeRef} = useDraggable({
id: 'unique-id',
});
return (
<div ref={setNodeRef}>
<button {...listeners} {...attributes}>
Drag handle 1
</button>
/* Some other content that does not activate dragging */
<button {...listeners} {...attributes}>
Drag handle 2
</button>
</div>
);
}
```
#### Performance
This strategy also means that we're able to use [React synthetic events](https://reactjs.org/docs/events.html), which ultimately leads to improved performance over manually attaching event listeners to each individual node.\
\
Why? Because rather than having to attach individual event listeners for each draggable DOM node, React attaches a single event listener for every type of event we listen to on the `document`. Once click on one of the draggable nodes happens, React's listener on the document dispatches a SyntheticEvent back to the original handler.
### Node
**`setNodeRef`**
In order for the `useDraggable` hook to function properly, it needs the `setNodeRef` property to be attached to the HTML element you intend on turning into a draggable element so that @dnd-kit can measure that element to compute collisions:
```jsx
function Draggable(props) {
const {setNodeRef} = useDraggable({
id: props.id,
});
return <button ref={setNodeRef}>{/* ... */}</button>;
}
```
Keep in mind that the `ref` should be assigned to the outer container that you want to become draggable, but this doesn't necessarily need to coincide with the container that the listeners are attached to.
#### **`node`**
A [ref](https://reactjs.org/docs/refs-and-the-dom.html) to the current node that is passed to `setNodeRef`
### Activator
**`setActivatorNodeRef`**
It's possible for the listeners to be attached to a different node than the one that `setNodeRef` is attached to.
A common example of this is when implementing a drag handle and attaching the listeners to the drag handle:
```jsx
function Draggable(props) {
const {listeners, setNodeRef} = useDraggable({
id: props.id,
});
return (
<div ref={setNodeRef}>
{/* ... */}
<button {...listeners}>Drag handle</button>
</div>
);
}
```
When the activator node differs from the draggable node, we recommend setting the activator node ref on the activator node:
```jsx
function Draggable(props) {
const {listeners, setNodeRef, setActivatorNodeRef} = useDraggable({
id: props.id,
});
return (
<div ref={setNodeRef}>
{/* ... */}
<button ref={setActivatorNodeRef} {...listeners}>
Drag handle
</button>
</div>
);
}
```
This helps @dnd-kit more accurately handle automatic focus management and can also be accessed by sensors for enhanced activation constraints.
<Info>
Focus management is automatically handled by [@dnd-kit](https://github.com/dnd-kit). When the activator event is a Keyboard event, focus will automatically be restored back to the first focusable node of the activator node.
If no activator node is set via `setActivatorNodeRef`, focus will automatically be restored on the first focusable node of the draggable node registered via `setNodeRef.`
</Info>
### Over
#### **`over`**
If you'd like to change the appearance of the draggable element in response to it being dragged over a different droppable container, check whether the `over` value is defined.
If a draggable element is moved over a droppable area, the `over` property will be defined for all draggable elements, regardless of whether or not those draggable elements are active or not.
If you'd like to make changes to only the active draggable element in response to it being moved over a droppable area, check whether the `isDragging` property is `true`.
### Transform
After a draggable item is picked up, the `transform` property will be populated with the `translate` coordinates you'll need to move the item on the screen.
The `transform` object adheres to the following shape:
```typescript
{
x: number;
y: number;
scaleX: number;
scaleY: number;
}
```
The `x` and `y` coordinates represent the delta from the point of origin of your draggable element since it started being dragged.
The `scaleX` and `scaleY` properties represent the difference in scale between the element that is currently being dragged and the droppable it is currently over, which can be useful if the draggable item needs to be dynamically resized to the size of the droppable it is over.
================================================
FILE: apps/docs/legacy/api-documentation/draggable.mdx
================================================
---
title: Draggable
description: >-
Use the `useDraggable` hook turn DOM nodes into draggable sources that can be picked up, moved and dropped over [droppable](./droppable) containers.
sidebarTitle: Overview
---
## Usage
The `useDraggable` hook isn't particularly opinionated about how your app should be structured.
### Node ref
At minimum though, you need to pass the `setNodeRef` function that is returned by the `useDraggable` hook to a DOM element so that it can access the underlying DOM node and keep track of it to [detect collisions and intersections](./context-provider/collision-detection-algorithms) with other [droppable](./droppable) elements.
```jsx
import {useDraggable} from '@dnd-kit/core';
import {CSS} from '@dnd-kit/utilities';
function Draggable() {
const {attributes, listeners, setNodeRef, transform} = useDraggable({
id: 'unique-id',
});
const style = {
transform: CSS.Translate.toString(transform),
};
return (
<button ref={setNodeRef} style={style} {...listeners} {...attributes}>
/* Render whatever you like within */
</button>
);
}
```
<Info>
Always try to use the DOM element that is most [semantic](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) in the context of your app. \
Check out our [Accessibility guide](../guides/accessibility) to learn more about how you can help provide a better experience for screen readers.
</Info>
### Identifier
The `id` argument is a string that should be a unique identifier, meaning there should be no other **draggable** elements that share that same identifier within a given [`DndContext`](./context-provider/) provider.
### Listeners
The `useDraggable` hook requires that you attach `listeners` to the DOM node that you would like to become the activator to start dragging.
While we could have attached these listeners manually to the node provided to `setNodeRef`, there are actually a number of key advantages to forcing the consumer to manually attach the listeners.
#### Flexibility
While many drag and drop libraries need to expose the concept of "drag handles", creating a drag handle with the `useDraggable` hook is as simple as manually attaching the listeners to a different DOM element than the one that is set as the draggable source DOM node:
```jsx
import {useDraggable} from '@dnd-kit/core';
function Draggable() {
const {attributes, listeners, setNodeRef} = useDraggable({
id: 'unique-id',
});
return (
<div ref={setNodeRef}>
/* Some other content that does not activate dragging */
<button {...listeners} {...attributes}>
Drag handle
</button>
</div>
);
}
```
<Info>
When attaching the listeners to a different element than the node that is draggable, make sure you also attach the attributes to the same node that has the listeners attached so that it is still [accessible](../guides/accessibility).
</Info>
You can even have multiple drag handles if that makes sense in the context of your application:
```jsx
import {useDraggable} from '@dnd-kit/core';
function Draggable() {
const {attributes, listeners, setNodeRef} = useDraggable({
id: 'unique-id',
});
return (
<div ref={setNodeRef}>
<button {...listeners} {...attributes}>
Drag handle 1
</button>
/* Some other content that does not activate dragging */
<button {...listeners} {...attributes}>
Drag handle 2
</button>
</div>
);
}
```
#### Performance
This strategy also means that we're able to use [React synthetic events](https://reactjs.org/docs/events.html), which ultimately leads to improved performance over manually attaching event listeners to each individual node.\
\
Why? Because rather than having to attach individual event listeners for each draggable DOM node, React attaches a single event listener for every type of event we listen to on the `document`. Once click on one of the draggable nodes happens, React's listener on the document dispatches a SyntheticEvent back to the original handler.
### Transforms
In order to actually see your draggable items move on screen, you'll need to move the item using CSS. You can use inline styles, CSS variables, or even CSS-in-JS libraries to pass the `transform` property as CSS to your draggable element.
<Success>
For performance reasons, we strongly recommend you use the **`transform`** CSS property to move your draggable item on the screen, as other positional properties such as **`top`**, **`left`** or **`margin`** can cause expensive repaints. Learn more about [CSS transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).
</Success>
After an item starts being dragged, the `transform` property will be populated with the `translate` coordinates you'll need to move the item on the screen. The `transform` object adheres to the following shape: `{x: number, y: number, scaleX: number, scaleY: number}`
The `x` and `y` coordinates represent the delta from the point of origin of your draggable element since it started being dragged.
The `scaleX` and `scaleY` properties represent the difference in scale between the item that is dragged and the droppable container it is currently over. This is useful for building interfaces where the draggable item needs to adapt to the size of the droppable container it is currently over.
The `CSS` helper is entirely optional; it's a convenient helper for generating [CSS transform ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)strings, and is equivalent to manually constructing the string as such:
```javascript
CSS.Translate.toString(transform) ===
`translate3d(${translate.x}, ${translate.y}, 0)`;
```
### Attributes
The `useDraggable` hook \*\*\*\* provides a set of sensible default attributes for draggable items. We recommend you attach these to the HTML element you are attaching the draggable listeners to.
We encourage you to manually attach the attributes that you think make sense in the context of your application rather than using them all without considering whether it makes sense to do so.
For example, if the HTML element you are attaching the `useDraggable` `listeners` to is already a semantic `button`, although it's harmless to do so, there's no need to add the `role="button"` attribute, since that is already the default role.
| Attribute | Default value | Description |
| ---------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `role` | `"button"` | <p>If possible, we recommend you use a semantic <code><button></code> element for the DOM element you plan on attaching draggable listeners to. </p><p></p><p>In case that's not possible, make sure you include the <code>role="button"</code>attribute, which is the default value.</p> |
| `tabIndex` | `"0"` | In order for your draggable elements to receive keyboard focus, they **need** to have the `tabindex` attribute set to `0` if they are not natively interactive elements (such as the HTML `button` element). For this reason, the `useDraggable` hook sets the `tabindex="0"` attribute by default. |
| `aria-roledescription` | `"draggable"` | While `draggable` is a sensible default, we recommend you customize this value to something that is tailored to the use case you are building. |
| `aria-describedby` | `"DndContext-[uniqueId]"` | Each draggable item is provided a unique `aria-describedby` ID that points to the [screen reader instructions](./context-provider/#screen-reader-instructions) to be read out when a draggable item receives focus. |
To learn more about the best practices for making draggable interfaces accessible, read the full accessibility guide:
<Card href="../guides/accessibility" horizontal icon="universal-access" iconType="light">
Accessibility
</Card>
### Recommendations
#### `touch-action`
We highly recommend you specify the `touch-action` CSS property for all of your draggable elements.
> The **`touch-action`** CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).\
> \
> Source: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)
In general, we recommend you set the `touch-action` property to `none` for draggable elements in order to prevent scrolling on mobile devices.
<Info>
For [Pointer Events,](./sensors/pointer) there is no way to prevent the default behaviour of the browser on touch devices when interacting with a draggable element from the pointer event listeners. Using `touch-action: none;` is the only way to reliably prevent scrolling for pointer events.
Further, using `touch-action: none;` is currently the only reliable way to prevent scrolling in iOS Safari for both Touch and Pointer events.
</Info>
If your draggable item is part of a scrollable list, we recommend you use a drag handle and set `touch-action` to `none` only for the drag handle, so that the contents of the list can still be scrolled, but that initiating a drag from the drag handle does not scroll the page.
Once a `pointerdown` or `touchstart` event has been initiated, any changes to the `touch-action` value will be ignored. Programmatically changing the `touch-action` value for an element from `auto` to `none` after a pointer or touch event has been initiated will not result in the user agent aborting or suppressing any default behavior for that event for as long as that pointer is active (for more details, refer to the [Pointer Events Level 2 Spec](https://www.w3.org/TR/pointerevents2/#determining-supported-touch-behavior)).
## Drag Overlay
The `<DragOverlay>` component provides a way to render a draggable overlay that is removed from the normal document flow and is positioned relative to the viewport.
To learn more about how to use drag overlays, read the in-depth guide:
<Card href="./draggable/drag-overlay" horizontal icon="send-backward" iconType="light">
Drag overlay
</Card>
================================================
FILE: apps/docs/legacy/api-documentation/droppable/use-droppable.mdx
================================================
---
title: useDroppable
---
## Arguments
```typescript
interface UseDroppableArguments {
id: string | number;
disabled?: boolean;
data?: Record<string, any>;
}
```
### Identifier
The `id` argument is a `string` or `number` that should be a unique identifier, meaning there should be no other **droppable** elements that share that same identifier within a given [`DndContext`](../context-provider/) provider.
If you're building a component that uses both the `useDroppable` and `useDraggable` hooks, they can both share the same identifier since droppable elements are stored in a different key-value store than draggable elements.
### Disabled
Since [hooks cannot be conditionally invoked](https://react.dev/reference/rules/rules-of-hooks), use the `disabled` argument and set it to `true` if you need to temporarily disable a `droppable` area.
### Data
The `data` argument is for advanced use-cases where you may need access to additional data about the droppable element in event handlers, modifiers or custom sensors.
For example, if you were building a sortable preset, you could use the `data` attribute to store the index of the droppable element within a sortable list to access it within a custom sensor.
```jsx
const {setNodeRef} = useDroppable({
id: props.id,
data: {
index: props.index,
},
});
```
Another more advanced example where the `data` argument can be useful is create relationships between draggable nodes and droppable areas, for example, to specify which types of draggable nodes your droppable accepts:
```jsx
import {DndContext, useDraggable, useDroppable} from '@dnd-kit/core';
function Droppable() {
const {setNodeRef} = useDroppable({
id: 'droppable',
data: {
accepts: ['type1', 'type2'],
},
});
/* ... */
}
function Draggable() {
const {attributes, listeners, setNodeRef, transform} = useDraggable({
id: 'draggable',
data: {
type: 'type1',
},
});
/* ... */
}
function App() {
return <DndContext onDragEnd={handleDragEnd}>/* ... */</DndContext>;
function handleDragEnd(event) {
const {active, over} = event;
if (over && over.data.current.accepts.includes(active.data.current.type)) {
// do stuff
}
}
}
```
## Properties
```typescript
{
rect: React.MutableRefObject<LayoutRect | null>;
isOver: boolean;
node: React.RefObject<HTMLElement>;
over: {id: UniqueIdentifier} | null;
setNodeRef(element: HTMLElement | null): void;
}
```
### Node
#### `setNodeRef`
In order for the `useDroppable` hook to function properly, it needs the `setNodeRef` property to be attached to the HTML element you intend on turning into a droppable area:
```jsx
function Droppable(props) {
const {setNodeRef} = useDroppable({
id: props.id,
});
return <div ref={setNodeRef}>{/* ... */}</div>;
}
```
#### `node`
A [ref](https://reactjs.org/docs/refs-and-the-dom.html) to the current node that is passed to `setNodeRef`
#### `rect`
For advanced use cases, if you need the bounding rect measurement of the droppable area.
### Over
#### `isOver`
Use the `isOver` boolean returned by the `useDroppable` hook to change the appearance or content displayed when a `draggable` element is dragged over your droppable container.
#### `over`
If you'd like to change the appearance of the droppable in response to a draggable being dragged over a different droppable container, check whether the `over` value is defined. Depending on your use-case, you can also read the `id` of the other droppable that the draggable item to make changes to the render output of your droppable component.
####
================================================
FILE: apps/docs/legacy/api-documentation/droppable.mdx
================================================
---
title: Droppable
description: >-
Use the `useDroppable` hook to set up DOM nodes as droppable areas that [draggable](./draggable) elements can be dropped over.
sidebarTitle: Overview
---
## Usage
The `useDroppable` hook isn't opinionated about how you should structure your application.
At minimum though, you need to pass the `setNodeRef` function that is returned by the `useDroppable` hook to a DOM element so that it can register the underlying DOM node and keep track of it to detect collisions and intersections with other draggable elements.
<Info>
If the concept of `ref` is new to you, we recommend you first check out the [Refs and t
gitextract_pui9u02i/ ├── .browserslistrc ├── .changeset/ │ ├── README.md │ ├── animation-last-wins.md │ ├── autoscroller-options.md │ ├── config.json │ ├── drop-animation-source-context.md │ ├── entity-batched-id-changes.md │ ├── feedback-keyboard-transition.md │ ├── feedback-placeholder-sibling-reorder.md │ ├── feedback-transform-support.md │ ├── fix-event-type-aliases.md │ ├── fix-plugin-registry-dedup-ordering.md │ ├── fix-pointer-sensor-stale-activation.md │ ├── per-entity-plugin-config.md │ ├── refactor-style-injector.md │ ├── scroll-into-view-rewrite.md │ ├── thick-cloths-poke.md │ ├── use-deep-signal-flush-sync.md │ └── whole-cloths-warn.md ├── .eslintrc.js ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ ├── chromatic.yml │ ├── continous-release.yml │ ├── playwright.yml │ ├── release.yml │ └── tests.yml ├── .gitignore ├── .nvmrc ├── .prettierrc ├── .vscode/ │ └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── apps/ │ ├── docs/ │ │ ├── README.md │ │ ├── concepts/ │ │ │ ├── drag-drop-manager.mdx │ │ │ ├── draggable.mdx │ │ │ ├── droppable.mdx │ │ │ └── sortable.mdx │ │ ├── docs.json │ │ ├── extend/ │ │ │ ├── modifiers.mdx │ │ │ ├── plugins/ │ │ │ │ ├── accessibility.mdx │ │ │ │ ├── auto-scroller.mdx │ │ │ │ ├── cursor.mdx │ │ │ │ ├── debug.mdx │ │ │ │ ├── feedback.mdx │ │ │ │ └── style-injector.mdx │ │ │ ├── plugins.mdx │ │ │ ├── sensors/ │ │ │ │ ├── keyboard-sensor.mdx │ │ │ │ └── pointer-sensor.mdx │ │ │ └── sensors.mdx │ │ ├── legacy/ │ │ │ ├── api-documentation/ │ │ │ │ ├── context-provider/ │ │ │ │ │ ├── collision-detection-algorithms.mdx │ │ │ │ │ ├── dnd-context.mdx │ │ │ │ │ ├── use-dnd-context.mdx │ │ │ │ │ └── use-dnd-monitor.mdx │ │ │ │ ├── draggable/ │ │ │ │ │ ├── drag-overlay.mdx │ │ │ │ │ └── use-draggable.mdx │ │ │ │ ├── draggable.mdx │ │ │ │ ├── droppable/ │ │ │ │ │ └── use-droppable.mdx │ │ │ │ ├── droppable.mdx │ │ │ │ ├── modifiers.mdx │ │ │ │ ├── sensors/ │ │ │ │ │ ├── keyboard.mdx │ │ │ │ │ ├── mouse.mdx │ │ │ │ │ ├── pointer.mdx │ │ │ │ │ └── touch.mdx │ │ │ │ └── sensors.mdx │ │ │ ├── guides/ │ │ │ │ └── accessibility.mdx │ │ │ ├── introduction/ │ │ │ │ ├── getting-started.mdx │ │ │ │ └── installation.mdx │ │ │ └── presets/ │ │ │ └── sortable/ │ │ │ ├── overview.mdx │ │ │ ├── sortable-context.mdx │ │ │ └── use-sortable.mdx │ │ ├── overview.mdx │ │ ├── quickstart.mdx │ │ ├── react/ │ │ │ ├── components/ │ │ │ │ ├── drag-drop-provider.mdx │ │ │ │ └── drag-overlay.mdx │ │ │ ├── guides/ │ │ │ │ ├── migration.mdx │ │ │ │ ├── multiple-sortable-lists.mdx │ │ │ │ └── sortable-state-management.mdx │ │ │ ├── hooks/ │ │ │ │ ├── use-drag-drop-monitor.mdx │ │ │ │ ├── use-draggable.mdx │ │ │ │ ├── use-droppable.mdx │ │ │ │ └── use-sortable.mdx │ │ │ └── quickstart.mdx │ │ ├── sandpack.js │ │ ├── snippets/ │ │ │ ├── code.mdx │ │ │ ├── quickstart/ │ │ │ │ └── intro.mdx │ │ │ ├── sandbox.mdx │ │ │ └── story.mdx │ │ ├── solid/ │ │ │ ├── components/ │ │ │ │ ├── drag-drop-provider.mdx │ │ │ │ └── drag-overlay.mdx │ │ │ ├── hooks/ │ │ │ │ ├── use-draggable.mdx │ │ │ │ ├── use-droppable.mdx │ │ │ │ └── use-sortable.mdx │ │ │ └── quickstart.mdx │ │ ├── style.css │ │ ├── svelte/ │ │ │ ├── components/ │ │ │ │ ├── drag-drop-provider.mdx │ │ │ │ └── drag-overlay.mdx │ │ │ ├── primitives/ │ │ │ │ ├── create-draggable.mdx │ │ │ │ ├── create-droppable.mdx │ │ │ │ └── create-sortable.mdx │ │ │ └── quickstart.mdx │ │ └── vue/ │ │ ├── components/ │ │ │ ├── drag-drop-provider.mdx │ │ │ └── drag-overlay.mdx │ │ ├── composables/ │ │ │ ├── use-draggable.mdx │ │ │ ├── use-droppable.mdx │ │ │ └── use-sortable.mdx │ │ └── quickstart.mdx │ ├── stories/ │ │ ├── .eslintrc.js │ │ ├── .storybook/ │ │ │ ├── main.ts │ │ │ ├── manager-head.html │ │ │ ├── manager.ts │ │ │ ├── preview-head.html │ │ │ ├── preview.tsx │ │ │ └── theme.ts │ │ ├── package.json │ │ ├── playwright.config.ts │ │ ├── raw.d.ts │ │ ├── stories/ │ │ │ ├── components/ │ │ │ │ ├── docs/ │ │ │ │ │ ├── Code/ │ │ │ │ │ │ ├── Code.module.css │ │ │ │ │ │ ├── Code.tsx │ │ │ │ │ │ ├── components/ │ │ │ │ │ │ │ ├── CodeHighlighter/ │ │ │ │ │ │ │ │ ├── CodeHighlighter.module.css │ │ │ │ │ │ │ │ ├── CodeHighlighter.tsx │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── Info/ │ │ │ │ │ │ ├── Info.module.css │ │ │ │ │ │ ├── Info.tsx │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── Preview/ │ │ │ │ │ │ ├── Preview.module.css │ │ │ │ │ │ ├── Preview.tsx │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ └── react/ │ │ │ ├── Draggable/ │ │ │ │ ├── DragHandles/ │ │ │ │ │ ├── DragHandles.stories.tsx │ │ │ │ │ └── docs/ │ │ │ │ │ └── DragHandles.mdx │ │ │ │ ├── DragOverlay/ │ │ │ │ │ └── DragOverlay.stories.tsx │ │ │ │ ├── Draggable.stories.tsx │ │ │ │ ├── DraggableApp.tsx │ │ │ │ ├── DraggableExample.tsx │ │ │ │ ├── Modifiers/ │ │ │ │ │ ├── Modifiers.stories.tsx │ │ │ │ │ ├── SnapToGridExample.tsx │ │ │ │ │ ├── docs/ │ │ │ │ │ │ └── ModifierDocs.mdx │ │ │ │ │ └── styles.module.css │ │ │ │ ├── Sensors/ │ │ │ │ │ ├── Sensors.stories.tsx │ │ │ │ │ └── docs/ │ │ │ │ │ └── SensorDocs.mdx │ │ │ │ └── docs/ │ │ │ │ ├── DraggableDocs.mdx │ │ │ │ └── examples/ │ │ │ │ ├── Draggable.jsx │ │ │ │ ├── MultipleDraggable.jsx │ │ │ │ └── QuickStart.jsx │ │ │ ├── Droppable/ │ │ │ │ ├── Droppable.stories.tsx │ │ │ │ ├── DroppableApp.tsx │ │ │ │ ├── DroppableExample.tsx │ │ │ │ ├── MultipleDroppable/ │ │ │ │ │ ├── MultipleDroppable.stories.tsx │ │ │ │ │ └── MultipleDroppableApp.tsx │ │ │ │ └── docs/ │ │ │ │ ├── DroppableDocs.mdx │ │ │ │ └── examples/ │ │ │ │ ├── Draggable.jsx │ │ │ │ ├── Droppable.jsx │ │ │ │ ├── MultipleDroppable.jsx │ │ │ │ └── QuickStart.jsx │ │ │ ├── Resizeable/ │ │ │ │ ├── Resizeable.css │ │ │ │ ├── Resizeable.tsx │ │ │ │ └── index.ts │ │ │ ├── Sortable/ │ │ │ │ ├── CSSLayers/ │ │ │ │ │ ├── CSSLayers.stories.tsx │ │ │ │ │ └── CSSLayersExample.tsx │ │ │ │ ├── Grid/ │ │ │ │ │ ├── Grid.stories.tsx │ │ │ │ │ └── GridSortableApp.tsx │ │ │ │ ├── Horizontal/ │ │ │ │ │ ├── Horizontal.stories.tsx │ │ │ │ │ └── HorizontalSortableApp.tsx │ │ │ │ ├── Iframe/ │ │ │ │ │ ├── Iframe.stories.tsx │ │ │ │ │ └── IframeExample.tsx │ │ │ │ ├── MultipleLists/ │ │ │ │ │ ├── MultipleLists.stories.tsx │ │ │ │ │ ├── MultipleLists.tsx │ │ │ │ │ ├── MultipleListsApp.tsx │ │ │ │ │ └── docs/ │ │ │ │ │ ├── MultipleLists.mdx │ │ │ │ │ └── examples/ │ │ │ │ │ ├── Column.jsx │ │ │ │ │ ├── Item.jsx │ │ │ │ │ └── QuickStart.jsx │ │ │ │ ├── Quickstart.tsx │ │ │ │ ├── Sortable.stories.tsx │ │ │ │ ├── SortableApp.tsx │ │ │ │ ├── SortableExample.tsx │ │ │ │ ├── Table/ │ │ │ │ │ ├── Table.stories.tsx │ │ │ │ │ └── TableExample.tsx │ │ │ │ ├── Transformed/ │ │ │ │ │ ├── Transformed.stories.tsx │ │ │ │ │ └── TransformedExample.tsx │ │ │ │ ├── Tree/ │ │ │ │ │ ├── Tree.module.css │ │ │ │ │ ├── Tree.stories.tsx │ │ │ │ │ ├── Tree.tsx │ │ │ │ │ ├── TreeItem.tsx │ │ │ │ │ ├── TreeItemOverlay.tsx │ │ │ │ │ ├── types.ts │ │ │ │ │ └── utilities.ts │ │ │ │ ├── Vertical/ │ │ │ │ │ ├── AutoScrollExample.tsx │ │ │ │ │ └── Vertical.stories.tsx │ │ │ │ ├── Virtualized/ │ │ │ │ │ ├── ReactTinyVirtualListExample.tsx │ │ │ │ │ ├── ReactVirtualExample.tsx │ │ │ │ │ ├── ReactWindowExample.tsx │ │ │ │ │ └── Virtualized.stories.tsx │ │ │ │ └── docs/ │ │ │ │ ├── SortableDocs.mdx │ │ │ │ └── examples/ │ │ │ │ ├── ControlledExample.jsx │ │ │ │ ├── Example.jsx │ │ │ │ └── UncontrolledExample.jsx │ │ │ ├── components/ │ │ │ │ ├── Actions/ │ │ │ │ │ ├── Action.tsx │ │ │ │ │ ├── Actions.module.css │ │ │ │ │ ├── Actions.tsx │ │ │ │ │ ├── Remove.tsx │ │ │ │ │ └── index.ts │ │ │ │ ├── Button/ │ │ │ │ │ └── Button.tsx │ │ │ │ ├── Container/ │ │ │ │ │ └── Container.tsx │ │ │ │ ├── Dropzone/ │ │ │ │ │ └── Dropzone.tsx │ │ │ │ ├── Grid/ │ │ │ │ │ ├── Grid.module.css │ │ │ │ │ └── Grid.tsx │ │ │ │ ├── Handle/ │ │ │ │ │ └── Handle.tsx │ │ │ │ ├── Item/ │ │ │ │ │ └── Item.tsx │ │ │ │ └── index.ts │ │ │ └── icons/ │ │ │ ├── SortableIcon.tsx │ │ │ └── index.ts │ │ ├── tests/ │ │ │ ├── drag-offset.spec.ts │ │ │ ├── draggable.spec.ts │ │ │ ├── droppable.spec.ts │ │ │ ├── sortable-autoscroll-options.spec.ts │ │ │ ├── sortable-css-layers.spec.ts │ │ │ ├── sortable-grid.spec.ts │ │ │ ├── sortable-horizontal.spec.ts │ │ │ ├── sortable-iframe.spec.ts │ │ │ ├── sortable-multiple.spec.ts │ │ │ ├── sortable-scroll.spec.ts │ │ │ ├── sortable-table.spec.ts │ │ │ ├── sortable-transformed.spec.ts │ │ │ └── sortable-vertical.spec.ts │ │ └── tsconfig.json │ ├── stories-shared/ │ │ ├── components/ │ │ │ ├── Container/ │ │ │ │ ├── Container.css │ │ │ │ ├── Container.ts │ │ │ │ └── index.ts │ │ │ ├── Item/ │ │ │ │ ├── Item.css │ │ │ │ ├── Item.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── package.json │ │ ├── preview-head.html │ │ ├── register.ts │ │ ├── styles/ │ │ │ ├── index.ts │ │ │ └── sandbox.ts │ │ ├── tests/ │ │ │ ├── drag-offset.tests.ts │ │ │ ├── draggable.tests.ts │ │ │ ├── droppable.tests.ts │ │ │ ├── fixtures.ts │ │ │ ├── sortable-transformed.tests.ts │ │ │ └── sortable-vertical.tests.ts │ │ └── utilities/ │ │ ├── classnames.ts │ │ ├── createRange.ts │ │ └── index.ts │ ├── stories-solid/ │ │ ├── .storybook/ │ │ │ ├── main.ts │ │ │ ├── manager-head.html │ │ │ ├── manager.ts │ │ │ ├── preview.ts │ │ │ └── theme.ts │ │ ├── custom-elements.d.ts │ │ ├── package.json │ │ ├── playwright.config.ts │ │ ├── raw.d.ts │ │ ├── stories/ │ │ │ ├── Draggable/ │ │ │ │ ├── DragHandles/ │ │ │ │ │ ├── DragHandles.stories.tsx │ │ │ │ │ └── DragHandlesApp.tsx │ │ │ │ ├── Draggable.stories.tsx │ │ │ │ └── DraggableApp.tsx │ │ │ ├── Droppable/ │ │ │ │ ├── Droppable.stories.tsx │ │ │ │ ├── DroppableApp.tsx │ │ │ │ └── MultipleDroppable/ │ │ │ │ ├── MultipleDroppable.stories.tsx │ │ │ │ └── MultipleDroppableApp.tsx │ │ │ └── Sortable/ │ │ │ ├── Grid/ │ │ │ │ ├── Grid.stories.tsx │ │ │ │ └── GridSortableApp.tsx │ │ │ ├── Horizontal/ │ │ │ │ ├── Horizontal.stories.tsx │ │ │ │ └── HorizontalSortableApp.tsx │ │ │ ├── MultipleLists/ │ │ │ │ ├── MultipleLists.stories.tsx │ │ │ │ └── MultipleListsApp.tsx │ │ │ ├── SortableApp.tsx │ │ │ ├── SortableDragHandleApp.tsx │ │ │ └── Vertical/ │ │ │ └── Vertical.stories.tsx │ │ ├── tests/ │ │ │ ├── draggable.spec.ts │ │ │ ├── droppable.spec.ts │ │ │ └── sortable-vertical.spec.ts │ │ └── tsconfig.json │ ├── stories-svelte/ │ │ ├── .storybook/ │ │ │ ├── main.ts │ │ │ ├── manager.ts │ │ │ ├── preview.ts │ │ │ └── theme.ts │ │ ├── package.json │ │ ├── playwright.config.ts │ │ ├── raw.d.ts │ │ ├── stories/ │ │ │ ├── Draggable/ │ │ │ │ ├── DragHandles/ │ │ │ │ │ ├── DragHandles.stories.ts │ │ │ │ │ ├── DragHandlesApp.svelte │ │ │ │ │ └── DraggableWithHandle.svelte │ │ │ │ ├── DragOverlay/ │ │ │ │ │ ├── DragOverlay.stories.ts │ │ │ │ │ ├── DragOverlayApp.svelte │ │ │ │ │ └── DraggableItem.svelte │ │ │ │ ├── Draggable.stories.ts │ │ │ │ ├── Draggable.svelte │ │ │ │ └── DraggableApp.svelte │ │ │ ├── Droppable/ │ │ │ │ ├── DraggableItem.svelte │ │ │ │ ├── Droppable.stories.ts │ │ │ │ ├── DroppableApp.svelte │ │ │ │ ├── DroppableZone.svelte │ │ │ │ └── MultipleDroppable/ │ │ │ │ ├── MultipleDroppable.stories.ts │ │ │ │ └── MultipleDroppableApp.svelte │ │ │ └── Sortable/ │ │ │ ├── Grid/ │ │ │ │ ├── Grid.stories.ts │ │ │ │ ├── GridSortableApp.svelte │ │ │ │ └── GridSortableItem.svelte │ │ │ ├── Horizontal/ │ │ │ │ ├── Horizontal.stories.ts │ │ │ │ ├── HorizontalSortableApp.svelte │ │ │ │ └── HorizontalSortableItem.svelte │ │ │ ├── MultipleLists/ │ │ │ │ ├── MultipleLists.stories.ts │ │ │ │ ├── MultipleListsApp.svelte │ │ │ │ ├── SortableColumn.svelte │ │ │ │ └── SortableItem.svelte │ │ │ ├── SortableApp.svelte │ │ │ ├── SortableDragHandleApp.svelte │ │ │ ├── SortableItem.svelte │ │ │ ├── SortableItemWithHandle.svelte │ │ │ └── Vertical/ │ │ │ └── Vertical.stories.ts │ │ ├── tests/ │ │ │ ├── draggable.spec.ts │ │ │ ├── droppable.spec.ts │ │ │ └── sortable-vertical.spec.ts │ │ └── vite.config.ts │ ├── stories-vanilla/ │ │ ├── .storybook/ │ │ │ ├── main.ts │ │ │ ├── manager-head.html │ │ │ ├── manager.ts │ │ │ ├── preview.ts │ │ │ └── theme.ts │ │ ├── package.json │ │ ├── raw.d.ts │ │ └── stories/ │ │ ├── Draggable/ │ │ │ ├── DragHandle/ │ │ │ │ ├── DragHandle.stories.ts │ │ │ │ └── DragHandleApp.ts │ │ │ ├── Draggable.stories.ts │ │ │ └── DraggableApp.ts │ │ ├── Droppable/ │ │ │ ├── Droppable.stories.ts │ │ │ ├── DroppableApp.ts │ │ │ └── MultipleDroppable/ │ │ │ ├── MultipleDroppable.stories.ts │ │ │ └── MultipleDroppableApp.ts │ │ └── Sortable/ │ │ ├── Grid/ │ │ │ ├── Grid.stories.ts │ │ │ └── GridSortableApp.ts │ │ ├── Horizontal/ │ │ │ ├── Horizontal.stories.ts │ │ │ └── HorizontalSortableApp.ts │ │ ├── Sortable.stories.ts │ │ └── SortableApp.ts │ └── stories-vue/ │ ├── .storybook/ │ │ ├── main.ts │ │ ├── manager-head.html │ │ ├── manager.ts │ │ ├── preview.ts │ │ └── theme.ts │ ├── package.json │ ├── playwright.config.ts │ ├── raw.d.ts │ ├── stories/ │ │ ├── Draggable/ │ │ │ ├── DragHandles/ │ │ │ │ ├── DragHandles.stories.ts │ │ │ │ └── DragHandlesApp.vue │ │ │ ├── DragOverlay/ │ │ │ │ ├── DragOverlay.stories.ts │ │ │ │ └── DragOverlayApp.vue │ │ │ ├── Draggable.stories.ts │ │ │ └── DraggableApp.vue │ │ ├── Droppable/ │ │ │ ├── Droppable.stories.ts │ │ │ ├── DroppableApp.vue │ │ │ └── MultipleDroppable/ │ │ │ ├── MultipleDroppable.stories.ts │ │ │ └── MultipleDroppableApp.vue │ │ └── Sortable/ │ │ ├── Grid/ │ │ │ ├── Grid.stories.ts │ │ │ └── GridSortableApp.vue │ │ ├── Horizontal/ │ │ │ ├── Horizontal.stories.ts │ │ │ └── HorizontalSortableApp.vue │ │ ├── MultipleLists/ │ │ │ ├── MultipleLists.stories.ts │ │ │ ├── MultipleListsApp.vue │ │ │ ├── SortableColumn.vue │ │ │ └── SortableItem.vue │ │ ├── SortableApp.vue │ │ ├── SortableDragHandleApp.vue │ │ └── Vertical/ │ │ └── Vertical.stories.ts │ └── tests/ │ ├── draggable.spec.ts │ ├── droppable.spec.ts │ └── sortable-vertical.spec.ts ├── bun.lockb ├── config/ │ └── typescript/ │ ├── base.json │ ├── react.json │ ├── solid.json │ ├── svelte.json │ ├── vanilla.json │ └── vue.json ├── package.json ├── packages/ │ ├── abstract/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── core/ │ │ │ │ ├── collision/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── notifier.ts │ │ │ │ │ ├── observer.ts │ │ │ │ │ ├── types.ts │ │ │ │ │ └── utilities.ts │ │ │ │ ├── entities/ │ │ │ │ │ ├── draggable/ │ │ │ │ │ │ ├── draggable.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── droppable/ │ │ │ │ │ │ ├── droppable.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── entity/ │ │ │ │ │ │ ├── entity.ts │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── registry.ts │ │ │ │ │ │ └── types.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── manager/ │ │ │ │ │ ├── actions.ts │ │ │ │ │ ├── events.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── manager.ts │ │ │ │ │ ├── operation.ts │ │ │ │ │ ├── registry.ts │ │ │ │ │ ├── renderer.ts │ │ │ │ │ ├── status.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── modifiers/ │ │ │ │ │ ├── index.ts │ │ │ │ │ └── modifier.ts │ │ │ │ ├── plugins/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── plugin.ts │ │ │ │ │ ├── registry.ts │ │ │ │ │ ├── types.ts │ │ │ │ │ └── utilities.ts │ │ │ │ └── sensors/ │ │ │ │ ├── activation.ts │ │ │ │ ├── index.ts │ │ │ │ └── sensor.ts │ │ │ └── modifiers/ │ │ │ ├── axis.ts │ │ │ ├── boundingRectangle.ts │ │ │ ├── index.ts │ │ │ └── snap.ts │ │ ├── tests/ │ │ │ ├── manager-modifiers.test.ts │ │ │ └── plugin-registry.test.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── collision/ │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── algorithms/ │ │ │ │ ├── closestCenter.ts │ │ │ │ ├── closestCorners.ts │ │ │ │ ├── default.ts │ │ │ │ ├── directionBiased.ts │ │ │ │ ├── index.ts │ │ │ │ ├── pointerDistance.ts │ │ │ │ ├── pointerIntersection.ts │ │ │ │ └── shapeIntersection.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── dom/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── core/ │ │ │ │ ├── entities/ │ │ │ │ │ ├── draggable/ │ │ │ │ │ │ ├── draggable.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── droppable/ │ │ │ │ │ │ ├── droppable.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ ├── manager/ │ │ │ │ │ ├── events.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── manager.ts │ │ │ │ ├── plugins/ │ │ │ │ │ ├── accessibility/ │ │ │ │ │ │ ├── Accessibility.ts │ │ │ │ │ │ ├── HiddenText.ts │ │ │ │ │ │ ├── LiveRegion.ts │ │ │ │ │ │ ├── defaults.ts │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── types.ts │ │ │ │ │ │ └── utilities.ts │ │ │ │ │ ├── cursor/ │ │ │ │ │ │ ├── Cursor.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── feedback/ │ │ │ │ │ │ ├── Feedback.ts │ │ │ │ │ │ ├── constants.ts │ │ │ │ │ │ ├── dropAnimation.ts │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── observers.ts │ │ │ │ │ │ ├── types.ts │ │ │ │ │ │ └── utilities.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── scrolling/ │ │ │ │ │ │ ├── AutoScroller.ts │ │ │ │ │ │ ├── ScrollIntent.ts │ │ │ │ │ │ ├── ScrollListener.ts │ │ │ │ │ │ ├── ScrollLock.ts │ │ │ │ │ │ ├── Scroller.ts │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── selection/ │ │ │ │ │ │ └── PreventSelection.ts │ │ │ │ │ └── stylesheet/ │ │ │ │ │ └── StyleInjector.ts │ │ │ │ └── sensors/ │ │ │ │ ├── drag/ │ │ │ │ │ ├── DragSensor.ts │ │ │ │ │ ├── encoding.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── keyboard/ │ │ │ │ │ ├── KeyboardSensor.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── pointer/ │ │ │ │ │ ├── DelayConstraint.ts │ │ │ │ │ ├── DistanceConstraint.ts │ │ │ │ │ ├── PointerActivationConstraints.ts │ │ │ │ │ └── PointerSensor.ts │ │ │ │ └── types.ts │ │ │ ├── modifiers/ │ │ │ │ ├── RestrictToElement.ts │ │ │ │ ├── RestrictToWindow.ts │ │ │ │ └── index.ts │ │ │ ├── plugins/ │ │ │ │ └── debug/ │ │ │ │ ├── debug.ts │ │ │ │ └── index.ts │ │ │ ├── sortable/ │ │ │ │ ├── index.ts │ │ │ │ ├── plugins/ │ │ │ │ │ ├── OptimisticSortingPlugin.ts │ │ │ │ │ └── SortableKeyboardPlugin.ts │ │ │ │ ├── sortable.ts │ │ │ │ └── utilities.ts │ │ │ └── utilities/ │ │ │ ├── animations/ │ │ │ │ ├── forceFinishAnimations.ts │ │ │ │ └── getFinalKeyframe.ts │ │ │ ├── bounding-rectangle/ │ │ │ │ ├── getBoundingRectangle.ts │ │ │ │ ├── getViewportBoundingRectangle.ts │ │ │ │ ├── getVisibleBoundingRectangle.ts │ │ │ │ ├── index.ts │ │ │ │ ├── isOverflowVisible.ts │ │ │ │ ├── isRectEqual.ts │ │ │ │ └── isVisible.ts │ │ │ ├── coordinates/ │ │ │ │ └── getEventCoordinates.ts │ │ │ ├── element/ │ │ │ │ ├── cloneElement.ts │ │ │ │ ├── getElementFromPoint.ts │ │ │ │ ├── index.ts │ │ │ │ ├── isInteractiveElement.ts │ │ │ │ └── proxiedElements.ts │ │ │ ├── event-listeners/ │ │ │ │ ├── Listeners.ts │ │ │ │ └── index.ts │ │ │ ├── execution-context/ │ │ │ │ ├── canUseDOM.ts │ │ │ │ ├── getDocument.ts │ │ │ │ ├── getDocuments.ts │ │ │ │ ├── getFixedPositionOffset.ts │ │ │ │ ├── getRoot.ts │ │ │ │ ├── getWindow.ts │ │ │ │ ├── isSafari.ts │ │ │ │ └── prefersReducedMotion.ts │ │ │ ├── frame/ │ │ │ │ ├── getFrameElement.ts │ │ │ │ ├── getFrameElements.ts │ │ │ │ └── getFrameTransform.ts │ │ │ ├── index.ts │ │ │ ├── misc/ │ │ │ │ └── generateUniqueId.ts │ │ │ ├── observers/ │ │ │ │ ├── FrameObserver.ts │ │ │ │ ├── PositionObserver.ts │ │ │ │ ├── ResizeNotifier.ts │ │ │ │ └── index.ts │ │ │ ├── popover/ │ │ │ │ ├── hidePopover.ts │ │ │ │ ├── index.ts │ │ │ │ ├── showPopover.ts │ │ │ │ └── supportsPopover.ts │ │ │ ├── scheduling/ │ │ │ │ ├── index.ts │ │ │ │ ├── scheduler.ts │ │ │ │ ├── throttle.ts │ │ │ │ └── timeout.ts │ │ │ ├── scroll/ │ │ │ │ ├── canScroll.ts │ │ │ │ ├── detectScrollIntent.ts │ │ │ │ ├── documentScrollingElement.ts │ │ │ │ ├── getScrollPosition.ts │ │ │ │ ├── getScrollableAncestors.ts │ │ │ │ ├── getScrollableElement.ts │ │ │ │ ├── index.ts │ │ │ │ ├── isFixed.ts │ │ │ │ ├── isScrollable.ts │ │ │ │ └── scrollIntoViewIfNeeded.ts │ │ │ ├── shapes/ │ │ │ │ ├── DOMRectangle.ts │ │ │ │ └── index.ts │ │ │ ├── styles/ │ │ │ │ ├── Styles.ts │ │ │ │ ├── getComputedStyles.ts │ │ │ │ └── index.ts │ │ │ ├── transform/ │ │ │ │ ├── animateTransform.ts │ │ │ │ ├── applyTransform.ts │ │ │ │ ├── computeTranslate.ts │ │ │ │ ├── index.ts │ │ │ │ ├── inverseTransform.ts │ │ │ │ ├── parseScale.ts │ │ │ │ ├── parseTransform.ts │ │ │ │ └── parseTranslate.ts │ │ │ └── type-guards/ │ │ │ ├── index.ts │ │ │ ├── isDocument.ts │ │ │ ├── isElement.ts │ │ │ ├── isHTMLElement.ts │ │ │ ├── isHTMLTableRowElement.ts │ │ │ ├── isKeyboardEvent.ts │ │ │ ├── isKeyframeEffect.ts │ │ │ ├── isNode.ts │ │ │ ├── isPointerEvent.ts │ │ │ ├── isSVGElement.ts │ │ │ ├── isShadowRoot.ts │ │ │ ├── isTextInput.ts │ │ │ ├── isWindow.ts │ │ │ ├── supportsStyle.ts │ │ │ └── supportsViewTransition.ts │ │ ├── tests/ │ │ │ ├── pointer-sensor.test.ts │ │ │ └── sortable-utilities.test.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── eslint-config/ │ │ ├── README.md │ │ └── package.json │ ├── geometry/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── distance/ │ │ │ │ ├── distance.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── index.ts │ │ │ ├── point/ │ │ │ │ ├── Point.ts │ │ │ │ └── index.ts │ │ │ ├── position/ │ │ │ │ ├── index.ts │ │ │ │ └── position.ts │ │ │ ├── shapes/ │ │ │ │ ├── Rectangle.ts │ │ │ │ ├── Shape.ts │ │ │ │ └── index.ts │ │ │ └── types/ │ │ │ ├── alignment.ts │ │ │ ├── axis.ts │ │ │ ├── bounding-rectangle.ts │ │ │ ├── coordinates.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── helpers/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── move.ts │ │ ├── tests/ │ │ │ └── move.test.ts │ │ └── tsconfig.json │ ├── react/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── core/ │ │ │ │ ├── context/ │ │ │ │ │ ├── DragDropProvider.tsx │ │ │ │ │ ├── context.ts │ │ │ │ │ ├── hooks.ts │ │ │ │ │ └── renderer.ts │ │ │ │ ├── draggable/ │ │ │ │ │ ├── DragOverlay.tsx │ │ │ │ │ └── useDraggable.ts │ │ │ │ ├── droppable/ │ │ │ │ │ └── useDroppable.ts │ │ │ │ ├── hooks/ │ │ │ │ │ ├── useDragDropManager.ts │ │ │ │ │ ├── useDragDropMonitor.ts │ │ │ │ │ ├── useDragOperation.ts │ │ │ │ │ └── useInstance.ts │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── index.ts │ │ │ │ ├── useComputed.ts │ │ │ │ ├── useConstant.ts │ │ │ │ ├── useDeepSignal.ts │ │ │ │ ├── useForceUpdate.ts │ │ │ │ ├── useImmediateEffect.ts │ │ │ │ ├── useIsomorphicLayoutEffect.ts │ │ │ │ ├── useLatest.ts │ │ │ │ ├── useOnElementChange.ts │ │ │ │ ├── useOnValueChange.ts │ │ │ │ └── useSignal.ts │ │ │ ├── sortable/ │ │ │ │ ├── index.ts │ │ │ │ └── useSortable.ts │ │ │ └── utilities/ │ │ │ ├── currentValue.ts │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── solid/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── core/ │ │ │ │ ├── context/ │ │ │ │ │ ├── DragDropProvider.tsx │ │ │ │ │ ├── context.ts │ │ │ │ │ └── renderer.ts │ │ │ │ ├── draggable/ │ │ │ │ │ ├── DragOverlay.tsx │ │ │ │ │ └── useDraggable.ts │ │ │ │ ├── droppable/ │ │ │ │ │ └── useDroppable.ts │ │ │ │ ├── hooks/ │ │ │ │ │ ├── useDragDropManager.ts │ │ │ │ │ ├── useDragDropMonitor.ts │ │ │ │ │ ├── useDragOperation.ts │ │ │ │ │ └── useInstance.ts │ │ │ │ └── index.ts │ │ │ ├── hooks/ │ │ │ │ ├── index.ts │ │ │ │ └── useDeepSignal.ts │ │ │ ├── sortable/ │ │ │ │ ├── index.ts │ │ │ │ └── useSortable.ts │ │ │ └── utilities/ │ │ │ ├── index.ts │ │ │ └── saveElementPosition.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── state/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── comparators.ts │ │ │ ├── computed.ts │ │ │ ├── decorators.ts │ │ │ ├── effects.ts │ │ │ ├── history.ts │ │ │ ├── index.ts │ │ │ ├── snapshot.ts │ │ │ ├── store.ts │ │ │ └── types.ts │ │ ├── tests/ │ │ │ └── comparators.test.ts │ │ └── tsconfig.json │ ├── storybook-addon-codesandbox/ │ │ ├── package.json │ │ └── src/ │ │ ├── collect-files.ts │ │ ├── constants.ts │ │ ├── define.ts │ │ ├── index.ts │ │ ├── manager.tsx │ │ ├── preset.ts │ │ ├── preview/ │ │ │ ├── CodeSandboxButton.tsx │ │ │ ├── codesandbox-button-dom.ts │ │ │ ├── decorator-dom.ts │ │ │ └── decorator.tsx │ │ └── types.ts │ ├── svelte/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── src/ │ │ │ ├── core/ │ │ │ │ ├── context/ │ │ │ │ │ ├── DragDropProvider.svelte │ │ │ │ │ ├── context.ts │ │ │ │ │ └── renderer.svelte.ts │ │ │ │ ├── draggable/ │ │ │ │ │ ├── DragOverlay.svelte │ │ │ │ │ └── createDraggable.svelte.ts │ │ │ │ ├── droppable/ │ │ │ │ │ └── createDroppable.svelte.ts │ │ │ │ ├── hooks/ │ │ │ │ │ ├── createDragDropMonitor.svelte.ts │ │ │ │ │ ├── createDragOperation.ts │ │ │ │ │ ├── createInstance.svelte.ts │ │ │ │ │ └── getDragDropManager.ts │ │ │ │ └── index.ts │ │ │ ├── sortable/ │ │ │ │ ├── createSortable.svelte.ts │ │ │ │ └── index.ts │ │ │ └── utilities/ │ │ │ ├── createDeepSignal.svelte.ts │ │ │ └── index.ts │ │ └── tsconfig.json │ └── vue/ │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── composables/ │ │ │ ├── index.ts │ │ │ └── useDeepSignal.ts │ │ ├── core/ │ │ │ ├── context/ │ │ │ │ ├── DragDropProvider.ts │ │ │ │ ├── context.ts │ │ │ │ └── renderer.ts │ │ │ ├── draggable/ │ │ │ │ ├── DragOverlay.ts │ │ │ │ └── useDraggable.ts │ │ │ ├── droppable/ │ │ │ │ └── useDroppable.ts │ │ │ ├── hooks/ │ │ │ │ ├── useDragDropManager.ts │ │ │ │ ├── useDragDropMonitor.ts │ │ │ │ ├── useDragOperation.ts │ │ │ │ └── useInstance.ts │ │ │ └── index.ts │ │ ├── sortable/ │ │ │ ├── index.ts │ │ │ └── useSortable.ts │ │ ├── types.ts │ │ └── utilities/ │ │ ├── context.ts │ │ ├── element.ts │ │ ├── index.ts │ │ └── ref.ts │ ├── tsconfig.json │ └── tsup.config.ts └── turbo.json
SYMBOL INDEX (1093 symbols across 360 files)
FILE: apps/stories-shared/components/Container/Container.ts
class Container (line 3) | class Container extends HTMLElement {}
FILE: apps/stories-shared/components/Item/Item.ts
class Item (line 3) | class Item extends HTMLElement {
method connectedCallback (line 4) | connectedCallback() {
FILE: apps/stories-shared/tests/drag-offset.tests.ts
type DragOffsetStories (line 3) | interface DragOffsetStories {
function dragOffsetTests (line 8) | function dragOffsetTests(stories: DragOffsetStories) {
FILE: apps/stories-shared/tests/draggable.tests.ts
type DraggableStories (line 3) | interface DraggableStories {
function draggableTests (line 8) | function draggableTests(stories: DraggableStories) {
FILE: apps/stories-shared/tests/droppable.tests.ts
type DroppableStories (line 3) | interface DroppableStories {
function droppableTests (line 8) | function droppableTests(stories: DroppableStories) {
FILE: apps/stories-shared/tests/fixtures.ts
type DndFixture (line 5) | interface DndFixture {
type PointerActions (line 23) | interface PointerActions {
type KeyboardActions (line 31) | interface KeyboardActions {
method drag (line 54) | async drag(source, target, options) {
method pickup (line 77) | async pickup(source) {
method move (line 82) | async move(direction, times = 1) {
method drop (line 97) | async drop() {
method cancel (line 100) | async cancel() {
method buttonsIn (line 108) | buttonsIn(parent: Locator) {
method goto (line 119) | async goto(storyId: string) {
method disableTransitions (line 126) | async disableTransitions() {
method waitForDrop (line 136) | async waitForDrop() {
method toHaveOrder (line 146) | async toHaveOrder(locator: Locator, expected: string[]) {
method toBeDragging (line 176) | async toBeDragging(locator: Locator) {
method toBeDropTarget (line 199) | async toBeDropTarget(locator: Locator) {
type Matchers (line 224) | interface Matchers<R, T> {
FILE: apps/stories-shared/tests/sortable-transformed.tests.ts
type SortableTransformedStories (line 3) | interface SortableTransformedStories {
function sortableTransformedTests (line 8) | function sortableTransformedTests(stories: SortableTransformedStories) {
FILE: apps/stories-shared/tests/sortable-vertical.tests.ts
type SortableVerticalStories (line 3) | interface SortableVerticalStories {
function sortableVerticalTests (line 8) | function sortableVerticalTests(stories: SortableVerticalStories) {
FILE: apps/stories-shared/utilities/classnames.ts
function classNames (line 1) | function classNames(
FILE: apps/stories-shared/utilities/createRange.ts
function createRange (line 3) | function createRange(count: number): UniqueIdentifier[] {
FILE: apps/stories-solid/.storybook/main.ts
method viteFinal (line 25) | async viteFinal(config) {
function getAbsolutePath (line 37) | function getAbsolutePath(value) {
FILE: apps/stories-solid/custom-elements.d.ts
type DOMAttributes (line 6) | interface DOMAttributes<T> {
type ExplicitAttributes (line 12) | interface ExplicitAttributes {
type IntrinsicElements (line 18) | interface IntrinsicElements {
FILE: apps/stories-solid/stories/Draggable/DragHandles/DragHandles.stories.tsx
type Story (line 27) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Draggable/DragHandles/DragHandlesApp.tsx
function Draggable (line 3) | function Draggable() {
function App (line 14) | function App() {
FILE: apps/stories-solid/stories/Draggable/Draggable.stories.tsx
type Story (line 13) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Draggable/DraggableApp.tsx
function Draggable (line 3) | function Draggable() {
function App (line 9) | function App() {
FILE: apps/stories-solid/stories/Droppable/Droppable.stories.tsx
type Story (line 13) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Droppable/DroppableApp.tsx
function Draggable (line 4) | function Draggable() {
function Droppable (line 10) | function Droppable(props: {children?: any}) {
function App (line 20) | function App() {
FILE: apps/stories-solid/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.tsx
type Story (line 13) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Droppable/MultipleDroppable/MultipleDroppableApp.tsx
function Draggable (line 4) | function Draggable() {
function Droppable (line 10) | function Droppable(props: {id: string; children?: any}) {
function App (line 20) | function App() {
FILE: apps/stories-solid/stories/Sortable/Grid/Grid.stories.tsx
type Story (line 13) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Sortable/Grid/GridSortableApp.tsx
function Sortable (line 6) | function Sortable(props: {id: number; index: number}) {
function App (line 24) | function App() {
function createRange (line 42) | function createRange(length: number) {
FILE: apps/stories-solid/stories/Sortable/Horizontal/Horizontal.stories.tsx
type Story (line 13) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Sortable/Horizontal/HorizontalSortableApp.tsx
function Sortable (line 6) | function Sortable(props: {id: number; index: number}) {
function App (line 24) | function App() {
function createRange (line 42) | function createRange(length: number) {
FILE: apps/stories-solid/stories/Sortable/MultipleLists/MultipleLists.stories.tsx
type Story (line 15) | type Story = StoryObj;
FILE: apps/stories-solid/stories/Sortable/MultipleLists/MultipleListsApp.tsx
function createRange (line 8) | function createRange(length: number) {
constant ITEM_COUNT (line 12) | const ITEM_COUNT = 6;
constant COLORS (line 14) | const COLORS: Record<string, string> = {
method activatorElements (line 23) | activatorElements(source) {
function SortableItem (line 30) | function SortableItem(props: {id: string; column: string; index: number}) {
function SortableColumn (line 63) | function SortableColumn(props: {id: string; index: number; rows: string[...
function App (line 97) | function App() {
FILE: apps/stories-solid/stories/Sortable/SortableApp.tsx
function Sortable (line 6) | function Sortable(props: {id: number; index: number}) {
function App (line 23) | function App() {
function createRange (line 41) | function createRange(length: number) {
FILE: apps/stories-solid/stories/Sortable/SortableDragHandleApp.tsx
function Sortable (line 6) | function Sortable(props: {id: number; index: number}) {
function App (line 24) | function App() {
function createRange (line 42) | function createRange(length: number) {
FILE: apps/stories-solid/stories/Sortable/Vertical/Vertical.stories.tsx
type Story (line 19) | type Story = StoryObj;
FILE: apps/stories-svelte/.storybook/main.ts
method viteFinal (line 21) | async viteFinal(config: any) {
FILE: apps/stories-svelte/stories/Draggable/DragHandles/DragHandles.stories.ts
type Story (line 18) | type Story = StoryObj<typeof DragHandlesApp>;
FILE: apps/stories-svelte/stories/Draggable/DragOverlay/DragOverlay.stories.ts
type Story (line 17) | type Story = StoryObj<typeof DragOverlayApp>;
FILE: apps/stories-svelte/stories/Draggable/Draggable.stories.ts
type Story (line 17) | type Story = StoryObj<typeof DraggableApp>;
FILE: apps/stories-svelte/stories/Droppable/Droppable.stories.ts
type Story (line 19) | type Story = StoryObj<typeof DroppableApp>;
FILE: apps/stories-svelte/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.ts
type Story (line 19) | type Story = StoryObj<typeof MultipleDroppableApp>;
FILE: apps/stories-svelte/stories/Sortable/Grid/Grid.stories.ts
type Story (line 16) | type Story = StoryObj;
FILE: apps/stories-svelte/stories/Sortable/Horizontal/Horizontal.stories.ts
type Story (line 16) | type Story = StoryObj;
FILE: apps/stories-svelte/stories/Sortable/MultipleLists/MultipleLists.stories.ts
type Story (line 21) | type Story = StoryObj<typeof MultipleListsApp>;
FILE: apps/stories-svelte/stories/Sortable/Vertical/Vertical.stories.ts
type Story (line 20) | type Story = StoryObj;
FILE: apps/stories-vanilla/.storybook/main.ts
method viteFinal (line 25) | async viteFinal(config) {
function getAbsolutePath (line 37) | function getAbsolutePath(value) {
FILE: apps/stories-vanilla/stories/Draggable/DragHandle/DragHandle.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Draggable/DragHandle/DragHandleApp.ts
function App (line 3) | function App() {
FILE: apps/stories-vanilla/stories/Draggable/Draggable.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Draggable/DraggableApp.ts
function App (line 3) | function App() {
FILE: apps/stories-vanilla/stories/Droppable/Droppable.stories.ts
type Story (line 16) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Droppable/DroppableApp.ts
function App (line 3) | function App() {
FILE: apps/stories-vanilla/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.ts
type Story (line 16) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Droppable/MultipleDroppable/MultipleDroppableApp.ts
function App (line 3) | function App() {
FILE: apps/stories-vanilla/stories/Sortable/Grid/Grid.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Sortable/Grid/GridSortableApp.ts
function App (line 4) | function App() {
function createRange (line 49) | function createRange(length: number) {
FILE: apps/stories-vanilla/stories/Sortable/Horizontal/Horizontal.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Sortable/Horizontal/HorizontalSortableApp.ts
function App (line 4) | function App() {
function createRange (line 46) | function createRange(length: number) {
FILE: apps/stories-vanilla/stories/Sortable/Sortable.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vanilla/stories/Sortable/SortableApp.ts
function App (line 4) | function App() {
function createRange (line 39) | function createRange(length: number) {
FILE: apps/stories-vue/.storybook/main.ts
method viteFinal (line 26) | async viteFinal(config) {
function getAbsolutePath (line 47) | function getAbsolutePath(value) {
FILE: apps/stories-vue/stories/Draggable/DragHandles/DragHandles.stories.ts
type Story (line 18) | type Story = StoryObj<typeof DragHandlesApp>;
method setup (line 23) | setup() {
FILE: apps/stories-vue/stories/Draggable/DragOverlay/DragOverlay.stories.ts
type Story (line 17) | type Story = StoryObj<typeof DragOverlayApp>;
method setup (line 22) | setup() {
FILE: apps/stories-vue/stories/Draggable/Draggable.stories.ts
type Story (line 17) | type Story = StoryObj<typeof DraggableApp>;
method setup (line 22) | setup() {
FILE: apps/stories-vue/stories/Droppable/Droppable.stories.ts
type Story (line 13) | type Story = StoryObj<typeof DroppableApp>;
FILE: apps/stories-vue/stories/Droppable/MultipleDroppable/MultipleDroppable.stories.ts
type Story (line 13) | type Story = StoryObj<typeof MultipleDroppableApp>;
FILE: apps/stories-vue/stories/Sortable/Grid/Grid.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vue/stories/Sortable/Horizontal/Horizontal.stories.ts
type Story (line 12) | type Story = StoryObj;
FILE: apps/stories-vue/stories/Sortable/MultipleLists/MultipleLists.stories.ts
type Story (line 18) | type Story = StoryObj<typeof MultipleListsApp>;
method setup (line 23) | setup() {
FILE: apps/stories-vue/stories/Sortable/Vertical/Vertical.stories.ts
type Story (line 18) | type Story = StoryObj;
FILE: apps/stories/.storybook/main.ts
method viteFinal (line 50) | async viteFinal(config) {
function getAbsolutePath (line 67) | function getAbsolutePath(value) {
FILE: apps/stories/stories/components/docs/Code/Code.tsx
type Props (line 7) | interface Props {
function Code (line 13) | function Code(props: Props) {
FILE: apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.tsx
type Props (line 10) | interface Props {
function CodeHighlighter (line 15) | function CodeHighlighter({children = '', language = 'jsx'}: Props) {
function syntaxReplacements (line 63) | function syntaxReplacements(value: string) {
FILE: apps/stories/stories/components/docs/Info/Info.tsx
function Info (line 22) | function Info({children}: PropsWithChildren) {
FILE: apps/stories/stories/components/docs/Preview/Preview.tsx
type Props (line 9) | interface Props {
function Preview (line 18) | function Preview({children, code, of, hero, id, tabs}: Props) {
FILE: apps/stories/stories/react/Draggable/DragHandles/DragHandles.stories.tsx
type Story (line 19) | type Story = StoryObj<typeof DraggableExample>;
method activatorElements (line 34) | activatorElements(source) {
FILE: apps/stories/stories/react/Draggable/DragOverlay/DragOverlay.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof DraggableExample>;
FILE: apps/stories/stories/react/Draggable/Draggable.stories.tsx
type Story (line 26) | type Story = StoryObj<typeof DraggableApp>;
FILE: apps/stories/stories/react/Draggable/DraggableApp.tsx
function Draggable (line 4) | function Draggable() {
function App (line 10) | function App() {
FILE: apps/stories/stories/react/Draggable/DraggableExample.tsx
type Props (line 12) | interface Props {
function DraggableExample (line 20) | function DraggableExample(props: Props) {
type DraggableProps (line 41) | interface DraggableProps {
function Draggable (line 50) | function Draggable({
FILE: apps/stories/stories/react/Draggable/Modifiers/Modifiers.stories.tsx
type Story (line 25) | type Story = StoryObj<typeof DraggableExample>;
method container (line 51) | container({children}) {
method element (line 60) | element() {
FILE: apps/stories/stories/react/Draggable/Modifiers/SnapToGridExample.tsx
function SnapToGridExample (line 9) | function SnapToGridExample() {
FILE: apps/stories/stories/react/Draggable/Sensors/Sensors.stories.tsx
type Story (line 18) | type Story = StoryObj<typeof DraggableExample>;
FILE: apps/stories/stories/react/Draggable/docs/examples/Draggable.jsx
function Draggable (line 4) | function Draggable({id}) {
FILE: apps/stories/stories/react/Draggable/docs/examples/MultipleDraggable.jsx
function Example (line 6) | function Example() {
FILE: apps/stories/stories/react/Draggable/docs/examples/QuickStart.jsx
function Example (line 6) | function Example() {
FILE: apps/stories/stories/react/Droppable/Droppable.stories.tsx
type Story (line 26) | type Story = StoryObj<typeof DroppableApp>;
FILE: apps/stories/stories/react/Droppable/DroppableApp.tsx
function Draggable (line 4) | function Draggable({id}: {id: string}) {
function Droppable (line 10) | function Droppable({id, children}: {id: string; children?: React.ReactNo...
function App (line 20) | function App() {
FILE: apps/stories/stories/react/Droppable/DroppableExample.tsx
type Props (line 11) | interface Props {
function DroppableExample (line 16) | function DroppableExample({droppableCount = 1, debug}: Props) {
type DraggableProps (line 47) | interface DraggableProps {
function Draggable (line 51) | function Draggable({id}: DraggableProps) {
type DroppableProps (line 66) | interface DroppableProps {
function Droppable (line 70) | function Droppable({id, children}: PropsWithChildren<DroppableProps>) {
FILE: apps/stories/stories/react/Droppable/MultipleDroppable/MultipleDroppable.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof MultipleDroppableApp>;
FILE: apps/stories/stories/react/Droppable/MultipleDroppable/MultipleDroppableApp.tsx
function Draggable (line 4) | function Draggable({id}: {id: string}) {
function Droppable (line 10) | function Droppable({id, children}: {id: string; children?: React.ReactNo...
function App (line 20) | function App() {
FILE: apps/stories/stories/react/Droppable/docs/examples/Draggable.jsx
function Draggable (line 4) | function Draggable({id}) {
FILE: apps/stories/stories/react/Droppable/docs/examples/Droppable.jsx
function Droppable (line 4) | function Droppable({id, children}) {
FILE: apps/stories/stories/react/Droppable/docs/examples/MultipleDroppable.jsx
function Example (line 7) | function Example() {
FILE: apps/stories/stories/react/Droppable/docs/examples/QuickStart.jsx
function Example (line 7) | function Example() {
FILE: apps/stories/stories/react/Resizeable/Resizeable.tsx
type Layout (line 16) | interface Layout {
type State (line 29) | interface State {
type GridArea (line 33) | interface GridArea {
function toGridArea (line 40) | function toGridArea({x, y, width, height}: Layout): GridArea {
function toString (line 49) | function toString({rowStart, columnStart, rowEnd, columnEnd}: GridArea) {
constant CELL_WIDTH (line 53) | const CELL_WIDTH = 56;
constant ROW_HEIGHT (line 54) | const ROW_HEIGHT = 35;
type Action (line 56) | type Action =
function sanitize (line 68) | function sanitize(layout: Layout): Layout {
function move (line 81) | function move(layout: Layout, coordinates: Coordinates): Layout {
function resize (line 91) | function resize(layout: Layout, data: ResizeEvent): Layout {
function reducer (line 103) | function reducer(state: State, action: Action): State {
function App (line 132) | function App() {
type GridProps (line 209) | interface GridProps {
function Grid (line 214) | function Grid({children, onClick, reveal}: PropsWithChildren<GridProps>) {
type GridItemProps (line 224) | interface GridItemProps {
function GridItem (line 234) | function GridItem({
type ResizeEvent (line 296) | interface ResizeEvent {
type ResizeableProps (line 303) | interface ResizeableProps {
constant DIRECTIONS (line 308) | const DIRECTIONS: Direction[] = ['NE', 'N', 'NW', 'E', 'W', 'SE', 'S', '...
function Resizeable (line 310) | function Resizeable({disabled, onResize}: ResizeableProps) {
type Direction (line 322) | type Direction = 'NE' | 'N' | 'NW' | 'SE' | 'S' | 'SW' | 'E' | 'W';
type HandleProps (line 324) | interface HandleProps {
function Handle (line 329) | function Handle({direction, onResize}: HandleProps) {
function classNames (line 393) | function classNames(...classes: (string | boolean | undefined | null)[]) {
FILE: apps/stories/stories/react/Sortable/CSSLayers/CSSLayers.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof CSSLayersExample>;
FILE: apps/stories/stories/react/Sortable/CSSLayers/CSSLayersExample.tsx
constant LAYER_STYLES (line 8) | const LAYER_STYLES = `
function CSSLayersExample (line 33) | function CSSLayersExample() {
FILE: apps/stories/stories/react/Sortable/Grid/Grid.stories.tsx
type Story (line 15) | type Story = StoryObj<typeof SortableExample>;
method getItemStyle (line 50) | getItemStyle(_: number, index: number) {
method getItemStyle (line 68) | getItemStyle(_, index) {
FILE: apps/stories/stories/react/Sortable/Grid/GridSortableApp.tsx
function Sortable (line 6) | function Sortable({id, index}: {id: number; index: number}) {
function App (line 22) | function App() {
function createRange (line 40) | function createRange(length: number) {
FILE: apps/stories/stories/react/Sortable/Horizontal/Horizontal.stories.tsx
type Story (line 15) | type Story = StoryObj<typeof SortableExample>;
method getItemStyle (line 20) | getItemStyle() {
method getItemStyle (line 50) | getItemStyle(id) {
FILE: apps/stories/stories/react/Sortable/Horizontal/HorizontalSortableApp.tsx
function Sortable (line 6) | function Sortable({id, index}: {id: number; index: number}) {
function App (line 22) | function App() {
function createRange (line 40) | function createRange(length: number) {
FILE: apps/stories/stories/react/Sortable/Iframe/Iframe.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof IframeLists>;
FILE: apps/stories/stories/react/Sortable/Iframe/IframeExample.tsx
type Props (line 15) | interface Props {
function IframeLists (line 24) | function IframeLists({
type SortableItemProps (line 113) | interface SortableItemProps {
constant COLORS (line 120) | const COLORS: Record<string, string> = {
function SortableItem (line 125) | function SortableItem({
type ColumnProps (line 154) | interface ColumnProps {
function Column (line 160) | function Column({
FILE: apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.stories.tsx
type Story (line 21) | type Story = StoryObj<typeof MultipleLists>;
FILE: apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx
type Props (line 22) | interface Props {
method activatorElements (line 35) | activatorElements(source) {
function MultipleLists (line 42) | function MultipleLists({
type SortableItemProps (line 133) | interface SortableItemProps {
constant COLORS (line 141) | const COLORS: Record<string, string> = {
type SortableColumnProps (line 187) | interface SortableColumnProps {
FILE: apps/stories/stories/react/Sortable/MultipleLists/MultipleListsApp.tsx
function createRange (line 10) | function createRange(length: number) {
constant ITEM_COUNT (line 14) | const ITEM_COUNT = 6;
method activatorElements (line 18) | activatorElements(source) {
type SortableItemProps (line 25) | interface SortableItemProps {
constant COLORS (line 32) | const COLORS: Record<string, string> = {
type SortableColumnProps (line 70) | interface SortableColumnProps {
function App (line 114) | function App() {
FILE: apps/stories/stories/react/Sortable/MultipleLists/docs/examples/Column.jsx
function Column (line 15) | function Column({children, id}) {
FILE: apps/stories/stories/react/Sortable/MultipleLists/docs/examples/Item.jsx
function Item (line 4) | function Item({id, column, index}) {
FILE: apps/stories/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx
function Example (line 10) | function Example({style = styles}) {
FILE: apps/stories/stories/react/Sortable/Quickstart.tsx
function Sortable (line 3) | function Sortable({id, index}: {id: number; index: number}) {
function QuickstartExample (line 9) | function QuickstartExample() {
FILE: apps/stories/stories/react/Sortable/Sortable.stories.tsx
type Story (line 28) | type Story = StoryObj<typeof SortableApp>;
FILE: apps/stories/stories/react/Sortable/SortableApp.tsx
function Sortable (line 6) | function Sortable({id, index}: {id: number; index: number}) {
function App (line 19) | function App() {
function createRange (line 37) | function createRange(length: number) {
FILE: apps/stories/stories/react/Sortable/SortableExample.tsx
type Props (line 19) | interface Props {
function SortableExample (line 33) | function SortableExample({
type SortableProps (line 81) | interface SortableProps {
function Wrapper (line 128) | function Wrapper({
function getWrapperStyles (line 135) | function getWrapperStyles(
FILE: apps/stories/stories/react/Sortable/Table/Table.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof TableExample>;
FILE: apps/stories/stories/react/Sortable/Table/TableExample.tsx
type ColumnKey (line 10) | type ColumnKey = 'name' | 'role' | 'email' | 'status';
type Column (line 12) | interface Column {
type RowData (line 24) | interface RowData {
function TableExample (line 91) | function TableExample() {
type SortableColumnProps (line 158) | interface SortableColumnProps {
function SortableColumn (line 163) | function SortableColumn({column, index}: SortableColumnProps) {
type SortableRowProps (line 188) | interface SortableRowProps {
function SortableRow (line 195) | function SortableRow({row, columns, index, lastRow}: SortableRowProps) {
function getStatusStyles (line 264) | function getStatusStyles(status: string): React.CSSProperties {
FILE: apps/stories/stories/react/Sortable/Transformed/Transformed.stories.tsx
type Story (line 11) | type Story = StoryObj<typeof TransformedExample>;
FILE: apps/stories/stories/react/Sortable/Transformed/TransformedExample.tsx
constant ITEM_HEIGHT (line 12) | const ITEM_HEIGHT = 62;
type Props (line 14) | interface Props {
function TransformedExample (line 25) | function TransformedExample({debug, overlay}: Props) {
type TransformedItemProps (line 73) | interface TransformedItemProps {
function TransformedItem (line 80) | function TransformedItem({id, index, overlay, style}: TransformedItemPro...
FILE: apps/stories/stories/react/Sortable/Tree/Tree.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof Tree>;
FILE: apps/stories/stories/react/Sortable/Tree/Tree.tsx
type Props (line 18) | interface Props {
function Tree (line 24) | function Tree({items, indentation = 50, onChange}: Props) {
FILE: apps/stories/stories/react/Sortable/Tree/TreeItem.tsx
type Props (line 9) | interface Props extends FlattenedItem {
constant INDENTATION (line 13) | const INDENTATION = 50;
function TreeItem (line 25) | function TreeItem({depth, id, index, parentId, onRemove}: Props) {
FILE: apps/stories/stories/react/Sortable/Tree/TreeItemOverlay.tsx
type Props (line 6) | interface Props {
function TreeItemOverlay (line 11) | function TreeItemOverlay({id, count}: Props) {
FILE: apps/stories/stories/react/Sortable/Tree/types.ts
type Item (line 1) | interface Item {
type FlattenedItem (line 7) | interface FlattenedItem extends Item {
FILE: apps/stories/stories/react/Sortable/Tree/utilities.ts
function flattenTree (line 5) | function flattenTree(
function buildTree (line 19) | function buildTree(flattenedItems: FlattenedItem[]): Item[] {
function getDragDepth (line 38) | function getDragDepth(offset: number, indentationWidth: number) {
function getProjection (line 42) | function getProjection(
function getMaxDepth (line 85) | function getMaxDepth(
function getMinDepth (line 94) | function getMinDepth(nextItem: FlattenedItem) {
function getDescendants (line 98) | function getDescendants(
FILE: apps/stories/stories/react/Sortable/Vertical/AutoScrollExample.tsx
type Props (line 13) | interface Props {
function AutoScrollExample (line 19) | function AutoScrollExample({
FILE: apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx
type Story (line 14) | type Story = StoryObj<typeof SortableExample>;
method getItemStyle (line 37) | getItemStyle(id: number) {
method getItemStyle (line 58) | getItemStyle(_: number, index: number) {
type AutoScrollStory (line 126) | type AutoScrollStory = StoryObj<typeof AutoScrollExample>;
FILE: apps/stories/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx
type Props (line 12) | interface Props {
function ReactTinyVirtualListExample (line 16) | function ReactTinyVirtualListExample({debug}: Props) {
type SortableProps (line 50) | interface SortableProps {
function Sortable (line 56) | function Sortable({id, index, style}: SortableProps) {
FILE: apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx
type Props (line 14) | interface Props {
function ReactVirtualExample (line 18) | function ReactVirtualExample({debug}: Props) {
type SortableProps (line 91) | interface SortableProps {
FILE: apps/stories/stories/react/Sortable/Virtualized/ReactWindowExample.tsx
type Props (line 12) | interface Props {
function ReactWindowExample (line 16) | function ReactWindowExample({debug}: Props) {
function Row (line 50) | function Row({
type SortableProps (line 62) | interface SortableProps {
function Sortable (line 68) | function Sortable({id, index, style}: SortableProps) {
FILE: apps/stories/stories/react/Sortable/Virtualized/Virtualized.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof ReactVirtualExample>;
FILE: apps/stories/stories/react/Sortable/docs/examples/ControlledExample.jsx
function ControlledExample (line 8) | function ControlledExample() {
function Sortable (line 26) | function Sortable({id, index}) {
FILE: apps/stories/stories/react/Sortable/docs/examples/Example.jsx
function Example (line 8) | function Example({style = styles}) {
function Sortable (line 26) | function Sortable({id, index}) {
FILE: apps/stories/stories/react/Sortable/docs/examples/UncontrolledExample.jsx
function Example (line 8) | function Example() {
function Sortable (line 20) | function Sortable({id, index}) {
FILE: apps/stories/stories/react/components/Actions/Action.tsx
type Props (line 7) | interface Props extends React.HTMLAttributes<HTMLButtonElement> {
FILE: apps/stories/stories/react/components/Actions/Actions.tsx
function Actions (line 5) | function Actions(props: PropsWithChildren) {
FILE: apps/stories/stories/react/components/Actions/Remove.tsx
type Props (line 5) | interface Props extends Omit<ActionProps, 'variant'> {}
function Remove (line 7) | function Remove(props: Props) {
FILE: apps/stories/stories/react/components/Button/Button.tsx
type Props (line 8) | interface Props extends HTMLAttributes<HTMLElement> {
FILE: apps/stories/stories/react/components/Container/Container.tsx
type Props (line 3) | interface Props {
FILE: apps/stories/stories/react/components/Dropzone/Dropzone.tsx
type Props (line 3) | interface Props {
FILE: apps/stories/stories/react/components/Grid/Grid.tsx
type Props (line 5) | interface Props extends PropsWithChildren {
function Grid (line 9) | function Grid({children, size}: Props) {
FILE: apps/stories/stories/react/components/Handle/Handle.tsx
type HandleProps (line 3) | interface HandleProps extends React.HTMLAttributes<HTMLButtonElement> {
FILE: apps/stories/stories/react/components/Item/Item.tsx
type Props (line 8) | interface Props extends HTMLAttributes<HTMLElement> {
FILE: apps/stories/tests/sortable-css-layers.spec.ts
constant STORY_ID (line 3) | const STORY_ID = 'react-sortable-css-layers--basic-setup';
FILE: packages/abstract/src/core/collision/notifier.ts
class CollisionNotifier (line 10) | class CollisionNotifier extends CorePlugin {
method constructor (line 11) | constructor(manager: DragDropManager<any, any>) {
FILE: packages/abstract/src/core/collision/observer.ts
constant DEFAULT_VALUE (line 10) | const DEFAULT_VALUE: Collisions = [];
class CollisionObserver (line 25) | class CollisionObserver<
method constructor (line 35) | constructor(manager: V) {
method forceUpdate (line 82) | public forceUpdate(immediate = true) {
method computeCollisions (line 99) | public computeCollisions(
method collisions (line 161) | public get collisions() {
FILE: packages/abstract/src/core/collision/types.ts
type CollisionPriority (line 15) | enum CollisionPriority {
type CollisionType (line 35) | enum CollisionType {
type Collision (line 51) | interface Collision {
type Collisions (line 65) | type Collisions = Collision[];
type CollisionDetectorInput (line 73) | interface CollisionDetectorInput<
type CollisionDetector (line 91) | type CollisionDetector = <
FILE: packages/abstract/src/core/collision/utilities.ts
function sortCollisions (line 7) | function sortCollisions(a: Collision, b: Collision) {
FILE: packages/abstract/src/core/entities/draggable/draggable.ts
type Input (line 28) | interface Input<T extends Data = Data> extends EntityInput<T> {
type DraggableStatus (line 44) | type DraggableStatus = 'idle' | 'dragging' | 'dropping';
class Draggable (line 59) | class Draggable<
method constructor (line 63) | constructor(
method pluginConfig (line 113) | public pluginConfig<P extends PluginConstructor>(
method isDropping (line 138) | public get isDropping() {
method isDragging (line 148) | public get isDragging() {
method isDragSource (line 158) | public get isDragSource() {
FILE: packages/abstract/src/core/entities/droppable/droppable.ts
type Input (line 24) | interface Input<T extends Data = Data> extends EntityInput<T> {
class Droppable (line 48) | class Droppable<
method constructor (line 52) | constructor(
method accepts (line 89) | public accepts(draggable: Draggable): boolean {
method isDropTarget (line 129) | public get isDropTarget() {
FILE: packages/abstract/src/core/entities/entity/entity.ts
type Input (line 13) | interface Input<T extends Data = Data> {
class Entity (line 44) | class Entity<
method #flushIdChanges (line 50) | static #flushIdChanges() {
method constructor (line 69) | constructor(input: Input<T>, manager: U | undefined) {
method id (line 119) | public get id(): UniqueIdentifier {
method id (line 124) | public set id(value: UniqueIdentifier) {
method register (line 157) | public register(): CleanupFunction | void {
method unregister (line 165) | public unregister(): void {
method destroy (line 173) | public destroy(): void {
FILE: packages/abstract/src/core/entities/entity/registry.ts
class EntityRegistry (line 11) | class EntityRegistry<T extends Entity> {
method value (line 23) | public get value() {
method has (line 32) | public has(identifier: UniqueIdentifier): boolean {
method get (line 41) | public get(identifier: UniqueIdentifier): T | undefined {
method destroy (line 112) | public destroy() {
method [Symbol.iterator] (line 19) | public [Symbol.iterator]() {
FILE: packages/abstract/src/core/entities/entity/types.ts
type Data (line 8) | type Data = Record<string, any>;
type UniqueIdentifier (line 17) | type UniqueIdentifier = string | number;
type Type (line 26) | type Type = Symbol | string | number;
FILE: packages/abstract/src/core/manager/actions.ts
class DragActions (line 21) | class DragActions<
method constructor (line 31) | constructor(private readonly manager: V) {}
method setDragSource (line 38) | setDragSource(source: T | UniqueIdentifier) {
method setDropTarget (line 52) | setDropTarget(
method start (line 87) | start(args: {
method move (line 170) | move(args: {
method stop (line 231) | stop(
FILE: packages/abstract/src/core/manager/events.ts
type Events (line 9) | type Events = Record<string, (...args: any[]) => void>;
type Preventable (line 16) | type Preventable<T> = T & {
class Monitor (line 30) | class Monitor<T extends Events> {
method addEventListener (line 40) | public addEventListener<U extends keyof T>(name: U, handler: T[U]) {
method removeEventListener (line 56) | public removeEventListener(name: keyof T, handler: T[keyof T]) {
method dispatch (line 70) | protected dispatch<U extends keyof T>(name: U, ...args: any[]) {
type DragDropEventMap (line 92) | type DragDropEventMap<
type DragDropEventHandlers (line 141) | type DragDropEventHandlers<
type CollisionEvent (line 152) | type CollisionEvent<
type BeforeDragStartEvent (line 158) | type BeforeDragStartEvent<
type DragStartEvent (line 164) | type DragStartEvent<
type DragMoveEvent (line 170) | type DragMoveEvent<
type DragOverEvent (line 176) | type DragOverEvent<
type DragEndEvent (line 182) | type DragEndEvent<
class DragDropMonitor (line 195) | class DragDropMonitor<
method constructor (line 205) | constructor(private manager: V) {
method dispatch (line 215) | public dispatch<Key extends keyof DragDropEventMap<T, U, V>>(
function defaultPreventable (line 232) | function defaultPreventable<T>(
FILE: packages/abstract/src/core/manager/manager.ts
type Customizable (line 26) | type Customizable<T> = T | ((defaults: T) => T);
function resolveCustomizable (line 35) | function resolveCustomizable<T>(
type DragDropManagerInput (line 46) | type DragDropManagerInput<T extends DragDropManager<any, any>> = {
class DragDropManager (line 59) | class DragDropManager<T extends Draggable, U extends Droppable> {
method constructor (line 83) | constructor(config?: DragDropManagerInput<any>) {
method plugins (line 135) | get plugins(): Plugin<any>[] {
method plugins (line 144) | set plugins(plugins: Plugins<any>) {
method modifiers (line 153) | get modifiers(): Modifier<any>[] {
method modifiers (line 162) | set modifiers(modifiers: Modifiers<any>) {
method sensors (line 171) | get sensors(): Sensor<any>[] {
method sensors (line 180) | set sensors(sensors: Sensors<any>) {
FILE: packages/abstract/src/core/manager/operation.ts
type DragOperationSnapshot (line 23) | interface DragOperationSnapshot<
class DragOperation (line 44) | class DragOperation<T extends Draggable, U extends Droppable>
method constructor (line 52) | constructor(manager: DragDropManager<T, U>) {
method shape (line 76) | public get shape(): WithHistory<Shape> | null {
method shape (line 91) | public set shape(value: Shape | null) {
method source (line 130) | public get source(): T | null {
method target (line 149) | public get target(): U | null {
method transform (line 164) | public get transform() {
method snapshot (line 185) | public snapshot(): DragOperationSnapshot<T, U> {
method reset (line 209) | public reset() {
FILE: packages/abstract/src/core/manager/registry.ts
class DragDropRegistry (line 31) | class DragDropRegistry<
method constructor (line 41) | constructor(manager: V) {
method register (line 76) | public register(input: any, options?: Record<string, any>) {
method unregister (line 113) | public unregister(input: any) {
method destroy (line 151) | destroy() {
FILE: packages/abstract/src/core/manager/renderer.ts
type Renderer (line 8) | interface Renderer {
method rendering (line 26) | get rendering() {
FILE: packages/abstract/src/core/manager/status.ts
type StatusValue (line 6) | enum StatusValue {
class Status (line 26) | class Status {
method current (line 37) | public get current(): StatusValue {
method idle (line 47) | public get idle(): boolean {
method initializing (line 57) | public get initializing(): boolean {
method initialized (line 67) | public get initialized(): boolean {
method dragging (line 81) | public get dragging(): boolean {
method dropped (line 91) | public get dropped(): boolean {
method set (line 100) | public set(value: StatusValue) {
FILE: packages/abstract/src/core/manager/types.ts
type InferDraggable (line 15) | type InferDraggable<P> =
type InferDroppable (line 30) | type InferDroppable<P> =
FILE: packages/abstract/src/core/modifiers/modifier.ts
type ModifierOptions (line 13) | type ModifierOptions = PluginOptions;
class Modifier (line 25) | class Modifier<
method constructor (line 35) | constructor(
method apply (line 52) | public apply(operation: DragOperationSnapshot<any, any>): Coordinates {
type ModifierConstructor (line 62) | type ModifierConstructor<
type ModifierDescriptor (line 71) | type ModifierDescriptor<
type Modifiers (line 80) | type Modifiers<
FILE: packages/abstract/src/core/plugins/plugin.ts
method constructor (line 32) | constructor(
method enable (line 52) | public enable() {
method disable (line 62) | public disable() {
method isDisabled (line 73) | public isDisabled() {
method configure (line 84) | public configure(options?: U) {
method registerEffect (line 96) | protected registerEffect(callback: () => void) {
method destroy (line 112) | public destroy() {
method configure (line 126) | static configure(options: PluginOptions) {
class CorePlugin (line 137) | class CorePlugin<
FILE: packages/abstract/src/core/plugins/registry.ts
class PluginRegistry (line 18) | class PluginRegistry<
method constructor (line 30) | constructor(private manager: T) {}
method values (line 37) | public get values(): U[] {
method values (line 53) | public set values(entries: Plugins<T>) {
method get (line 92) | public get<X extends W>(plugin: X): InstanceType<X> | undefined {
method register (line 108) | public register<X extends W>(
method unregister (line 138) | public unregister<X extends W>(plugin: X) {
method destroy (line 155) | public destroy() {
FILE: packages/abstract/src/core/plugins/types.ts
type PluginOptions (line 5) | type PluginOptions = Record<string, any>;
type PluginConstructor (line 14) | interface PluginConstructor<
type PluginDescriptor (line 30) | type PluginDescriptor<
type Plugins (line 46) | type Plugins<
type InferPluginOptions (line 55) | type InferPluginOptions<P> =
type InferManager (line 67) | type InferManager<P> =
FILE: packages/abstract/src/core/plugins/utilities.ts
function configure (line 17) | function configure<
function configurator (line 34) | function configurator<T extends PluginConstructor<any, any, any>>(
function descriptor (line 49) | function descriptor<T extends PluginConstructor<any, any, any>>(
FILE: packages/abstract/src/core/sensors/activation.ts
class ActivationController (line 1) | class ActivationController<E extends Event> extends AbortController {
method constructor (line 4) | constructor(
method onEvent (line 15) | onEvent(event: E) {
method activate (line 27) | activate(event: E) {
method abort (line 33) | abort(event?: E) {
type ActivationConstraintOptions (line 40) | interface ActivationConstraintOptions {}
method controller (line 48) | set controller(controller: ActivationController<E>) {
method constructor (line 54) | constructor(protected options: O) {}
method activate (line 59) | public activate(event: E): void {
type ActivationConstraints (line 75) | type ActivationConstraints<E extends Event> = ActivationConstraint<E>[];
FILE: packages/abstract/src/core/sensors/sensor.ts
type SensorOptions (line 16) | type SensorOptions = PluginOptions;
method constructor (line 39) | constructor(
type SensorConstructor (line 61) | type SensorConstructor<
type SensorDescriptor (line 70) | type SensorDescriptor<
type Sensors (line 79) | type Sensors<
FILE: packages/abstract/src/modifiers/axis.ts
type Options (line 14) | interface Options {
class AxisModifier (line 28) | class AxisModifier extends Modifier<DragDropManager<any, any>, Options> {
method apply (line 35) | apply({transform}: DragOperation) {
FILE: packages/abstract/src/modifiers/boundingRectangle.ts
function restrictShapeToBoundingRectangle (line 26) | function restrictShapeToBoundingRectangle(
FILE: packages/abstract/src/modifiers/snap.ts
type Options (line 14) | interface Options {
class SnapModifier (line 36) | class SnapModifier extends Modifier<DragDropManager<any, any>, Options> {
method apply (line 43) | apply({transform}: DragOperation) {
FILE: packages/abstract/tests/manager-modifiers.test.ts
class ClampXModifier (line 10) | class ClampXModifier extends Modifier {
method apply (line 11) | public apply(operation: Parameters<Modifier['apply']>[0]) {
class ClampYModifier (line 16) | class ClampYModifier extends Modifier {
method apply (line 17) | public apply(operation: Parameters<Modifier['apply']>[0]) {
function flush (line 23) | function flush() {
class TrackedModifier (line 86) | class TrackedModifier extends ClampXModifier {
method destroy (line 87) | public destroy() {
method destroy (line 109) | public destroy() {
method destroy (line 159) | public destroy() {
method destroy (line 189) | public destroy() {
method destroy (line 225) | public destroy() {
class TrackedModifier (line 108) | class TrackedModifier extends ClampXModifier {
method destroy (line 87) | public destroy() {
method destroy (line 109) | public destroy() {
method destroy (line 159) | public destroy() {
method destroy (line 189) | public destroy() {
method destroy (line 225) | public destroy() {
class TrackedModifier (line 158) | class TrackedModifier extends ClampXModifier {
method destroy (line 87) | public destroy() {
method destroy (line 109) | public destroy() {
method destroy (line 159) | public destroy() {
method destroy (line 189) | public destroy() {
method destroy (line 225) | public destroy() {
class TrackedModifier (line 188) | class TrackedModifier extends ClampXModifier {
method destroy (line 87) | public destroy() {
method destroy (line 109) | public destroy() {
method destroy (line 159) | public destroy() {
method destroy (line 189) | public destroy() {
method destroy (line 225) | public destroy() {
class TrackedModifier (line 224) | class TrackedModifier extends ClampXModifier {
method destroy (line 87) | public destroy() {
method destroy (line 109) | public destroy() {
method destroy (line 159) | public destroy() {
method destroy (line 189) | public destroy() {
method destroy (line 225) | public destroy() {
FILE: packages/abstract/tests/plugin-registry.test.ts
type TestOptions (line 11) | interface TestOptions {
class PluginA (line 15) | class PluginA extends Plugin {
method constructor (line 16) | constructor(manager: DragDropManager, public options?: TestOptions) {
class PluginB (line 21) | class PluginB extends Plugin {
method constructor (line 22) | constructor(manager: DragDropManager, public options?: TestOptions) {
class PluginC (line 27) | class PluginC extends CorePlugin {
method constructor (line 28) | constructor(manager: DragDropManager, public options?: TestOptions) {
function indexOf (line 33) | function indexOf(manager: DragDropManager, PluginClass: any): number {
class DepPlugin (line 72) | class DepPlugin extends Plugin {
method constructor (line 73) | constructor(manager: DragDropManager) {
class ConsumerPlugin (line 78) | class ConsumerPlugin extends Plugin {
method constructor (line 79) | constructor(manager: DragDropManager) {
class TrackedPlugin (line 111) | class TrackedPlugin extends Plugin {
method constructor (line 112) | constructor(manager: DragDropManager) {
method constructor (line 185) | constructor(manager: DragDropManager) {
class TrackedPlugin (line 184) | class TrackedPlugin extends Plugin {
method constructor (line 112) | constructor(manager: DragDropManager) {
method constructor (line 185) | constructor(manager: DragDropManager) {
FILE: packages/dom/src/core/entities/draggable/draggable.ts
type Input (line 12) | interface Input<T extends Data = Data> extends DraggableInput<T> {
class Draggable (line 18) | class Draggable<T extends Data = Data> extends AbstractDraggable<
method constructor (line 22) | constructor(
FILE: packages/dom/src/core/entities/droppable/droppable.ts
type OptionalInput (line 14) | type OptionalInput = 'collisionDetector';
type Input (line 16) | interface Input<T extends Data = Data>
class Droppable (line 22) | class Droppable<T extends Data = Data> extends AbstractDroppable<
method constructor (line 26) | constructor(
method element (line 113) | set element(element: Element | undefined) {
method element (line 117) | get element() {
FILE: packages/dom/src/core/manager/events.ts
type Events (line 7) | type Events = DragDropEventMap<Draggable, Droppable, DragDropManager>;
type CollisionEvent (line 9) | type CollisionEvent = Events['collision'];
type BeforeDragStartEvent (line 10) | type BeforeDragStartEvent = Events['beforedragstart'];
type DragStartEvent (line 11) | type DragStartEvent = Events['dragstart'];
type DragMoveEvent (line 12) | type DragMoveEvent = Events['dragmove'];
type DragOverEvent (line 13) | type DragOverEvent = Events['dragover'];
type DragEndEvent (line 14) | type DragEndEvent = Events['dragend'];
FILE: packages/dom/src/core/manager/manager.ts
type Input (line 25) | interface Input extends DragDropManagerInput<DragDropManager> {}
class DragDropManager (line 37) | class DragDropManager<
method constructor (line 42) | constructor(input: Input = {}) {
FILE: packages/dom/src/core/plugins/accessibility/Accessibility.ts
type Options (line 17) | interface Options {
class Accessibility (line 50) | class Accessibility extends Plugin<DragDropManager> {
method constructor (line 51) | constructor(manager: DragDropManager, options?: Options) {
function debounce (line 221) | function debounce(fn: () => void, wait: number) {
FILE: packages/dom/src/core/plugins/accessibility/HiddenText.ts
function createHiddenText (line 1) | function createHiddenText(id: string, value: string) {
FILE: packages/dom/src/core/plugins/accessibility/LiveRegion.ts
function createLiveRegion (line 1) | function createLiveRegion(id: string) {
FILE: packages/dom/src/core/plugins/accessibility/defaults.ts
method dragstart (line 17) | dragstart({operation: {source}}) {
method dragover (line 22) | dragover({operation: {source, target}}) {
method dragend (line 31) | dragend({operation: {source, target}, canceled}) {
FILE: packages/dom/src/core/plugins/accessibility/types.ts
type GetAnnouncementForEvent (line 5) | type GetAnnouncementForEvent<
type Announcements (line 12) | interface Announcements {
type ScreenReaderInstructions (line 19) | interface ScreenReaderInstructions {
FILE: packages/dom/src/core/plugins/accessibility/utilities.ts
function isFocusable (line 1) | function isFocusable(element: Element) {
FILE: packages/dom/src/core/plugins/cursor/Cursor.ts
type CursorPluginOptions (line 6) | interface CursorPluginOptions {
class Cursor (line 14) | class Cursor extends Plugin<DragDropManager> {
method constructor (line 15) | constructor(
FILE: packages/dom/src/core/plugins/feedback/Feedback.ts
type FeedbackType (line 39) | type FeedbackType = 'default' | 'move' | 'clone' | 'none';
type KeyboardTransition (line 41) | interface KeyboardTransition {
type FeedbackOptions (line 46) | interface FeedbackOptions {
type State (line 53) | interface State {
class Feedback (line 66) | class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
method constructor (line 85) | constructor(manager: DragDropManager, options?: FeedbackOptions) {
method #trackOverlayRoot (line 106) | #trackOverlayRoot(styleInjector: StyleInjector | undefined) {
method #render (line 118) | #render() {
FILE: packages/dom/src/core/plugins/feedback/constants.ts
constant ATTR_PREFIX (line 1) | const ATTR_PREFIX = 'data-dnd-';
constant DROPPING_ATTRIBUTE (line 2) | const DROPPING_ATTRIBUTE = `${ATTR_PREFIX}dropping`;
constant CSS_PREFIX (line 3) | const CSS_PREFIX = '--dnd-';
constant ATTRIBUTE (line 4) | const ATTRIBUTE = `${ATTR_PREFIX}dragging`;
constant PLACEHOLDER_ATTRIBUTE (line 5) | const PLACEHOLDER_ATTRIBUTE = `${ATTR_PREFIX}placeholder`;
constant IGNORED_ATTRIBUTES (line 7) | const IGNORED_ATTRIBUTES = [
constant IGNORED_STYLES (line 15) | const IGNORED_STYLES = ['view-transition-name'];
constant CSS_RULES (line 17) | const CSS_RULES = `
FILE: packages/dom/src/core/plugins/feedback/dropAnimation.ts
type DropAnimationOptions (line 18) | interface DropAnimationOptions {
type DropAnimationFunction (line 25) | type DropAnimationFunction = (context: {
type DropAnimation (line 34) | type DropAnimation = DropAnimationOptions | DropAnimationFunction;
constant DEFAULT_DURATION (line 36) | const DEFAULT_DURATION = 250;
constant DEFAULT_EASING (line 37) | const DEFAULT_EASING = 'ease';
type DropAnimationContext (line 39) | interface DropAnimationContext {
function runDropAnimation (line 55) | function runDropAnimation(ctx: DropAnimationContext): void {
FILE: packages/dom/src/core/plugins/feedback/observers.ts
function createElementMutationObserver (line 13) | function createElementMutationObserver(
function createDocumentMutationObserver (line 88) | function createDocumentMutationObserver(
type ResizeObserverContext (line 140) | interface ResizeObserverContext {
function createResizeObserver (line 161) | function createResizeObserver(ctx: ResizeObserverContext): ResizeObserver {
FILE: packages/dom/src/core/plugins/feedback/types.ts
type Transition (line 1) | interface Transition {
FILE: packages/dom/src/core/plugins/feedback/utilities.ts
function createPlaceholder (line 18) | function createPlaceholder(
function findContainedDroppables (line 52) | function findContainedDroppables(
function proxyDroppableElements (line 74) | function proxyDroppableElements(
function configurePlaceholder (line 108) | function configurePlaceholder(placeholder: Element, type = 'hidden'): vo...
function isSameFrame (line 118) | function isSameFrame(element: Element, target: Element): boolean {
function preventPopoverClose (line 126) | function preventPopoverClose(event: Event) {
function isTableRow (line 139) | function isTableRow(element: Element): element is HTMLTableRowElement {
FILE: packages/dom/src/core/plugins/scrolling/AutoScroller.ts
type AutoScrollerOptions (line 10) | interface AutoScrollerOptions {
constant AUTOSCROLL_INTERVAL (line 25) | const AUTOSCROLL_INTERVAL = 10;
class AutoScroller (line 27) | class AutoScroller extends Plugin<DragDropManager, AutoScrollerOptions> {
method constructor (line 30) | constructor(manager: DragDropManager, options?: AutoScrollerOptions) {
FILE: packages/dom/src/core/plugins/scrolling/ScrollIntent.ts
constant DIRECTIONS (line 11) | const DIRECTIONS = [ScrollDirection.Forward, ScrollDirection.Reverse];
class ScrollIntent (line 13) | class ScrollIntent {
method isLocked (line 17) | public isLocked(): boolean {
class ScrollIntentTracker (line 22) | class ScrollIntentTracker extends Plugin<DragDropManager> {
method constructor (line 25) | constructor(manager: DragDropManager) {
method current (line 69) | get current(): ScrollIntent | null {
function getDirection (line 74) | function getDirection(a: number, b: number): ScrollDirection {
FILE: packages/dom/src/core/plugins/scrolling/ScrollListener.ts
class ScrollListener (line 11) | class ScrollListener extends CorePlugin<DragDropManager> {
method constructor (line 14) | constructor(manager: DragDropManager) {
FILE: packages/dom/src/core/plugins/scrolling/ScrollLock.ts
constant LOCKED (line 4) | const LOCKED = true;
constant UNLOCKED (line 5) | const UNLOCKED = false;
class ScrollLock (line 7) | class ScrollLock {
method isLocked (line 11) | public isLocked(direction?: Direction): boolean {
method unlock (line 25) | public unlock(direction: Direction) {
FILE: packages/dom/src/core/plugins/scrolling/Scroller.ts
type ScrollOptions (line 21) | interface ScrollOptions {
class Scroller (line 26) | class Scroller extends CorePlugin<DragDropManager> {
method constructor (line 34) | constructor(manager: DragDropManager) {
function getScrollIntent (line 227) | function getScrollIntent(value: number) {
FILE: packages/dom/src/core/plugins/selection/PreventSelection.ts
constant CSS_RULES (line 7) | const CSS_RULES =
class PreventSelection (line 10) | class PreventSelection extends Plugin<DragDropManager> {
method constructor (line 11) | constructor(public manager: DragDropManager) {
function removeSelection (line 47) | function removeSelection() {
FILE: packages/dom/src/core/plugins/stylesheet/StyleInjector.ts
type CleanupFunction (line 7) | type CleanupFunction = () => void;
type StyleInjectorOptions (line 9) | interface StyleInjectorOptions {
type StyleRegistration (line 13) | interface StyleRegistration {
class StyleInjector (line 23) | class StyleInjector extends CorePlugin<
method constructor (line 32) | constructor(manager: DragDropManager, options?: StyleInjectorOptions) {
method register (line 45) | public register(cssRules: string): CleanupFunction {
method addRoot (line 57) | public addRoot(root: Document | ShadowRoot): CleanupFunction {
method sourceRoot (line 74) | private get sourceRoot() {
method targetRoot (line 80) | private get targetRoot() {
method roots (line 86) | private get roots(): Set<Document | ShadowRoot> {
method #syncStyles (line 99) | #syncStyles() {
method #inject (line 116) | #inject(root: Document | ShadowRoot, cssRules: string): CleanupFunction {
method #injectStyleElement (line 160) | #injectStyleElement(
method #injectAdoptedSheet (line 207) | #injectAdoptedSheet(
FILE: packages/dom/src/core/sensors/drag/DragSensor.ts
type DragSensorOptions (line 11) | interface DragSensorOptions {}
class DragSensor (line 16) | class DragSensor extends Sensor<DragDropManager, DragSensorOptions> {
method constructor (line 20) | constructor(
method bind (line 32) | public bind(source: Draggable, options: DragSensorOptions) {
method handleDragEnter (line 104) | private handleDragEnter(event: DragEvent) {
method handleDragLeave (line 125) | private handleDragLeave(event: DragEvent) {
method handleDragOver (line 131) | private handleDragOver(event: DragEvent) {
method handlePointerMove (line 139) | private handlePointerMove(event: DragEvent) {
method handlePointerUp (line 162) | private handlePointerUp(event: DragEvent) {
method destroy (line 170) | public destroy() {
FILE: packages/dom/src/core/sensors/drag/encoding.ts
function encode (line 1) | function encode(data: Record<string, any>) {
function decode (line 5) | function decode(data: string) {
constant PREFIX (line 9) | const PREFIX = '\u200B\u200C';
constant SUFFIX (line 10) | const SUFFIX = '\u200C\u200B';
function encodeUpperCase (line 12) | function encodeUpperCase(str: string): string {
function decodeUpperCase (line 16) | function decodeUpperCase(str: string): string {
FILE: packages/dom/src/core/sensors/keyboard/KeyboardSensor.ts
type KeyCode (line 17) | type KeyCode = KeyboardEvent['code'];
type KeyboardCodes (line 19) | type KeyboardCodes = {
type KeyboardSensorOptions (line 29) | interface KeyboardSensorOptions {
method preventActivation (line 67) | preventActivation(event, source) {
class KeyboardSensor (line 76) | class KeyboardSensor extends Sensor<
method constructor (line 80) | constructor(
method bind (line 91) | public bind(source: Draggable, options = this.options) {
method handleStart (line 147) | protected handleStart(
method handleKeyDown (line 192) | protected handleKeyDown(
method handleEnd (line 220) | protected handleEnd(event: Event, canceled: boolean) {
method handleMove (line 229) | protected handleMove(
method sideEffects (line 274) | private sideEffects() {
method cleanup (line 286) | protected cleanup() {
method destroy (line 291) | public destroy() {
function isKeycode (line 302) | function isKeycode(event: KeyboardEvent, codes: KeyCode[]) {
FILE: packages/dom/src/core/sensors/pointer/DelayConstraint.ts
type DelayConstraintOptions (line 9) | interface DelayConstraintOptions {
class DelayConstraint (line 14) | class DelayConstraint extends ActivationConstraint<
method onEvent (line 21) | onEvent(event: PointerEvent) {
method abort (line 49) | abort() {
FILE: packages/dom/src/core/sensors/pointer/DistanceConstraint.ts
type DistanceConstraintOptions (line 9) | interface DistanceConstraintOptions {
class DistanceConstraint (line 14) | class DistanceConstraint extends ActivationConstraint<
method onEvent (line 20) | onEvent(event: PointerEvent) {
method abort (line 51) | abort() {
FILE: packages/dom/src/core/sensors/pointer/PointerActivationConstraints.ts
class PointerActivationConstraints (line 4) | class PointerActivationConstraints {
FILE: packages/dom/src/core/sensors/pointer/PointerSensor.ts
type Maybe (line 29) | type Maybe<T> = T | undefined;
type PointerSensorOptions (line 31) | interface PointerSensorOptions {
method activationConstraints (line 45) | activationConstraints(event, source) {
method preventActivation (line 73) | preventActivation(event, source) {
type LatestState (line 85) | type LatestState = {
class PointerSensor (line 94) | class PointerSensor extends Sensor<
method constructor (line 106) | constructor(
method activationConstraints (line 117) | protected activationConstraints(
method bind (line 133) | public bind(source: Draggable, options = this.options) {
method handlePointerDown (line 165) | protected handlePointerDown(
method handlePointerMove (line 266) | protected handlePointerMove(event: PointerEvent, source: Draggable) {
method handlePointerUp (line 289) | private handlePointerUp(event: PointerEvent) {
method handleKeyDown (line 305) | protected handleKeyDown(event: KeyboardEvent) {
method handleStart (line 312) | protected handleStart(source: Draggable, event: PointerEvent) {
method handleCancel (line 374) | protected handleCancel(event: Event) {
method cleanup (line 384) | protected cleanup() {
method destroy (line 400) | public destroy() {
function isCapturedBySensor (line 410) | function isCapturedBySensor(event: Event) {
function preventDefault (line 414) | function preventDefault(event: Event) {
function noop (line 418) | function noop() {}
function patchWindow (line 422) | function patchWindow(window: Window | null) {
FILE: packages/dom/src/core/sensors/types.ts
type Sensors (line 5) | type Sensors = AbstractSensors<DragDropManager>;
FILE: packages/dom/src/modifiers/RestrictToElement.ts
type Options (line 8) | interface Options {
class RestrictToElement (line 15) | class RestrictToElement extends Modifier<DragDropManager, Options> {
method constructor (line 18) | constructor(manager: DragDropManager, options?: Options) {
method apply (line 72) | apply(operation: DragDropManager['dragOperation']) {
FILE: packages/dom/src/modifiers/RestrictToWindow.ts
class RestrictToWindow (line 8) | class RestrictToWindow extends Modifier<DragDropManager> {
method constructor (line 9) | constructor(manager: DragDropManager) {
method apply (line 39) | apply({shape, transform}: DragOperation) {
FILE: packages/dom/src/plugins/debug/debug.ts
class Debug (line 7) | class Debug extends Plugin<DragDropManager> {
method constructor (line 8) | constructor(manager: DragDropManager) {
function createDebugElement (line 137) | function createDebugElement(tagName = 'div') {
FILE: packages/dom/src/sortable/plugins/OptimisticSortingPlugin.ts
class OptimisticSortingPlugin (line 11) | class OptimisticSortingPlugin extends Plugin<DragDropManager> {
method constructor (line 12) | constructor(manager: DragDropManager) {
function reorder (line 219) | function reorder(
function sortByIndex (line 230) | function sortByIndex(a: Sortable, b: Sortable) {
function sort (line 234) | function sort(instances: Set<Sortable>) {
FILE: packages/dom/src/sortable/plugins/SortableKeyboardPlugin.ts
constant TOLERANCE (line 16) | const TOLERANCE = 10;
class SortableKeyboardPlugin (line 18) | class SortableKeyboardPlugin extends Plugin<DragDropManager> {
method constructor (line 19) | constructor(manager: DragDropManager) {
function getDirection (line 187) | function getDirection(delta: Coordinates) {
FILE: packages/dom/src/sortable/sortable.ts
type SortableTransition (line 33) | interface SortableTransition {
type SortableInput (line 57) | interface SortableInput<T extends Data>
type TemporaryState (line 95) | interface TemporaryState {
class Sortable (line 106) | class Sortable<T extends Data = Data> {
method initialIndex (line 117) | get initialIndex() {
method initialGroup (line 121) | get initialGroup() {
method constructor (line 130) | constructor(
method animate (line 212) | protected animate() {
method manager (line 286) | public get manager(): DragDropManager<any, any> | undefined {
method manager (line 290) | public set manager(manager: DragDropManager<any, any> | undefined) {
method element (line 299) | public set element(element: Element | undefined) {
method element (line 317) | public get element() {
method target (line 325) | public set target(target: Element | undefined) {
method target (line 329) | public get target() {
method source (line 333) | public set source(source: Element | undefined) {
method source (line 337) | public get source() {
method disabled (line 341) | public get disabled() {
method plugins (line 345) | public set plugins(value: Plugins | undefined) {
method disabled (line 349) | public set disabled(value: boolean) {
method data (line 356) | public set data(data: T) {
method handle (line 363) | public set handle(handle: Element | undefined) {
method id (line 367) | public set id(id: UniqueIdentifier) {
method id (line 372) | public get id() {
method sensors (line 376) | public set sensors(value: Sensors | undefined) {
method modifiers (line 380) | public set modifiers(value: Modifiers | undefined) {
method collisionPriority (line 384) | public set collisionPriority(value: CollisionPriority | number | undef...
method collisionDetector (line 388) | public set collisionDetector(value: CollisionDetector | undefined) {
method alignment (line 392) | public set alignment(value: Alignment | undefined) {
method alignment (line 396) | public get alignment() {
method type (line 400) | public set type(type: Type | undefined) {
method type (line 407) | public get type() {
method accept (line 411) | public set accept(value: Droppable['accept']) {
method accept (line 415) | public get accept() {
method isDropTarget (line 419) | public get isDropTarget() {
method isDragSource (line 426) | public get isDragSource() {
method isDragging (line 433) | public get isDragging() {
method isDropping (line 440) | public get isDropping() {
method status (line 444) | public get status() {
method refreshShape (line 448) | public refreshShape() {
method accepts (line 452) | public accepts(draggable: Draggable): boolean {
class SortableDraggable (line 480) | class SortableDraggable<T extends Data> extends Draggable<T> {
method constructor (line 481) | constructor(
method index (line 489) | get index() {
method initialIndex (line 493) | get initialIndex() {
method group (line 497) | get group() {
method initialGroup (line 501) | get initialGroup() {
class SortableDroppable (line 506) | class SortableDroppable<T extends Data> extends Droppable<T> {
method constructor (line 507) | constructor(
method index (line 515) | get index() {
method group (line 519) | get group() {
FILE: packages/dom/src/sortable/utilities.ts
function isSortable (line 6) | function isSortable(
function isSortableOperation (line 14) | function isSortableOperation(
FILE: packages/dom/src/utilities/animations/forceFinishAnimations.ts
function getDocumentAnimations (line 8) | function getDocumentAnimations(element: Element): Animation[] {
function forceFinishAnimations (line 35) | function forceFinishAnimations(
FILE: packages/dom/src/utilities/animations/getFinalKeyframe.ts
function getFinalKeyframe (line 3) | function getFinalKeyframe(
FILE: packages/dom/src/utilities/bounding-rectangle/getBoundingRectangle.ts
function getBoundingRectangle (line 3) | function getBoundingRectangle(element: Element): BoundingRectangle {
FILE: packages/dom/src/utilities/bounding-rectangle/getViewportBoundingRectangle.ts
function getViewportBoundingRectangle (line 16) | function getViewportBoundingRectangle(
FILE: packages/dom/src/utilities/bounding-rectangle/getVisibleBoundingRectangle.ts
function getVisibleBoundingRectangle (line 11) | function getVisibleBoundingRectangle(
FILE: packages/dom/src/utilities/bounding-rectangle/isOverflowVisible.ts
function isOverflowVisible (line 7) | function isOverflowVisible(
function isDetailsElement (line 22) | function isDetailsElement(element: Element): element is HTMLDetailsEleme...
FILE: packages/dom/src/utilities/bounding-rectangle/isRectEqual.ts
function isRectEqual (line 3) | function isRectEqual(
FILE: packages/dom/src/utilities/bounding-rectangle/isVisible.ts
function isVisible (line 3) | function isVisible(
FILE: packages/dom/src/utilities/coordinates/getEventCoordinates.ts
function getEventCoordinates (line 3) | function getEventCoordinates(event: PointerEvent): Coordinates {
FILE: packages/dom/src/utilities/element/cloneElement.ts
function cloneElement (line 1) | function cloneElement(element: Element): Element {
function isField (line 36) | function isField(
function isCanvasElement (line 42) | function isCanvasElement(element: Element): element is HTMLCanvasElement {
FILE: packages/dom/src/utilities/element/getElementFromPoint.ts
function getElementFromPoint (line 3) | function getElementFromPoint(
function isIFrameElement (line 25) | function isIFrameElement(
FILE: packages/dom/src/utilities/element/isInteractiveElement.ts
function isInteractiveElement (line 1) | function isInteractiveElement(element: Element): boolean {
FILE: packages/dom/src/utilities/event-listeners/Listeners.ts
type EventListenerDescriptor (line 1) | interface EventListenerDescriptor {
type EventListenerInput (line 7) | type EventListenerInput = EventListenerDescriptor[] | EventListenerDescr...
type EventListenerEntry (line 9) | type EventListenerEntry = [EventTarget, EventListenerDescriptor];
class Listeners (line 11) | class Listeners {
method constructor (line 14) | constructor() {}
method bind (line 16) | public bind(target: EventTarget | EventTarget[], input: EventListenerI...
FILE: packages/dom/src/utilities/execution-context/getDocument.ts
function getDocument (line 7) | function getDocument(target: Event['target'] | undefined): Document {
FILE: packages/dom/src/utilities/execution-context/getDocuments.ts
function getDocuments (line 11) | function getDocuments(
FILE: packages/dom/src/utilities/execution-context/getFixedPositionOffset.ts
function getFixedPositionOffset (line 8) | function getFixedPositionOffset(): {x: number; y: number} {
FILE: packages/dom/src/utilities/execution-context/getRoot.ts
function getRoot (line 5) | function getRoot(target: Event['target'] | undefined): Document | Shadow...
FILE: packages/dom/src/utilities/execution-context/getWindow.ts
function getWindow (line 4) | function getWindow(
FILE: packages/dom/src/utilities/execution-context/isSafari.ts
function isSafari (line 1) | function isSafari() {
FILE: packages/dom/src/utilities/execution-context/prefersReducedMotion.ts
function prefersReducedMotion (line 1) | function prefersReducedMotion(window: Window): boolean {
FILE: packages/dom/src/utilities/frame/getFrameElement.ts
function getFrameElement (line 1) | function getFrameElement(el: Element | undefined) {
FILE: packages/dom/src/utilities/frame/getFrameElements.ts
function getFrameElements (line 3) | function getFrameElements(el: Element | undefined) {
FILE: packages/dom/src/utilities/frame/getFrameTransform.ts
function getFrameTransform (line 8) | function getFrameTransform(
function getScale (line 42) | function getScale(
FILE: packages/dom/src/utilities/misc/generateUniqueId.ts
function generateUniqueId (line 3) | function generateUniqueId(prefix: string) {
FILE: packages/dom/src/utilities/observers/FrameObserver.ts
function addFrameListener (line 25) | function addFrameListener(frame: Element, callback: PositionObserverCall...
function observeParentFrames (line 57) | function observeParentFrames(
function addScrollListener (line 71) | function addScrollListener(element: Element, callback: EventListener) {
class FrameObserver (line 107) | class FrameObserver {
method constructor (line 112) | constructor(
FILE: packages/dom/src/utilities/observers/PositionObserver.ts
type PositionObserverCallback (line 11) | type PositionObserverCallback = (
constant THROTTLE_INTERVAL (line 16) | const THROTTLE_INTERVAL = 75;
class PositionObserver (line 18) | class PositionObserver {
method constructor (line 19) | constructor(
method #notify (line 162) | #notify() {
method #updateDebug (line 174) | #updateDebug() {
FILE: packages/dom/src/utilities/observers/ResizeNotifier.ts
method observe (line 6) | observe() {}
method unobserve (line 7) | unobserve() {}
method disconnect (line 8) | disconnect() {}
class ResizeNotifier (line 11) | class ResizeNotifier extends Observer {
method constructor (line 14) | constructor(callback: ResizeObserverCallback) {
FILE: packages/dom/src/utilities/popover/hidePopover.ts
function hidePopover (line 3) | function hidePopover(element: Element) {
FILE: packages/dom/src/utilities/popover/showPopover.ts
function showPopover (line 3) | function showPopover(element: Element) {
FILE: packages/dom/src/utilities/popover/supportsPopover.ts
function supportsPopover (line 1) | function supportsPopover(element: Element): element is Element & {
FILE: packages/dom/src/utilities/scheduling/scheduler.ts
type Callback (line 1) | type Callback = () => void;
class Scheduler (line 3) | class Scheduler<T extends (callback: Callback) => any> {
method constructor (line 4) | constructor(private scheduler: T) {}
method schedule (line 10) | public schedule(task: () => void): Promise<void> {
FILE: packages/dom/src/utilities/scheduling/throttle.ts
function throttle (line 3) | function throttle<T extends (...args: any[]) => any>(
FILE: packages/dom/src/utilities/scheduling/timeout.ts
function timeout (line 1) | function timeout(callback: () => void, duration: number): () => void {
FILE: packages/dom/src/utilities/scroll/canScroll.ts
function canScroll (line 5) | function canScroll(scrollableElement: Element, by?: Coordinates) {
FILE: packages/dom/src/utilities/scroll/detectScrollIntent.ts
type ScrollDirection (line 8) | enum ScrollDirection {
type ScrollIntent (line 24) | interface ScrollIntent {
function detectScrollIntent (line 29) | function detectScrollIntent(
FILE: packages/dom/src/utilities/scroll/documentScrollingElement.ts
function isDocumentScrollingElement (line 4) | function isDocumentScrollingElement(element: Element | null) {
FILE: packages/dom/src/utilities/scroll/getScrollPosition.ts
function getScrollPosition (line 6) | function getScrollPosition(scrollableElement: Element) {
FILE: packages/dom/src/utilities/scroll/getScrollableAncestors.ts
type Options (line 10) | interface Options {
function getScrollableAncestors (line 21) | function getScrollableAncestors(
function getFirstScrollableAncestor (line 89) | function getFirstScrollableAncestor(node: Node | null): Element | null {
FILE: packages/dom/src/utilities/scroll/getScrollableElement.ts
function getScrollableElement (line 8) | function getScrollableElement(element: EventTarget | null) {
FILE: packages/dom/src/utilities/scroll/isFixed.ts
function isFixed (line 3) | function isFixed(
FILE: packages/dom/src/utilities/scroll/isScrollable.ts
function isScrollable (line 3) | function isScrollable(
FILE: packages/dom/src/utilities/scroll/scrollIntoViewIfNeeded.ts
function scrollIntoViewIfNeeded (line 5) | function scrollIntoViewIfNeeded(el: Element, centerIfNeeded = false) {
FILE: packages/dom/src/utilities/shapes/DOMRectangle.ts
type DOMRectangleOptions (line 13) | interface DOMRectangleOptions {
class DOMRectangle (line 20) | class DOMRectangle extends Rectangle {
method constructor (line 21) | constructor(element: Element, options: DOMRectangleOptions = {}) {
function getProjectedTransform (line 123) | function getProjectedTransform(
FILE: packages/dom/src/utilities/styles/Styles.ts
type ExtractStringProperties (line 3) | type ExtractStringProperties<T> = {
type StyleDeclaration (line 7) | type StyleDeclaration = ExtractStringProperties<CSSStyleDeclaration> & {
class Styles (line 11) | class Styles {
method constructor (line 14) | constructor(private element: Element) {}
method set (line 16) | public set(properties: Record<string, string | number>, prefix = '') {
method remove (line 37) | public remove(properties: string[], prefix = '') {
method reset (line 51) | public reset() {
FILE: packages/dom/src/utilities/styles/getComputedStyles.ts
function getComputedStyles (line 14) | function getComputedStyles(
function computeStyles (line 31) | function computeStyles(element: Element): CSSStyleDeclaration {
FILE: packages/dom/src/utilities/transform/animateTransform.ts
type Arguments (line 1) | interface Arguments {
function animateTransform (line 7) | function animateTransform({element, keyframes, options}: Arguments) {
FILE: packages/dom/src/utilities/transform/applyTransform.ts
function applyTransform (line 5) | function applyTransform(
FILE: packages/dom/src/utilities/transform/computeTranslate.ts
function computeTranslate (line 6) | function computeTranslate(
FILE: packages/dom/src/utilities/transform/inverseTransform.ts
function inverseTransform (line 5) | function inverseTransform(
FILE: packages/dom/src/utilities/transform/parseScale.ts
function parseScale (line 1) | function parseScale(scale: string) {
FILE: packages/dom/src/utilities/transform/parseTransform.ts
type Transform (line 6) | interface Transform extends Coordinates {
function parseTransform (line 12) | function parseTransform(computedStyles: {
function parseTransformMatrix (line 52) | function parseTransformMatrix(transform: string) {
FILE: packages/dom/src/utilities/transform/parseTranslate.ts
function parseTranslate (line 1) | function parseTranslate(translate: string) {
FILE: packages/dom/src/utilities/type-guards/isDocument.ts
function isDocument (line 3) | function isDocument(node: Node): node is Document {
FILE: packages/dom/src/utilities/type-guards/isElement.ts
function isElement (line 4) | function isElement(target: EventTarget | null): target is Element {
FILE: packages/dom/src/utilities/type-guards/isHTMLElement.ts
function isHTMLElement (line 5) | function isHTMLElement(
FILE: packages/dom/src/utilities/type-guards/isHTMLTableRowElement.ts
function isHTMLTableRowElement (line 1) | function isHTMLTableRowElement(
FILE: packages/dom/src/utilities/type-guards/isKeyboardEvent.ts
function isKeyboardEvent (line 3) | function isKeyboardEvent(
FILE: packages/dom/src/utilities/type-guards/isKeyframeEffect.ts
function isKeyframeEffect (line 1) | function isKeyframeEffect(
FILE: packages/dom/src/utilities/type-guards/isNode.ts
function isNode (line 1) | function isNode(node: Object): node is Node {
FILE: packages/dom/src/utilities/type-guards/isPointerEvent.ts
function isPointerEvent (line 3) | function isPointerEvent(
FILE: packages/dom/src/utilities/type-guards/isSVGElement.ts
function isSVGElement (line 3) | function isSVGElement(node: Node): node is SVGElement {
FILE: packages/dom/src/utilities/type-guards/isShadowRoot.ts
function isShadowRoot (line 4) | function isShadowRoot(target: EventTarget | null): target is ShadowRoot {
FILE: packages/dom/src/utilities/type-guards/isTextInput.ts
function isTextInput (line 3) | function isTextInput(target: EventTarget | null) {
function isContentEditable (line 13) | function isContentEditable(element: Element) {
FILE: packages/dom/src/utilities/type-guards/isWindow.ts
function isWindow (line 1) | function isWindow(element: Object): element is typeof window {
FILE: packages/dom/src/utilities/type-guards/supportsStyle.ts
function supportsStyle (line 1) | function supportsStyle(
FILE: packages/dom/src/utilities/type-guards/supportsViewTransition.ts
type ViewTransition (line 1) | interface ViewTransition {
function supportsViewTransition (line 8) | function supportsViewTransition(
FILE: packages/dom/tests/pointer-sensor.test.ts
function createPointerEvent (line 6) | function createPointerEvent(
FILE: packages/dom/tests/sortable-utilities.test.ts
function createSortable (line 16) | function createSortable(id: string | number, index: number, group?: stri...
function createDraggable (line 24) | function createDraggable(id: string | number) {
function createDroppable (line 28) | function createDroppable(id: string | number) {
function mockOperation (line 32) | function mockOperation(
FILE: packages/geometry/src/distance/distance.ts
function exceedsDistance (line 8) | function exceedsDistance(
FILE: packages/geometry/src/distance/types.ts
type Distance (line 3) | type Distance =
FILE: packages/geometry/src/point/Point.ts
class Point (line 7) | class Point implements Coordinates {
method constructor (line 12) | constructor(public x: number, public y: number) {}
method delta (line 20) | static delta(a: Point, b: Point): Point {
method distance (line 30) | static distance(a: Point, b: Point): number {
method equals (line 40) | static equals(a: Point, b: Point): boolean {
method from (line 44) | static from({x, y}: Coordinates) {
FILE: packages/geometry/src/position/position.ts
class Position (line 6) | class Position extends ValueHistory<Point> {
method constructor (line 7) | constructor(initialValue: Coordinates) {
method delta (line 18) | public get delta() {
method direction (line 23) | public get direction() {
method current (line 44) | public get current() {
method current (line 48) | public set current(coordinates: Coordinates) {
method reset (line 70) | public reset(coordinates = this.defaultValue) {
FILE: packages/geometry/src/shapes/Rectangle.ts
class Rectangle (line 6) | class Rectangle implements Shape {
method constructor (line 7) | constructor(
method inverseScale (line 19) | public get inverseScale() {
method translate (line 26) | public translate(x: number, y: number): Rectangle {
method boundingRectangle (line 34) | public get boundingRectangle(): BoundingRectangle {
method center (line 40) | public get center(): Point {
method area (line 46) | public get area(): number {
method equals (line 52) | public equals(shape: Shape): boolean {
method containsPoint (line 67) | public containsPoint(point: Point): boolean {
method intersectionArea (line 75) | public intersectionArea(shape: Shape): number {
method intersectionRatio (line 83) | public intersectionRatio(shape: Shape): number {
method bottom (line 92) | public get bottom(): number {
method right (line 98) | public get right(): number {
method aspectRatio (line 104) | public get aspectRatio(): number {
method corners (line 110) | public get corners() {
method from (line 119) | static from({top, left, width, height}: BoundingRectangle) {
method delta (line 123) | static delta(
method intersectionRatio (line 144) | static intersectionRatio(a: BoundingRectangle, b: BoundingRectangle): ...
function rectangleRectangleIntersection (line 149) | function rectangleRectangleIntersection(
FILE: packages/geometry/src/types/alignment.ts
type Align (line 1) | type Align = 'center' | 'start' | 'end';
type Alignment (line 3) | interface Alignment {
FILE: packages/geometry/src/types/axis.ts
type Axis (line 1) | enum Axis {
FILE: packages/geometry/src/types/bounding-rectangle.ts
type BoundingRectangle (line 1) | interface BoundingRectangle {
FILE: packages/geometry/src/types/coordinates.ts
type Coordinates (line 3) | type Coordinates = Record<Axis, number>;
FILE: packages/helpers/src/move.ts
function arrayMove (line 12) | function arrayMove<T extends any[]>(
function arraySwap (line 30) | function arraySwap<T extends any[]>(
type Items (line 48) | type Items = UniqueIdentifier[] | {id: UniqueIdentifier}[];
function hasSortableIndices (line 55) | function hasSortableIndices(source: Draggable): source is Draggable & {
function mutate (line 69) | function mutate<
function move (line 303) | function move<
function swap (line 315) | function swap<
FILE: packages/helpers/tests/move.test.ts
function mockSource (line 9) | function mockSource(id: string | number) {
function mockTarget (line 14) | function mockTarget(id: string | number) {
function mockSortableSource (line 22) | function mockSortableSource(opts: {
function dragOverEvent (line 40) | function dragOverEvent(source: any, target: any, canceled = false) {
function dragEndEvent (line 55) | function dragEndEvent(source: any, target: any, canceled = false) {
FILE: packages/react/src/core/context/DragDropProvider.tsx
type Events (line 22) | type Events<
type Props (line 29) | interface Props<
function DragDropProvider (line 47) | function DragDropProvider<
function useStableInstance (line 156) | function useStableInstance<T extends {destroy(): void}>(create: () => T)...
FILE: packages/react/src/core/context/hooks.ts
function useDragDropManager (line 6) | function useDragDropManager() {
function useDragOperation (line 10) | function useDragOperation() {
FILE: packages/react/src/core/context/renderer.ts
type ReactRenderer (line 13) | type ReactRenderer = {
method rendering (line 26) | get rendering() {
method trackRendering (line 30) | trackRendering(callback: () => void) {
FILE: packages/react/src/core/draggable/DragOverlay.tsx
type Props (line 10) | interface Props<T extends Data, U extends Draggable<T>> {
function DragOverlay (line 27) | function DragOverlay<T extends Data, U extends Draggable<T>>({
function noop (line 121) | function noop() {
function Children (line 125) | function Children<T extends Data, U extends Draggable<T>>({
FILE: packages/react/src/core/draggable/useDraggable.ts
type UseDraggableInput (line 15) | interface UseDraggableInput<T extends Data = Data>
function useDraggable (line 21) | function useDraggable<T extends Data = Data>(
function shouldUpdateSynchronously (line 92) | function shouldUpdateSynchronously(key: string, oldValue: any, newValue:...
FILE: packages/react/src/core/droppable/useDroppable.ts
type UseDroppableInput (line 17) | interface UseDroppableInput<T extends Data = Data>
function useDroppable (line 22) | function useDroppable<T extends Data = Data>(
FILE: packages/react/src/core/hooks/useDragDropManager.ts
function useDragDropManager (line 7) | function useDragDropManager<
FILE: packages/react/src/core/hooks/useDragDropMonitor.ts
type EventNameOverrides (line 8) | type EventNameOverrides = {
type EventHandlerName (line 12) | type EventHandlerName<T extends string> = T extends keyof EventNameOverr...
type Events (line 21) | type Events<
type EventHandlers (line 28) | type EventHandlers<
function useDragDropMonitor (line 41) | function useDragDropMonitor<
FILE: packages/react/src/core/hooks/useDragOperation.ts
function useDragOperation (line 7) | function useDragOperation<
FILE: packages/react/src/core/hooks/useInstance.ts
type Instance (line 8) | interface Instance<
function useInstance (line 15) | function useInstance<T extends Instance>(
FILE: packages/react/src/hooks/useComputed.ts
function useComputed (line 6) | function useComputed<T = any>(
FILE: packages/react/src/hooks/useConstant.ts
function useConstant (line 3) | function useConstant<T = any>(initializer: () => T) {
FILE: packages/react/src/hooks/useDeepSignal.ts
function useDeepSignal (line 9) | function useDeepSignal<T extends object | null | undefined>(
FILE: packages/react/src/hooks/useForceUpdate.ts
function useForceUpdate (line 3) | function useForceUpdate() {
FILE: packages/react/src/hooks/useImmediateEffect.ts
function useImmediateEffect (line 3) | function useImmediateEffect(
FILE: packages/react/src/hooks/useLatest.ts
function useLatest (line 5) | function useLatest<T>(value: T) {
FILE: packages/react/src/hooks/useOnElementChange.ts
function useOnElementChange (line 6) | function useOnElementChange(
FILE: packages/react/src/hooks/useOnValueChange.ts
function useOnValueChange (line 3) | function useOnValueChange<T>(
FILE: packages/react/src/hooks/useSignal.ts
function useSignal (line 9) | function useSignal<T = any>(signal: Signal<T>, sync = false) {
FILE: packages/react/src/sortable/useSortable.ts
type UseSortableInput (line 16) | interface UseSortableInput<T extends Data = Data>
function useSortable (line 23) | function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
function shouldUpdateSynchronously (line 180) | function shouldUpdateSynchronously(key: string, oldValue: any, newValue:...
FILE: packages/react/src/utilities/currentValue.ts
type Ref (line 3) | type Ref<T> = RefObject<T | null | undefined> | MutableRefObject<T>;
type RefOrValue (line 5) | type RefOrValue<T> = T | Ref<T> | null | undefined;
function isRef (line 7) | function isRef<T>(value: RefOrValue<T>): value is Ref<T> {
function currentValue (line 11) | function currentValue<T>(
FILE: packages/solid/src/core/context/DragDropProvider.tsx
type Events (line 13) | type Events = DragDropEventHandlers<Draggable, Droppable, DragDropManager>;
type DragDropProviderProps (line 15) | interface DragDropProviderProps
function DragDropProvider (line 27) | function DragDropProvider(props: DragDropProviderProps) {
FILE: packages/solid/src/core/context/renderer.ts
type Renderer (line 5) | type Renderer = DragDropManager['renderer'];
function useRenderer (line 7) | function useRenderer(): {
FILE: packages/solid/src/core/draggable/DragOverlay.tsx
type DragOverlayProps (line 13) | interface DragOverlayProps<
function DragOverlay (line 33) | function DragOverlay<T extends Data, U extends Draggable<T>>(
function createPatchedManager (line 97) | function createPatchedManager<
function noop (line 128) | function noop() {
FILE: packages/solid/src/core/draggable/useDraggable.ts
type UseDraggableInput (line 9) | interface UseDraggableInput<T extends Data = Data>
function useDraggable (line 15) | function useDraggable<T extends Data = Data>(
FILE: packages/solid/src/core/droppable/useDroppable.ts
type UseDroppableInput (line 9) | interface UseDroppableInput<T extends Data = Data>
function useDroppable (line 14) | function useDroppable<T extends Data = Data>(
FILE: packages/solid/src/core/hooks/useDragDropManager.ts
function useDragDropManager (line 5) | function useDragDropManager() {
FILE: packages/solid/src/core/hooks/useDragDropMonitor.ts
type EventNameOverrides (line 8) | type EventNameOverrides = {
type EventHandlerName (line 12) | type EventHandlerName<T extends string> = T extends keyof EventNameOverr...
type Events (line 18) | type Events<
type EventHandlers (line 25) | type EventHandlers<
function useDragDropMonitor (line 39) | function useDragDropMonitor<
FILE: packages/solid/src/core/hooks/useDragOperation.ts
function useDragOperation (line 4) | function useDragOperation() {
FILE: packages/solid/src/core/hooks/useInstance.ts
type Instance (line 7) | interface Instance<T extends DragDropManager = DragDropManager> {
function useInstance (line 12) | function useInstance<T extends Instance>(
FILE: packages/solid/src/hooks/useDeepSignal.ts
function useDeepSignal (line 5) | function useDeepSignal<T extends object | null | undefined>(
FILE: packages/solid/src/sortable/useSortable.ts
type UseSortableInput (line 10) | interface UseSortableInput<T extends Data = Data>
function useSortable (line 18) | function useSortable<T extends Data = Data>(
FILE: packages/solid/src/utilities/saveElementPosition.ts
function createSaveElementPosition (line 6) | function createSaveElementPosition() {
FILE: packages/solid/tsup.config.ts
method esbuildOptions (line 17) | esbuildOptions(esbuildOptions) {
FILE: packages/state/src/comparators.ts
function deepEqual (line 1) | function deepEqual<T>(a: T, b: T): boolean {
FILE: packages/state/src/computed.ts
function computed (line 6) | function computed<T>(
FILE: packages/state/src/decorators.ts
function reactive (line 5) | function reactive<This, Value>(
function derived (line 29) | function derived<This, Return>(
function enumerable (line 54) | function enumerable(enumerable: boolean = true) {
FILE: packages/state/src/effects.ts
function effects (line 5) | function effects(...entries: Effect[]): CleanupFunction {
FILE: packages/state/src/history.ts
type WithHistory (line 5) | type WithHistory<T> = {
class ValueHistory (line 11) | class ValueHistory<T> implements WithHistory<T> {
method constructor (line 12) | constructor(
method current (line 34) | public get current(): T {
method initial (line 40) | public get initial(): T {
method previous (line 46) | public get previous(): T | undefined {
method current (line 51) | public set current(value: T) {
method reset (line 69) | public reset(value = this.defaultValue) {
FILE: packages/state/src/snapshot.ts
function snapshot (line 3) | function snapshot<T extends object>(value: T): T {
FILE: packages/state/src/store.ts
class WeakStore (line 1) | class WeakStore<
method get (line 8) | get(key: WeakKey | undefined, id: Key) {
method set (line 12) | set(key: WeakKey | undefined, id: Key, value: Value) {
method clear (line 19) | clear(key: WeakKey | undefined) {
FILE: packages/state/src/types.ts
type CleanupFunction (line 3) | type CleanupFunction = () => void;
type Effect (line 5) | type Effect = Parameters<typeof effect>[0];
FILE: packages/storybook-addon-codesandbox/src/collect-files.ts
function normalizeFile (line 6) | function normalizeFile(file: string | SandboxFile): SandboxFile {
function generatePackageJson (line 17) | function generatePackageJson(
function generateIndexFile (line 39) | function generateIndexFile(mainFile: string, entryFile: string): string {
type CollectFilesOptions (line 62) | interface CollectFilesOptions {
function collectFiles (line 79) | function collectFiles(options: CollectFilesOptions): Record<string, Sand...
FILE: packages/storybook-addon-codesandbox/src/constants.ts
constant ADDON_ID (line 1) | const ADDON_ID = 'dnd-kit/codesandbox';
constant TOOL_ID (line 2) | const TOOL_ID = `${ADDON_ID}/tool`;
constant CODESANDBOX_DEFINE_URL (line 4) | const CODESANDBOX_DEFINE_URL =
FILE: packages/storybook-addon-codesandbox/src/define.ts
type DefineRequest (line 4) | interface DefineRequest {
type DefineResponse (line 9) | interface DefineResponse {
function createSandbox (line 18) | async function createSandbox(
function openSandbox (line 48) | function openSandbox(sandboxId: string, mainFile?: string): void {
function openStackBlitz (line 68) | function openStackBlitz(
FILE: packages/storybook-addon-codesandbox/src/manager.tsx
function CodeSandboxIcon (line 15) | function CodeSandboxIcon() {
type ExportState (line 38) | type ExportState = 'idle' | 'loading' | 'success' | 'error';
function CodeSandboxTool (line 40) | function CodeSandboxTool() {
FILE: packages/storybook-addon-codesandbox/src/preview/CodeSandboxButton.tsx
type ExportState (line 7) | type ExportState = 'idle' | 'loading' | 'success' | 'error';
function CodeSandboxIcon (line 9) | function CodeSandboxIcon({size = 14}: {size?: number}) {
function useDarkMode (line 51) | function useDarkMode() {
type Props (line 91) | interface Props {
function CodeSandboxButton (line 95) | function CodeSandboxButton({params}: Props) {
FILE: packages/storybook-addon-codesandbox/src/preview/codesandbox-button-dom.ts
constant BUTTON_ID (line 5) | const BUTTON_ID = '__csb-addon-open-btn';
type ExportState (line 7) | type ExportState = 'idle' | 'loading' | 'success' | 'error';
constant SVG_ICON (line 9) | const SVG_ICON = [
function isDarkMode (line 40) | function isDarkMode(): boolean {
function getTheme (line 44) | function getTheme() {
function removeCodeSandboxButton (line 48) | function removeCodeSandboxButton(): void {
function createCodeSandboxButton (line 56) | function createCodeSandboxButton(
FILE: packages/storybook-addon-codesandbox/src/preview/decorator-dom.ts
function withCodeSandbox (line 23) | function withCodeSandbox(storyFn: any, context: any) {
FILE: packages/storybook-addon-codesandbox/src/preview/decorator.tsx
function withCodeSandbox (line 18) | function withCodeSandbox(Story: React.ComponentType, context: any) {
FILE: packages/storybook-addon-codesandbox/src/types.ts
type SandboxFile (line 1) | interface SandboxFile {
type SandboxProvider (line 6) | type SandboxProvider = 'codesandbox' | 'stackblitz';
type CodeSandboxParameters (line 8) | interface CodeSandboxParameters {
FILE: packages/svelte/src/core/context/context.ts
constant DND_CONTEXT_KEY (line 4) | const DND_CONTEXT_KEY = Symbol('DragDropProvider');
function setDragDropContext (line 6) | function setDragDropContext(manager: DragDropManager) {
function getDragDropContext (line 10) | function getDragDropContext(): DragDropManager {
FILE: packages/svelte/src/core/context/renderer.svelte.ts
type Renderer (line 4) | type Renderer = DragDropManager['renderer'];
function createRenderer (line 6) | function createRenderer(): {
FILE: packages/svelte/src/core/draggable/createDraggable.svelte.ts
type CreateDraggableInput (line 8) | type CreateDraggableInput<T extends Data = Data> = Omit<
function createDraggable (line 13) | function createDraggable<T extends Data = Data>(
FILE: packages/svelte/src/core/droppable/createDroppable.svelte.ts
type CreateDroppableInput (line 8) | type CreateDroppableInput<T extends Data = Data> = Omit<
function createDroppable (line 13) | function createDroppable<T extends Data = Data>(
FILE: packages/svelte/src/core/hooks/createDragDropMonitor.svelte.ts
type EventNameOverrides (line 7) | type EventNameOverrides = {
type EventHandlerName (line 11) | type EventHandlerName<T extends string> = T extends keyof EventNameOverr...
type Events (line 17) | type Events<
type EventHandlers (line 24) | type EventHandlers<
function createDragDropMonitor (line 38) | function createDragDropMonitor<
FILE: packages/svelte/src/core/hooks/createDragOperation.ts
function createDragOperation (line 4) | function createDragOperation() {
FILE: packages/svelte/src/core/hooks/createInstance.svelte.ts
type Instance (line 6) | interface Instance<T extends DragDropManager = DragDropManager> {
function createInstance (line 11) | function createInstance<T extends Instance>(
FILE: packages/svelte/src/core/hooks/getDragDropManager.ts
function getDragDropManager (line 3) | function getDragDropManager() {
FILE: packages/svelte/src/sortable/createSortable.svelte.ts
type CreateSortableInput (line 9) | type CreateSortableInput<T extends Data = Data> = Omit<
function createSortable (line 14) | function createSortable<T extends Data = Data>(
FILE: packages/svelte/src/utilities/createDeepSignal.svelte.ts
function createDeepSignal (line 13) | function createDeepSignal<T extends object | null | undefined>(
FILE: packages/vue/src/composables/useDeepSignal.ts
function useDeepSignal (line 6) | function useDeepSignal<T extends object | null | undefined>(
FILE: packages/vue/src/core/context/DragDropProvider.ts
type NamedTuple (line 22) | type NamedTuple<T extends (...args: any) => any> = T extends (
type ToVueEmits (line 28) | type ToVueEmits<T extends Record<string, (...args: any) => any>> = {
type Events (line 32) | type Events = ToVueEmits<DragDropEventHandlers<Draggable, Droppable, Dra...
type DragDropProviderProps (line 34) | interface DragDropProviderProps extends DragDropManagerInput {
type DragDropProviderEmits (line 38) | type DragDropProviderEmits = {
method setup (line 62) | setup(props, {emit, slots}) {
FILE: packages/vue/src/core/context/renderer.ts
type Renderer (line 4) | type Renderer = DragDropManager['renderer'];
function useRenderer (line 6) | function useRenderer(): {
FILE: packages/vue/src/core/draggable/DragOverlay.ts
type DragOverlayProps (line 17) | interface DragOverlayProps {
method setup (line 56) | setup(props, {slots}) {
FILE: packages/vue/src/core/draggable/useDraggable.ts
type UseDraggableInput (line 11) | interface UseDraggableInput<T extends Data = Data>
function useDraggable (line 17) | function useDraggable<T extends Data = Data>(
FILE: packages/vue/src/core/droppable/useDroppable.ts
type UseDroppableInput (line 11) | interface UseDroppableInput<T extends Data = Data>
function useDroppable (line 16) | function useDroppable<T extends Data = Data>(
FILE: packages/vue/src/core/hooks/useDragDropManager.ts
function useDragDropManager (line 3) | function useDragDropManager() {
FILE: packages/vue/src/core/hooks/useDragDropMonitor.ts
type EventNameOverrides (line 8) | type EventNameOverrides = {
type EventHandlerName (line 12) | type EventHandlerName<T extends string> = T extends keyof EventNameOverr...
type Events (line 18) | type Events<
type EventHandlers (line 25) | type EventHandlers<
function useDragDropMonitor (line 34) | function useDragDropMonitor<
FILE: packages/vue/src/core/hooks/useDragOperation.ts
function useDragOperation (line 6) | function useDragOperation() {
FILE: packages/vue/src/core/hooks/useInstance.ts
type Instance (line 7) | interface Instance<T extends DragDropManager = DragDropManager> {
function useInstance (line 12) | function useInstance<T extends Instance>(
FILE: packages/vue/src/sortable/useSortable.ts
type UseSortableInput (line 18) | interface UseSortableInput<T extends Data = Data>
function useSortable (line 28) | function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
FILE: packages/vue/src/types.ts
type MaybeRefsOrGetters (line 3) | type MaybeRefsOrGetters<T> = {
type MaybeElement (line 7) | type MaybeElement =
FILE: packages/vue/src/utilities/context.ts
function createContext (line 4) | function createContext<TContextValue>(componentName: string) {
FILE: packages/vue/src/utilities/element.ts
type UnRefElementReturn (line 5) | type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
function unrefElement (line 10) | function unrefElement<T extends MaybeElement>(
FILE: packages/vue/src/utilities/ref.ts
function toValueDeep (line 4) | function toValueDeep<T>(input: MaybeRefsOrGetters<T>): T {
Condensed preview — 735 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,592K chars).
[
{
"path": ".browserslistrc",
"chars": 43,
"preview": "defaults\nlast 2 version\nnot IE 11\nnot dead\n"
},
{
"path": ".changeset/README.md",
"chars": 512,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/animation-last-wins.md",
"chars": 394,
"preview": "---\n'@dnd-kit/dom': patch\n---\n\nAnimation resolution now uses last-wins semantics matching CSS composite order. `getFinal"
},
{
"path": ".changeset/autoscroller-options.md",
"chars": 526,
"preview": "---\n'@dnd-kit/dom': minor\n---\n\nAdd `acceleration` and `threshold` options to the `AutoScroller` plugin.\n\n- `acceleration"
},
{
"path": ".changeset/config.json",
"chars": 616,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.5.0/schema.json\",\n \"changelog\": [\"@changesets/changelog-github\","
},
{
"path": ".changeset/drop-animation-source-context.md",
"chars": 332,
"preview": "---\n'@dnd-kit/dom': minor\n---\n\nThe `DropAnimationFunction` context now includes `source`, providing access to the dragga"
},
{
"path": ".changeset/entity-batched-id-changes.md",
"chars": 668,
"preview": "---\n'@dnd-kit/abstract': minor\n'@dnd-kit/dom': minor\n---\n\nBatch entity identity changes to prevent collision oscillation"
},
{
"path": ".changeset/feedback-keyboard-transition.md",
"chars": 477,
"preview": "---\n'@dnd-kit/dom': minor\n---\n\nAdd `keyboardTransition` option to the `Feedback` plugin for customizing or disabling the"
},
{
"path": ".changeset/feedback-placeholder-sibling-reorder.md",
"chars": 619,
"preview": "---\n'@dnd-kit/dom': patch\n---\n\nFix Feedback plugin placeholder not repositioning when siblings are moved around a statio"
},
{
"path": ".changeset/feedback-transform-support.md",
"chars": 553,
"preview": "---\n'@dnd-kit/dom': minor\n---\n\nThe Feedback plugin now supports full CSS `transform` property for compatibility with lib"
},
{
"path": ".changeset/fix-event-type-aliases.md",
"chars": 1699,
"preview": "---\n'@dnd-kit/abstract': minor\n'@dnd-kit/dom': minor\n'@dnd-kit/helpers': minor\n'@dnd-kit/react': minor\n'@dnd-kit/solid':"
},
{
"path": ".changeset/fix-plugin-registry-dedup-ordering.md",
"chars": 653,
"preview": "---\n'@dnd-kit/abstract': patch\n---\n\nFixed plugin registration order when deduplicating configured plugins.\n\nWhen a plugi"
},
{
"path": ".changeset/fix-pointer-sensor-stale-activation.md",
"chars": 492,
"preview": "---\n'@dnd-kit/dom': patch\n---\n\nFixed `setPointerCapture` error on touch devices caused by stale pointer activation.\n\nWhe"
},
{
"path": ".changeset/per-entity-plugin-config.md",
"chars": 1619,
"preview": "---\n'@dnd-kit/abstract': minor\n'@dnd-kit/dom': minor\n'@dnd-kit/react': minor\n'@dnd-kit/solid': minor\n'@dnd-kit/vue': min"
},
{
"path": ".changeset/refactor-style-injector.md",
"chars": 881,
"preview": "---\n'@dnd-kit/dom': minor\n---\n\nRenamed `StyleSheetManager` to `StyleInjector` and centralized CSP `nonce` configuration."
},
{
"path": ".changeset/scroll-into-view-rewrite.md",
"chars": 155,
"preview": "---\n'@dnd-kit/dom': patch\n---\n\nRewrite `scrollIntoViewIfNeeded` with manual scroll calculations for more predictable beh"
},
{
"path": ".changeset/thick-cloths-poke.md",
"chars": 88,
"preview": "---\n'@dnd-kit/abstract': patch\n---\n\nInfer type of source.data object from type argument\n"
},
{
"path": ".changeset/use-deep-signal-flush-sync.md",
"chars": 438,
"preview": "---\n'@dnd-kit/react': patch\n---\n\nFix `useDeepSignal` calling `flushSync` from within a React lifecycle method.\n\nWhen sig"
},
{
"path": ".changeset/whole-cloths-warn.md",
"chars": 98,
"preview": "---\n'@dnd-kit/dom': patch\n---\n\nrecalculate AutoScroller options in the effect to avoid stale data\n"
},
{
"path": ".eslintrc.js",
"chars": 127,
"preview": "module.exports = {\n extends: [\n 'react-app',\n 'prettier/@typescript-eslint',\n 'plugin:prettier/recommended',\n "
},
{
"path": ".github/FUNDING.yml",
"chars": 67,
"preview": "# These are supported funding model platforms\n\ngithub: [clauderic]\n"
},
{
"path": ".github/workflows/chromatic.yml",
"chars": 10053,
"preview": "name: 'Chromatic'\n\non:\n pull_request:\n push:\n branches: [main]\n\njobs:\n chromatic-vanilla:\n name: Chromatic (Van"
},
{
"path": ".github/workflows/continous-release.yml",
"chars": 651,
"preview": "name: Continuous Release\non:\n pull_request:\n push:\n branches: [main]\n\njobs:\n build:\n name: Continuous release\n "
},
{
"path": ".github/workflows/playwright.yml",
"chars": 1217,
"preview": "name: Playwright\n\non:\n pull_request:\n push:\n branches: [main]\n\njobs:\n e2e:\n runs-on: ubuntu-latest\n steps:\n "
},
{
"path": ".github/workflows/release.yml",
"chars": 1365,
"preview": "name: Release\non:\n push:\n branches:\n - main\n\npermissions:\n id-token: write # Required for OIDC\n contents: wri"
},
{
"path": ".github/workflows/tests.yml",
"chars": 399,
"preview": "name: Tests\n\non:\n pull_request:\n push:\n branches: [main]\n\njobs:\n test:\n runs-on: ubuntu-latest\n steps:\n "
},
{
"path": ".gitignore",
"chars": 335,
"preview": ".DS_Store\nnode_modules\n.turbo\n*.log\n.next\ndist\ndist-ssr\n*.local\n.env\n.cache\nserver/dist\npublic/dist\nstorybook-static/\nte"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "22\n"
},
{
"path": ".prettierrc",
"chars": 95,
"preview": "{\n \"bracketSpacing\": false,\n \"singleQuote\": true,\n \"semi\": true,\n \"trailingComma\": \"es5\"\n}\n"
},
{
"path": ".vscode/settings.json",
"chars": 749,
"preview": "{\n \"editor.formatOnSave\": true,\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"search.exclude\": {\n \"**/dist\""
},
{
"path": "CONTRIBUTING.md",
"chars": 3436,
"preview": "# Contributing to dnd-kit\n\nThank you for your interest in contributing to dnd-kit! This document provides guidelines and"
},
{
"path": "LICENSE",
"chars": 1073,
"preview": "MIT License\n\nCopyright (c) 2021, Claudéric Demers\n\nPermission is hereby granted, free of charge, to any person obtaining"
},
{
"path": "README.md",
"chars": 5455,
"preview": "<p align=\"center\">\n <a href=\"https://dndkit.com\">\n <img alt=\"@dnd-kit – the modern toolkit for building drag & drop "
},
{
"path": "apps/docs/README.md",
"chars": 704,
"preview": "# Documentation\n\n## Contributing to the @dnd-kit documentation\n\nContributions are welcome to improve the @dnd-kit docume"
},
{
"path": "apps/docs/concepts/drag-drop-manager.mdx",
"chars": 9077,
"preview": "---\ntitle: 'DragDropManager'\ndescription: 'Orchestrate drag and drop interactions between elements.'\nicon: 'sitemap'\n---"
},
{
"path": "apps/docs/concepts/draggable.mdx",
"chars": 5208,
"preview": "---\ntitle: 'Draggable'\ndescription: 'Make elements draggable to drop them over droppable targets.'\nicon: 'bullseye-point"
},
{
"path": "apps/docs/concepts/droppable.mdx",
"chars": 5706,
"preview": "---\ntitle: 'Droppable'\ndescription: 'Create droppable targets for draggable elements.'\nicon: 'expand'\n---\n\nimport {Story"
},
{
"path": "apps/docs/concepts/sortable.mdx",
"chars": 12301,
"preview": "---\ntitle: 'Sortable'\ndescription: 'Reorder elements in a list or across multiple lists.'\nicon: 'layer-group'\n---\n\nimpor"
},
{
"path": "apps/docs/docs.json",
"chars": 10639,
"preview": "{\n \"$schema\": \"https://mintlify.com/docs.json\",\n \"theme\": \"mint\",\n \"name\": \"@dnd-kit\",\n \"colors\": {\n \"primary\": \""
},
{
"path": "apps/docs/extend/modifiers.mdx",
"chars": 4682,
"preview": "---\ntitle: 'Modifiers'\ndescription: 'Transform and constrain drag movement.'\nicon: 'arrows-from-line'\n---\n\n## Overview\n\n"
},
{
"path": "apps/docs/extend/plugins/accessibility.mdx",
"chars": 8137,
"preview": "---\ntitle: 'Accessibility'\ndescription: 'Manages ARIA attributes and screen reader announcements for drag and drop opera"
},
{
"path": "apps/docs/extend/plugins/auto-scroller.mdx",
"chars": 7171,
"preview": "---\ntitle: 'AutoScroller'\ndescription: 'Automatically scrolls containers when dragging near edges.'\nicon: 'arrows-up-dow"
},
{
"path": "apps/docs/extend/plugins/cursor.mdx",
"chars": 2029,
"preview": "---\ntitle: 'Cursor'\ndescription: 'Updates cursor styles during drag operations.'\nicon: 'arrow-pointer'\n---\n\n## Overview\n"
},
{
"path": "apps/docs/extend/plugins/debug.mdx",
"chars": 2485,
"preview": "---\ntitle: 'Debug'\ndescription: 'Visualize drag and drop operations for debugging.'\nicon: 'bug'\n---\n\nimport {Story} from"
},
{
"path": "apps/docs/extend/plugins/feedback.mdx",
"chars": 5699,
"preview": "---\ntitle: 'Feedback'\ndescription: 'Manages visual feedback during drag operations, including top layer promotion and dr"
},
{
"path": "apps/docs/extend/plugins/style-injector.mdx",
"chars": 4393,
"preview": "---\ntitle: 'StyleInjector'\ndescription: 'Centralized style injection for drag and drop operations.'\nicon: 'palette'\n---\n"
},
{
"path": "apps/docs/extend/plugins.mdx",
"chars": 4855,
"preview": "---\ntitle: 'Plugins'\ndescription: 'Extend beyond the core functionality with plugins.'\nsidebarTitle: 'Overview'\n---\n\n## "
},
{
"path": "apps/docs/extend/sensors/keyboard-sensor.mdx",
"chars": 2884,
"preview": "---\ntitle: 'Keyboard Sensor'\ndescription: 'Detect keyboard input to initiate drag and drop operations.'\nicon: 'keyboard'"
},
{
"path": "apps/docs/extend/sensors/pointer-sensor.mdx",
"chars": 6541,
"preview": "---\ntitle: 'Pointer Sensor'\ndescription: 'Detect pointer events to initiate drag and drop operations.'\nicon: 'arrow-poin"
},
{
"path": "apps/docs/extend/sensors.mdx",
"chars": 4507,
"preview": "---\ntitle: 'Sensors'\ndescription: 'Detect user input and translate it into drag and drop operations.'\nsidebarTitle: 'Ove"
},
{
"path": "apps/docs/legacy/api-documentation/context-provider/collision-detection-algorithms.mdx",
"chars": 9555,
"preview": "---\ntitle: Collision detection algorithms\n---\n\nIf you're familiar with how 2D games are built, you may have come across "
},
{
"path": "apps/docs/legacy/api-documentation/context-provider/dnd-context.mdx",
"chars": 9771,
"preview": "---\ntitle: DndContext\ndescription: >-\n The parent component for your drag and drop application.\nsidebarTitle: <DndConte"
},
{
"path": "apps/docs/legacy/api-documentation/context-provider/use-dnd-context.mdx",
"chars": 614,
"preview": "---\ntitle: useDndContext\n---\n\nThe `useDndContext` hook can be used within components wrapped in a `DndContext` provider "
},
{
"path": "apps/docs/legacy/api-documentation/context-provider/use-dnd-monitor.mdx",
"chars": 975,
"preview": "---\ntitle: useDndMonitor\n---\n\nThe `useDndMonitor` hook can be used within components wrapped in a `DndContext` provider "
},
{
"path": "apps/docs/legacy/api-documentation/draggable/drag-overlay.mdx",
"chars": 10666,
"preview": "---\ntitle: Drag overlay\nsidebarTitle: <DragOverlay>\ndescription: >-\n The `<DragOverlay>` component provides a way to re"
},
{
"path": "apps/docs/legacy/api-documentation/draggable/use-draggable.mdx",
"chars": 11837,
"preview": "---\ntitle: useDraggable\n---\n\n## Arguments\n\n```typescript\ninterface UseDraggableArguments {\n id: string | number;\n attr"
},
{
"path": "apps/docs/legacy/api-documentation/draggable.mdx",
"chars": 10930,
"preview": "---\ntitle: Draggable\ndescription: >-\n Use the `useDraggable` hook turn DOM nodes into draggable sources that can be pic"
},
{
"path": "apps/docs/legacy/api-documentation/droppable/use-droppable.mdx",
"chars": 3628,
"preview": "---\ntitle: useDroppable\n---\n\n## Arguments\n\n```typescript\ninterface UseDroppableArguments {\n id: string | number;\n disa"
},
{
"path": "apps/docs/legacy/api-documentation/droppable.mdx",
"chars": 2650,
"preview": "---\ntitle: Droppable\ndescription: >-\n Use the `useDroppable` hook to set up DOM nodes as droppable areas that [draggabl"
},
{
"path": "apps/docs/legacy/api-documentation/modifiers.mdx",
"chars": 2914,
"preview": "---\ntitle: Modifiers\ndescription: 'Transform and constrain drag movement.'\nicon: 'arrows-from-line'\n---\n\nModifiers let y"
},
{
"path": "apps/docs/legacy/api-documentation/sensors/keyboard.mdx",
"chars": 4223,
"preview": "---\ntitle: Keyboard\nicon: 'keyboard'\n---\n\nThe Keyboard sensor responds to [Keyboard events](https://developer.mozilla.or"
},
{
"path": "apps/docs/legacy/api-documentation/sensors/mouse.mdx",
"chars": 1715,
"preview": "---\ntitle: Mouse\nicon: 'computer-mouse'\n---\n\nThe Mouse sensor responds to [Mouse events](https://developer.mozilla.org/e"
},
{
"path": "apps/docs/legacy/api-documentation/sensors/pointer.mdx",
"chars": 4891,
"preview": "---\ntitle: Pointer\nicon: 'arrow-pointer'\n---\n\nThe Pointer sensor responds to [Pointer events](https://developer.mozilla."
},
{
"path": "apps/docs/legacy/api-documentation/sensors/touch.mdx",
"chars": 2680,
"preview": "---\ntitle: Touch\nicon: 'hand-back-point-up'\n---\n\nThe Touch sensor responds to [Touch events](https://developer.mozilla.o"
},
{
"path": "apps/docs/legacy/api-documentation/sensors.mdx",
"chars": 3701,
"preview": "---\ntitle: Sensors\ndescription: >-\n Sensors are an abstraction to detect different input methods in order to initiate d"
},
{
"path": "apps/docs/legacy/guides/accessibility.mdx",
"chars": 15786,
"preview": "---\ntitle: Accessibility\ndescription: >-\n Learn how to make your drag and drop interfaces accessible with @dnd-kit/core"
},
{
"path": "apps/docs/legacy/introduction/getting-started.mdx",
"chars": 9058,
"preview": "---\ntitle: Quickstart\ndescription: >-\n Eager to get started? This quick start guide will help you familiarize\n yoursel"
},
{
"path": "apps/docs/legacy/introduction/installation.mdx",
"chars": 3251,
"preview": "---\ntitle: Installation\ndescription: 'Installing @dnd-kit/core'\n---\n\n<Note>\nThere's a new version of **@dnd-kit** availa"
},
{
"path": "apps/docs/legacy/presets/sortable/overview.mdx",
"chars": 22604,
"preview": "---\ntitle: Sortable\nsidebarTitle: Overview\ndescription: >-\n The sortable preset provides the building blocks to build "
},
{
"path": "apps/docs/legacy/presets/sortable/sortable-context.mdx",
"chars": 3890,
"preview": "---\ntitle: Sortable Context\nsidebarTitle: <SortableContext>\n---\n\nThe `SortableContext` provides information via context "
},
{
"path": "apps/docs/legacy/presets/sortable/use-sortable.mdx",
"chars": 9220,
"preview": "---\ntitle: useSortable\n---\n\nThe `useSortable` hook is an abstraction that composes the [`useDroppable`](../../api-docume"
},
{
"path": "apps/docs/overview.mdx",
"chars": 5257,
"preview": "---\ntitle: Overview\ndescription: 'Learn how to build drag and drop interfaces with <span class=\"inline-logo\">**dnd kit**"
},
{
"path": "apps/docs/quickstart.mdx",
"chars": 6738,
"preview": "---\ntitle: 'Quickstart'\ndescription: 'Start building drag and drop interfaces with plain JavaScript in minutes.'\nicon: '"
},
{
"path": "apps/docs/react/components/drag-drop-provider.mdx",
"chars": 5302,
"preview": "---\ntitle: 'DragDropProvider'\ndescription: 'Enable drag and drop interactions in your React application.'\nicon: 'sitemap"
},
{
"path": "apps/docs/react/components/drag-overlay.mdx",
"chars": 3813,
"preview": "---\ntitle: 'DragOverlay'\ndescription: 'Render a custom element as visual feedback during drag operations.'\nicon: 'clone'"
},
{
"path": "apps/docs/react/guides/migration.mdx",
"chars": 7471,
"preview": "---\ntitle: 'Migration guide'\ndescription: 'A comprehensive guide to migrate from `@dnd-kit/core` to `@dnd-kit/react`'\nic"
},
{
"path": "apps/docs/react/guides/multiple-sortable-lists.mdx",
"chars": 13197,
"preview": "---\ntitle: 'Multiple sortable lists'\ndescription: 'Learn how to reorder sortable elements across multiple lists.'\nicon: "
},
{
"path": "apps/docs/react/guides/sortable-state-management.mdx",
"chars": 7580,
"preview": "---\ntitle: 'Managing sortable state'\ndescription: 'Learn how to manage sortable state with and without the move helper.'"
},
{
"path": "apps/docs/react/hooks/use-drag-drop-monitor.mdx",
"chars": 2284,
"preview": "---\ntitle: 'useDragDropMonitor'\ndescription: 'Monitor drag and drop events in your React components.'\nicon: 'signal-stre"
},
{
"path": "apps/docs/react/hooks/use-draggable.mdx",
"chars": 8874,
"preview": "---\ntitle: 'useDraggable'\ndescription: 'Use the `useDraggable` hook to make draggable elements that can dropped over dro"
},
{
"path": "apps/docs/react/hooks/use-droppable.mdx",
"chars": 5341,
"preview": "---\ntitle: 'useDroppable'\ndescription: 'Use the `useDroppable` hook to create droppable targets for draggable elements.'"
},
{
"path": "apps/docs/react/hooks/use-sortable.mdx",
"chars": 7287,
"preview": "---\ntitle: 'useSortable'\ndescription: 'Use the `useSortable` hook to reorder elements in a list or across multiple lists"
},
{
"path": "apps/docs/react/quickstart.mdx",
"chars": 5807,
"preview": "---\ntitle: 'Quickstart'\ndescription: 'Start building drag and drop interfaces with React in minutes.'\nicon: 'rocket'\n---"
},
{
"path": "apps/docs/sandpack.js",
"chars": 4005,
"preview": "const importMap = {\n imports: {\n react: 'https://esm.sh/react@19.2.3',\n 'react/': 'https://esm.sh/react@19.2.3/',"
},
{
"path": "apps/docs/snippets/code.mdx",
"chars": 14880,
"preview": "export const draggableStyles = `\nbody {\n padding: 1em;\n font-family: system-ui, sans-serif;\n -webkit-font-smoothing: "
},
{
"path": "apps/docs/snippets/quickstart/intro.mdx",
"chars": 207,
"preview": "<Card title=\"You will learn\">\n <div class=\"info\">\n 1. How to make elements draggable\n 2. How to set up droppable "
},
{
"path": "apps/docs/snippets/sandbox.mdx",
"chars": 410,
"preview": "export const CodeSandbox = ({ files, height, hero, previewHeight, showTabs, template }) => {\n const Element = 'code-san"
},
{
"path": "apps/docs/snippets/story.mdx",
"chars": 1157,
"preview": "export const Story = ({ id, framework = \"react\", width = \"100%\", height = \"250\", hero = false }) => {\n const BRANCH = '"
},
{
"path": "apps/docs/solid/components/drag-drop-provider.mdx",
"chars": 2278,
"preview": "---\ntitle: 'DragDropProvider'\ndescription: 'The DragDropProvider component creates and manages a DragDropManager instanc"
},
{
"path": "apps/docs/solid/components/drag-overlay.mdx",
"chars": 3556,
"preview": "---\ntitle: 'DragOverlay'\ndescription: 'Render a custom element as visual feedback during drag operations.'\nicon: 'clone'"
},
{
"path": "apps/docs/solid/hooks/use-draggable.mdx",
"chars": 4578,
"preview": "---\ntitle: 'useDraggable'\ndescription: 'Make elements draggable with the useDraggable hook.'\nicon: 'bullseye-pointer'\n--"
},
{
"path": "apps/docs/solid/hooks/use-droppable.mdx",
"chars": 3287,
"preview": "---\ntitle: 'useDroppable'\ndescription: 'Create droppable targets with the useDroppable hook.'\nicon: 'expand'\n---\n\nimport"
},
{
"path": "apps/docs/solid/hooks/use-sortable.mdx",
"chars": 7287,
"preview": "---\ntitle: 'useSortable'\ndescription: 'Create sortable elements with the useSortable hook.'\nicon: 'layer-group'\n---\n\nimp"
},
{
"path": "apps/docs/solid/quickstart.mdx",
"chars": 3727,
"preview": "---\ntitle: 'Quickstart'\ndescription: 'Start building drag and drop interfaces with SolidJS in minutes.'\nicon: 'rocket'\n-"
},
{
"path": "apps/docs/style.css",
"chars": 7120,
"preview": "#navbar img[src*=\"logo\"] {\n height: 45px;\n}\n\n#sidebar svg:is([style*=\"sitemap.svg\"], [style*=\"layer-group.svg\"], [style"
},
{
"path": "apps/docs/svelte/components/drag-drop-provider.mdx",
"chars": 2406,
"preview": "---\ntitle: 'DragDropProvider'\ndescription: 'The DragDropProvider component creates and manages a DragDropManager instanc"
},
{
"path": "apps/docs/svelte/components/drag-overlay.mdx",
"chars": 3247,
"preview": "---\ntitle: 'DragOverlay'\ndescription: 'Render a custom element as visual feedback during drag operations.'\nicon: 'clone'"
},
{
"path": "apps/docs/svelte/primitives/create-draggable.mdx",
"chars": 4023,
"preview": "---\ntitle: 'createDraggable'\ndescription: 'Make elements draggable with the createDraggable primitive.'\nicon: 'bullseye-"
},
{
"path": "apps/docs/svelte/primitives/create-droppable.mdx",
"chars": 1866,
"preview": "---\ntitle: 'createDroppable'\ndescription: 'Create droppable targets with the createDroppable primitive.'\nicon: 'expand'\n"
},
{
"path": "apps/docs/svelte/primitives/create-sortable.mdx",
"chars": 6517,
"preview": "---\ntitle: 'createSortable'\ndescription: 'Create sortable elements with the createSortable primitive.'\nicon: 'layer-grou"
},
{
"path": "apps/docs/svelte/quickstart.mdx",
"chars": 4185,
"preview": "---\ntitle: 'Quickstart'\ndescription: 'Start building drag and drop interfaces with Svelte in minutes.'\nicon: 'rocket'\n--"
},
{
"path": "apps/docs/vue/components/drag-drop-provider.mdx",
"chars": 2388,
"preview": "---\ntitle: 'DragDropProvider'\ndescription: 'The DragDropProvider component creates and manages a DragDropManager instanc"
},
{
"path": "apps/docs/vue/components/drag-overlay.mdx",
"chars": 3310,
"preview": "---\ntitle: 'DragOverlay'\ndescription: 'Render a custom element as visual feedback during drag operations.'\nicon: 'clone'"
},
{
"path": "apps/docs/vue/composables/use-draggable.mdx",
"chars": 4952,
"preview": "---\ntitle: 'useDraggable'\ndescription: 'Make elements draggable with the useDraggable composable.'\nicon: 'bullseye-point"
},
{
"path": "apps/docs/vue/composables/use-droppable.mdx",
"chars": 3714,
"preview": "---\ntitle: 'useDroppable'\ndescription: 'Create droppable targets with the useDroppable composable.'\nicon: 'expand'\n---\n\n"
},
{
"path": "apps/docs/vue/composables/use-sortable.mdx",
"chars": 6950,
"preview": "---\ntitle: 'useSortable'\ndescription: 'Create sortable elements with the useSortable composable.'\nicon: 'layer-group'\n--"
},
{
"path": "apps/docs/vue/quickstart.mdx",
"chars": 5086,
"preview": "---\ntitle: 'Quickstart'\ndescription: 'Start building drag and drop interfaces with Vue in minutes.'\nicon: 'rocket'\n---\n\n"
},
{
"path": "apps/stories/.eslintrc.js",
"chars": 93,
"preview": "module.exports = {\n extends: ['@dnd-kit/eslint-config', 'plugin:storybook/recommended'],\n};\n"
},
{
"path": "apps/stories/.storybook/main.ts",
"chars": 1827,
"preview": "import {readFileSync} from 'fs';\nimport {dirname, join} from 'path';\nimport {mergeConfig} from 'vite';\n\nconst sharedPrev"
},
{
"path": "apps/stories/.storybook/manager-head.html",
"chars": 416,
"preview": "<link\n rel=\"apple-touch-icon\"\n sizes=\"180x180\"\n href=\"/apple-touch-icon.png\"\n/>\n<link\n rel=\"icon\"\n type=\"image/png\""
},
{
"path": "apps/stories/.storybook/manager.ts",
"chars": 405,
"preview": "import {addons} from 'storybook/manager-api';\nimport type {API_PreparedIndexEntry} from 'storybook/internal/types';\n\nimp"
},
{
"path": "apps/stories/.storybook/preview-head.html",
"chars": 1894,
"preview": "<style>\n .css-qa4clq :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)),\n .css-qa4clq :where(h2:not(.sb-anchor,"
},
{
"path": "apps/stories/.storybook/preview.tsx",
"chars": 2158,
"preview": "import React from 'react';\nimport {Unstyled} from '@storybook/addon-docs/blocks';\n\nimport '@dnd-kit/stories-shared/regis"
},
{
"path": "apps/stories/.storybook/theme.ts",
"chars": 202,
"preview": "import {create} from 'storybook/theming/create';\nimport {default as brandImage} from './assets/dnd-kit-banner.svg';\n\nexp"
},
{
"path": "apps/stories/package.json",
"chars": 1419,
"preview": "{\n \"name\": \"@dnd-kit/stories\",\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \""
},
{
"path": "apps/stories/playwright.config.ts",
"chars": 601,
"preview": "import {defineConfig} from '@playwright/test';\n\nconst CI = !!process.env.CI;\n\nexport default defineConfig({\n testDir: '"
},
{
"path": "apps/stories/raw.d.ts",
"chars": 164,
"preview": "declare module '*.tsx?raw' {\n const content: string;\n export default content;\n}\n\ndeclare module '*.ts?raw' {\n const c"
},
{
"path": "apps/stories/stories/components/docs/Code/Code.module.css",
"chars": 1559,
"preview": ".Code {\n --background-color: #263038;\n --border-radius: 8px;\n --border-color: transparent;\n --box-shadow: 0 1px 3px"
},
{
"path": "apps/stories/stories/components/docs/Code/Code.tsx",
"chars": 1363,
"preview": "import React, {useState} from 'react';\nimport {Unstyled} from '@storybook/addon-docs/blocks';\n\nimport {CodeHighlighter} "
},
{
"path": "apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.module.css",
"chars": 3427,
"preview": "@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');\n\n:root {\n --mono-font-stack:"
},
{
"path": "apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.tsx",
"chars": 2495,
"preview": "import React, {useEffect, useMemo, useRef} from 'react';\nimport Prism from 'prismjs';\nimport Clipboard from 'clipboard';"
},
{
"path": "apps/stories/stories/components/docs/Code/components/CodeHighlighter/index.ts",
"chars": 51,
"preview": "export {CodeHighlighter} from './CodeHighlighter';\n"
},
{
"path": "apps/stories/stories/components/docs/Code/components/index.ts",
"chars": 51,
"preview": "export {CodeHighlighter} from './CodeHighlighter';\n"
},
{
"path": "apps/stories/stories/components/docs/Code/index.ts",
"chars": 29,
"preview": "export {Code} from './Code';\n"
},
{
"path": "apps/stories/stories/components/docs/Info/Info.module.css",
"chars": 380,
"preview": ".Info {\n display: flex;\n gap: 10px;\n align-items: center;\n justify-content: stretch;\n padding: 16px 24px;\n color: "
},
{
"path": "apps/stories/stories/components/docs/Info/Info.tsx",
"chars": 1336,
"preview": "import React, {type PropsWithChildren} from 'react';\n\nimport styles from './Info.module.css';\n\nconst icon = (\n <svg\n "
},
{
"path": "apps/stories/stories/components/docs/Info/index.ts",
"chars": 29,
"preview": "export {Info} from './Info';\n"
},
{
"path": "apps/stories/stories/components/docs/Preview/Preview.module.css",
"chars": 1542,
"preview": ".Preview {\n --background-color: #FCFCFC;\n\n overflow-y: auto;\n padding: 30px 40px;\n margin: 25px 0 40px;\n border-rad"
},
{
"path": "apps/stories/stories/components/docs/Preview/Preview.tsx",
"chars": 868,
"preview": "import React from 'react';\nimport {Story, Unstyled} from '@storybook/addon-docs/blocks';\nimport {type StoryFn} from '@st"
},
{
"path": "apps/stories/stories/components/docs/Preview/index.ts",
"chars": 35,
"preview": "export {Preview} from './Preview';\n"
},
{
"path": "apps/stories/stories/components/docs/index.ts",
"chars": 93,
"preview": "export {Code} from './Code';\nexport {Info} from './Info';\nexport {Preview} from './Preview';\n"
},
{
"path": "apps/stories/stories/components/index.ts",
"chars": 44,
"preview": "export {Code, Info, Preview} from './docs';\n"
},
{
"path": "apps/stories/stories/react/Draggable/DragHandles/DragHandles.stories.tsx",
"chars": 870,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport docs from './docs/DragHandles.mdx';\nimport {Draggable"
},
{
"path": "apps/stories/stories/react/Draggable/DragHandles/docs/DragHandles.mdx",
"chars": 1198,
"preview": "import {RestrictToElement} from '@dnd-kit/dom/modifiers';\n\nimport {Info, Preview} from '../../../../components';\nimport "
},
{
"path": "apps/stories/stories/react/Draggable/DragOverlay/DragOverlay.stories.tsx",
"chars": 403,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {DraggableExample} from '../DraggableExample.tsx';\n\nc"
},
{
"path": "apps/stories/stories/react/Draggable/Draggable.stories.tsx",
"chars": 752,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport DraggableApp from './DraggableApp.tsx';\nimport dragga"
},
{
"path": "apps/stories/stories/react/Draggable/DraggableApp.tsx",
"chars": 347,
"preview": "import React from 'react';\nimport {DragDropProvider, useDraggable} from '@dnd-kit/react';\n\nfunction Draggable() {\n cons"
},
{
"path": "apps/stories/stories/react/Draggable/DraggableExample.tsx",
"chars": 1748,
"preview": "import React, {\n type PropsWithChildren,\n type CSSProperties,\n useRef,\n useState,\n} from 'react';\nimport type {Modif"
},
{
"path": "apps/stories/stories/react/Draggable/Modifiers/Modifiers.stories.tsx",
"chars": 1584,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {\n RestrictToHorizontalAxis,\n RestrictToVerticalAxis"
},
{
"path": "apps/stories/stories/react/Draggable/Modifiers/SnapToGridExample.tsx",
"chars": 1551,
"preview": "import {useState} from 'react';\nimport {RestrictToWindow} from '@dnd-kit/dom/modifiers';\nimport {SnapModifier} from '@dn"
},
{
"path": "apps/stories/stories/react/Draggable/Modifiers/docs/ModifierDocs.mdx",
"chars": 1903,
"preview": "import {RestrictToElement} from '@dnd-kit/dom/modifiers';\n\nimport {Info, Preview} from '../../../../components';\nimport "
},
{
"path": "apps/stories/stories/react/Draggable/Modifiers/styles.module.css",
"chars": 364,
"preview": ".Container {\n display: flex;\n width: 60%;\n min-width: 300px;\n margin: 40px 80px;\n height: 350px;\n outline: 3px sol"
},
{
"path": "apps/stories/stories/react/Draggable/Sensors/Sensors.stories.tsx",
"chars": 486,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport docs from './docs/SensorDocs.mdx';\nimport {DraggableE"
},
{
"path": "apps/stories/stories/react/Draggable/Sensors/docs/SensorDocs.mdx",
"chars": 5817,
"preview": "import {Info, Preview} from '../../../../components';\nimport {DraggableExample} from '../../DraggableExample';\n\n# Sensor"
},
{
"path": "apps/stories/stories/react/Draggable/docs/DraggableDocs.mdx",
"chars": 1268,
"preview": "import {Preview} from '../../../components';\nimport {Example as Hero} from '../Draggable.stories';\nimport {Example} from"
},
{
"path": "apps/stories/stories/react/Draggable/docs/examples/Draggable.jsx",
"chars": 224,
"preview": "import React from 'react';\nimport {useDraggable} from '@dnd-kit/react';\n\nexport function Draggable({id}) {\n const {ref}"
},
{
"path": "apps/stories/stories/react/Draggable/docs/examples/MultipleDraggable.jsx",
"chars": 416,
"preview": "import React from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Draggable} from './Draggable';\n\nexp"
},
{
"path": "apps/stories/stories/react/Draggable/docs/examples/QuickStart.jsx",
"chars": 245,
"preview": "import React from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Draggable} from './Draggable';\n\nexp"
},
{
"path": "apps/stories/stories/react/Droppable/Droppable.stories.tsx",
"chars": 786,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport DroppableApp from './DroppableApp.tsx';\nimport droppa"
},
{
"path": "apps/stories/stories/react/Droppable/DroppableApp.tsx",
"chars": 1085,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';\n\nfun"
},
{
"path": "apps/stories/stories/react/Droppable/DroppableExample.tsx",
"chars": 1964,
"preview": "import React, {useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {UniqueIdentifier} from"
},
{
"path": "apps/stories/stories/react/Droppable/MultipleDroppable/MultipleDroppable.stories.tsx",
"chars": 745,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport MultipleDroppableApp from './MultipleDroppableApp';\ni"
},
{
"path": "apps/stories/stories/react/Droppable/MultipleDroppable/MultipleDroppableApp.tsx",
"chars": 1341,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';\n\nfun"
},
{
"path": "apps/stories/stories/react/Droppable/docs/DroppableDocs.mdx",
"chars": 1929,
"preview": "import {Preview} from '../../../components';\nimport {Example as Hero} from '../Droppable.stories';\nimport {Example} from"
},
{
"path": "apps/stories/stories/react/Droppable/docs/examples/Draggable.jsx",
"chars": 224,
"preview": "import React from 'react';\nimport {useDraggable} from '@dnd-kit/react';\n\nexport function Draggable({id}) {\n const {ref}"
},
{
"path": "apps/stories/stories/react/Droppable/docs/examples/Droppable.jsx",
"chars": 543,
"preview": "import React from 'react';\nimport {useDroppable} from '@dnd-kit/react';\n\nexport function Droppable({id, children}) {\n c"
},
{
"path": "apps/stories/stories/react/Droppable/docs/examples/MultipleDroppable.jsx",
"chars": 806,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Droppable} from './Drop"
},
{
"path": "apps/stories/stories/react/Droppable/docs/examples/QuickStart.jsx",
"chars": 727,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\n\nimport {Droppable} from './Drop"
},
{
"path": "apps/stories/stories/react/Resizeable/Resizeable.css",
"chars": 3485,
"preview": "body, html, #root {\n\theight: 100%;\n}\n\n.Test {\n\t--max-width: 1600px;\n\t--gutter: 3vw;\n\n\t--grid-gutter: calc(var(--gutter, "
},
{
"path": "apps/stories/stories/react/Resizeable/Resizeable.tsx",
"chars": 8814,
"preview": "import React, {\n useCallback,\n useEffect,\n useLayoutEffect,\n useState,\n useReducer,\n useRef,\n} from 'react';\nimpor"
},
{
"path": "apps/stories/stories/react/Resizeable/index.ts",
"chars": 34,
"preview": "export {App} from './Resizeable';\n"
},
{
"path": "apps/stories/stories/react/Sortable/CSSLayers/CSSLayers.stories.tsx",
"chars": 384,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {CSSLayersExample} from './CSSLayersExample';\n\nconst "
},
{
"path": "apps/stories/stories/react/Sortable/CSSLayers/CSSLayersExample.tsx",
"chars": 1946,
"preview": "import React, {useState, memo, useEffect} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {Uniqu"
},
{
"path": "apps/stories/stories/react/Sortable/Grid/Grid.stories.tsx",
"chars": 2046,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {pointerIntersection} from '@dnd-kit/collision';\nimpor"
},
{
"path": "apps/stories/stories/react/Sortable/Grid/GridSortableApp.tsx",
"chars": 1240,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-"
},
{
"path": "apps/stories/stories/react/Sortable/Horizontal/Horizontal.stories.tsx",
"chars": 1748,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {RestrictToHorizontalAxis} from '@dnd-kit/abstract/mod"
},
{
"path": "apps/stories/stories/react/Sortable/Horizontal/HorizontalSortableApp.tsx",
"chars": 1153,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-"
},
{
"path": "apps/stories/stories/react/Sortable/Iframe/Iframe.stories.tsx",
"chars": 531,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {IframeLists} from './IframeExample.tsx';\n\nconst meta"
},
{
"path": "apps/stories/stories/react/Sortable/Iframe/IframeExample.tsx",
"chars": 4227,
"preview": "import React, {useEffect, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport {DragDrop"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.stories.tsx",
"chars": 2032,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {MultipleLists} from './MultipleLists';\nimport Multip"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx",
"chars": 6106,
"preview": "import React, {memo, useCallback, useMemo, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/MultipleListsApp.tsx",
"chars": 3924,
"preview": "import React, {memo, useCallback, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport {"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx",
"chars": 737,
"preview": "import {Code, Preview} from '../../../../components';\n\nimport {MultipleLists} from '../MultipleLists.tsx';\nimport {Hero}"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/docs/examples/Column.jsx",
"chars": 550,
"preview": "import React from 'react';\nimport {useDroppable} from '@dnd-kit/react';\nimport {CollisionPriority} from '@dnd-kit/abstra"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/docs/examples/Item.jsx",
"chars": 284,
"preview": "import React from 'react';\nimport {useSortable} from '@dnd-kit/react/sortable';\n\nexport function Item({id, column, index"
},
{
"path": "apps/stories/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx",
"chars": 855,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {move} from '@dnd-kit/hel"
},
{
"path": "apps/stories/stories/react/Sortable/Quickstart.tsx",
"chars": 427,
"preview": "import {useSortable} from '@dnd-kit/react/sortable';\n\nexport function Sortable({id, index}: {id: number; index: number})"
},
{
"path": "apps/stories/stories/react/Sortable/Sortable.stories.tsx",
"chars": 913,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport SortableApp from './SortableApp.tsx';\nimport sortable"
},
{
"path": "apps/stories/stories/react/Sortable/SortableApp.tsx",
"chars": 1105,
"preview": "import React, {useRef, useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} fro"
},
{
"path": "apps/stories/stories/react/Sortable/SortableExample.tsx",
"chars": 4131,
"preview": "import React, {useRef, useState, memo} from 'react';\nimport type {CSSProperties, PropsWithChildren} from 'react';\nimport"
},
{
"path": "apps/stories/stories/react/Sortable/Table/Table.stories.tsx",
"chars": 336,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {TableExample} from './TableExample.tsx';\n\nconst meta"
},
{
"path": "apps/stories/stories/react/Sortable/Table/TableExample.tsx",
"chars": 6156,
"preview": "import React, {useRef, useState} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {Restrict"
},
{
"path": "apps/stories/stories/react/Sortable/Transformed/Transformed.stories.tsx",
"chars": 516,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {TransformedExample} from './TransformedExample';\n\nco"
},
{
"path": "apps/stories/stories/react/Sortable/Transformed/TransformedExample.tsx",
"chars": 2740,
"preview": "import React, {useState} from 'react';\nimport type {CSSProperties} from 'react';\nimport type {UniqueIdentifier} from '@d"
},
{
"path": "apps/stories/stories/react/Sortable/Tree/Tree.module.css",
"chars": 1041,
"preview": ".Tree {\n max-width: 600px;\n padding: 10px;\n margin: 10% auto 0px;\n}\n\n.TreeItem {\n position: relative;\n display: fle"
},
{
"path": "apps/stories/stories/react/Sortable/Tree/Tree.stories.tsx",
"chars": 1020,
"preview": "import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {Tree} from '."
},
{
"path": "apps/stories/stories/react/Sortable/Tree/Tree.tsx",
"chars": 5264,
"preview": "import {useRef, useState} from 'react';\nimport {DragDropProvider, DragOverlay} from '@dnd-kit/react';\nimport {isKeyboard"
},
{
"path": "apps/stories/stories/react/Sortable/Tree/TreeItem.tsx",
"chars": 1105,
"preview": "import {useSortable} from '@dnd-kit/react/sortable';\n\nimport {Handle} from '../../components/Handle/Handle.tsx';\nimport "
},
{
"path": "apps/stories/stories/react/Sortable/Tree/TreeItemOverlay.tsx",
"chars": 455,
"preview": "import type {UniqueIdentifier} from '@dnd-kit/abstract';\n\nimport {Handle} from '../../components/Handle/Handle.tsx';\nimp"
},
{
"path": "apps/stories/stories/react/Sortable/Tree/types.ts",
"chars": 193,
"preview": "export interface Item {\n id: string;\n children: Item[];\n collapsed?: boolean;\n}\n\nexport interface FlattenedItem exten"
},
{
"path": "apps/stories/stories/react/Sortable/Tree/utilities.ts",
"chars": 2869,
"preview": "import {UniqueIdentifier} from '@dnd-kit/abstract';\n\nimport type {Item, FlattenedItem} from './types.ts';\n\nexport functi"
},
{
"path": "apps/stories/stories/react/Sortable/Vertical/AutoScrollExample.tsx",
"chars": 1768,
"preview": "import React, {useState, memo} from 'react';\nimport type {PropsWithChildren} from 'react';\nimport type {Axis} from '@dnd"
},
{
"path": "apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx",
"chars": 2843,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\nimport {RestrictToVerticalAxis} from '@dnd-kit/abstract/modif"
},
{
"path": "apps/stories/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx",
"chars": 1976,
"preview": "import React, {useRef, useState} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport {DragDrop"
},
{
"path": "apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx",
"chars": 3314,
"preview": "import React, {forwardRef, useLayoutEffect, useRef, useState} from 'react';\nimport type {PropsWithChildren} from 'react'"
},
{
"path": "apps/stories/stories/react/Sortable/Virtualized/ReactWindowExample.tsx",
"chars": 2133,
"preview": "import React, {useRef, useEffect, useState} from 'react';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimpor"
},
{
"path": "apps/stories/stories/react/Sortable/Virtualized/Virtualized.stories.tsx",
"chars": 730,
"preview": "import type {Meta, StoryObj} from '@storybook/react-vite';\n\nimport {ReactWindowExample} from './ReactWindowExample';\nimp"
},
{
"path": "apps/stories/stories/react/Sortable/docs/SortableDocs.mdx",
"chars": 2548,
"preview": "import {Code, Preview} from '../../../components';\nimport {Example as Hero} from '../Sortable.stories';\nimport BasicSetu"
},
{
"path": "apps/stories/stories/react/Sortable/docs/examples/ControlledExample.jsx",
"chars": 771,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-"
},
{
"path": "apps/stories/stories/react/Sortable/docs/examples/Example.jsx",
"chars": 776,
"preview": "import React, {useState} from 'react';\nimport {DragDropProvider} from '@dnd-kit/react';\nimport {useSortable} from '@dnd-"
}
]
// ... and 535 more files (download for full content)
About this extraction
This page contains the full source code of the clauderic/dnd-kit GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 735 files (1.4 MB), approximately 413.8k tokens, and a symbol index with 1093 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.