DragDropProvider

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

function App() {
  return (
    <DragDropProvider>
      <YourDraggableContent />
    </DragDropProvider>
  );
}

function App() {
  return (
    <DragDropProvider
      onBeforeDragStart={({source, event}) => {
        // Optionally prevent dragging
        if (shouldPreventDrag(source)) {
          event.preventDefault();
        }
      }}
      onDragStart={({source}) => {
        console.log('Started dragging', source.id);
      }}
      onDragMove={({operation}) => {
        const {position} = operation;
        console.log('Current position:', position);
      }}
      onDragOver={({source, target}) => {
        console.log(`${source.id} is over ${target.id}`);
      }}
      onDragEnd={({source, target}) => {
        if (target) {
          console.log(`Dropped ${source.id} onto ${target.id}`);
        }
      }}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}

function App() {
  return (
    <div>
      <DragDropProvider>
        <FileList /> {/* Files can only be dropped in this context */}
      </DragDropProvider>

      <DragDropProvider>
        <TaskList /> {/* Tasks can only be dropped in this context */}
      </DragDropProvider>
    </div>
  );
}

import {
  DragDropProvider,
  PointerSensor,
  KeyboardSensor,
  RestrictToWindow,
} from '@dnd-kit/react';

function App() {
  return (
    <DragDropProvider
      // Custom input detection
      sensors={[
        PointerSensor,
        KeyboardSensor,
      ]}
      // Extend functionality
      plugins={[
        AutoScroller,
        Accessibility,
      ]}
      // Modify drag behavior
      modifiers={[
        RestrictToWindow,
      ]}
    >
      <YourDraggableContent />
    </DragDropProvider>
  );
}