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).