DragDropProvider - Svelte

Overview

The DragDropProvider component is the root component for drag and drop interactions. It creates a DragDropManager instance and makes it available to all descendant components via Svelte’s context API.

Usage

<script>
  import {DragDropProvider} from '@dnd-kit/svelte';

  function onDragEnd(event) {
    // Handle drag end
  }
</script>

<DragDropProvider {onDragEnd}>
  <!-- Your draggable and droppable elements -->
</DragDropProvider>

Events

The DragDropProvider accepts callback props for all drag and drop lifecycle stages:

Prop	Description
`onBeforeDragStart`	Fired before a drag operation begins. Can be used to prepare state.
`onDragStart`	Fired when a drag operation starts.
`onDragMove`	Fired when the dragged element moves.
`onDragOver`	Fired when the dragged element moves over a droppable target. Call `event.preventDefault()` to prevent the default behavior of plugins that respond to this event.
`onDragEnd`	Fired when a drag operation ends (dropped or canceled).
`onCollision`	Fired when collisions are detected between draggable and droppable elements.

Props

manager

DragDropManager

An optional externally created DragDropManager instance. If not provided, one will be created automatically.

plugins

Plugin[] | (defaults: Plugin[]) => Plugin[]

Plugins to use. Defaults to the default preset. Pass an array to replace defaults, or a function to extend them.

// Add a plugin alongside defaults
plugins={(defaults) => [...defaults, MyPlugin]}

// Replace defaults entirely
plugins={[MyPlugin]}

sensors

Sensor[] | (defaults: Sensor[]) => Sensor[]

Sensors to use. Defaults to PointerSensor and KeyboardSensor. Pass an array to replace defaults, or a function to extend them.

modifiers

Modifier[] | (defaults: Modifier[]) => Modifier[]

Modifiers to apply to drag operations. Pass an array to replace defaults, or a function to extend them.