DragDropProvider

The DragDropProvider component creates and manages a DragDropManager instance for your SolidJS application.

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 Solid’s context API.

Usage

import {DragDropProvider} from '@dnd-kit/solid';

function App() {
  return (
    <DragDropProvider
      onDragEnd={(event) => {
        // Handle drop
      }}
    >
      {/* Your draggable and droppable elements */}
    </DragDropProvider>
  );
}

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.

Event Props

Prop	Description
onBeforeDragStart	Called before a drag operation begins.
onDragStart	Called when a drag operation starts.
onDragMove	Called when the dragged element moves.
onDragOver	Called 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	Called when a drag operation ends (dropped or canceled).
onCollision	Called when collisions are detected.