Examples
Import
import { DndContext } from '@dnd-kit/core';
import {
arrayMove,
horizontalListSortingStrategy,
SortableContext,
useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
Integrating with useSortable
To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.
function DndKitExample() {
const [items, setItems] = React.useState([
'Tech',
'News',
'CMS',
'Contentful',
]);
function DraggablePill({ id }) {
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({
id,
});
const style = {
transform: CSS.Translate.toString(transform),
transition,
};
return (
<Pill
dragHandleComponent={
<DragHandle
label="Reorder item"
variant="transparent"
{...attributes}
{...listeners}
/>
}
isDraggable
label={id}
ref={setNodeRef}
style={style}
/>
);
}
const handleDragEnd = (event) => {
const { active, over } = event;
if (active.id !== over.id) {
setItems((items) => {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
});
}
};
return (
<DndContext onDragEnd={handleDragEnd}>
<SortableContext items={items} strategy={horizontalListSortingStrategy}>
<Flex gap="spacingS">
{items.map((item) => (
<DraggablePill id={item} key={item} />
))}
</Flex>
</SortableContext>
</DndContext>
);
}
Example with table rows
To pick up a draggable item, press the space bar.
While dragging, use the arrow keys to move the item.
Press space again to drop the item in its new position, or press escape to cancel.
function DndKitExample() {
const styles = {
row: css({
position: 'relative',
}),
};
const [items, setItems] = React.useState([
'Tech',
'News',
'CMS',
'Contentful',
]);
function DraggableTableRow({ id }) {
const { active, attributes, listeners, setNodeRef, transform, transition } =
useSortable({
id,
});
const zIndex = active && active.id === id ? 1 : 0;
const style = {
zIndex,
transform: CSS.Translate.toString(transform),
transition,
};
return (
<Table.Row className={styles.row} ref={setNodeRef} style={style}>
<Table.Cell>
<DragHandle
label="Reorder item"
variant="transparent"
{...attributes}
{...listeners}
/>
</Table.Cell>
<Table.Cell width="95%">
<Text fontWeight="fontWeightMedium">{id}</Text>
</Table.Cell>
</Table.Row>
);
}
const handleDragEnd = (event) => {
const { active, over } = event;
if (active.id !== over.id) {
setItems((items) => {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
});
}
};
return (
<DndContext onDragEnd={handleDragEnd}>
<SortableContext items={items} strategy={horizontalListSortingStrategy}>
<Table>
{items.map((item) => (
<DraggableTableRow id={item} key={item} />
))}
</Table>
</SortableContext>
</DndContext>
);
}