Draggable

A barebone wrapper component that enables native HTML5 drag operations for its content.

Props

Prop	Type	Default	Description
`componentId`	`string`	`''`	The unique identifier for the component element.
`variant`	`string`	`''`	Custom CSS variant class.
`children`	`Snippet`	`required`	The content to be made draggable.
`ondragstart`	`(event: DragEvent) => void`	`undefined`	Callback triggered when dragging starts. Use this to set dataTransfer.

A simple wrapper that makes elements draggable. You handle the data transfer in the ondragstart event.

Drag Me

Drag something!

<script>

  import { Draggable } from 'fluid-ui-svelte/components';

</script>

<Draggable ondragstart={(e) => e.dataTransfer.setData('text/plain', 'Data')}>

  <div>Drag me</div>

</Draggable>