Skip to main content

Draggable

<Draggable
items={value}
onChange={(value) => setValue(value)}
>
{(item) => {
const { toggle, title, icon, updateData } = item;

return (
<div className='...'>
<DraggableHandle />

// This can be any content,
// only DraggableHandle is required

<RichLabel
label={title ?? 'New item'}
icon={icon ?? icons.emptyCircle}
/>

<Switch
aria-label='Title'
checked={toggle}
onChange={(value) => updateData({ toggle: value })}
/>
</div>
);
}}
</Draggable>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Axis

If you want to limit the dragging to a specific axis, you can use the axis prop.

It accepts either horizontal, vertical, or both (default).