attachments {@attach}

attachDraggable / attachDroppable work on components that spread props onto a root element (Svelte 5.29+). Drag cards between columns — each card and column is a Svelte component, not a bare <div>.

todo

use attachDraggable on a component

keep use: actions for plain HTML

doing

spread {...props} on the root element

done

drop with attachDroppable

pattern

<!-- Component spreads props to root -->
<div {...props}>{@render children?.()}</div>

<!-- Consumer -->
<Card {@attach attachDraggable(() => ({
  container: 'todo',
  dragData: task
}))}>
  {task.title}
</Card>