### Install @dnd-kit/react

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/quickstart.mdx

Install the `@dnd-kit/react` package using your preferred package manager to get started with drag and drop functionalities in React.

```bash
npm install @dnd-kit/react
```

```bash
yarn add @dnd-kit/react
```

```bash
pnpm add @dnd-kit/react
```

```bash
bun add @dnd-kit/react
```

--------------------------------

### Basic Draggable and Droppable Setup

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/hooks/use-droppable.mdx

This example demonstrates a basic setup for drag and drop functionality using DragDropProvider, useDraggable, and Droppable components. It manages the state to conditionally render a draggable item.

```jsx
import {useState} from 'react';
import {DragDropProvider, useDraggable} from '@dnd-kit/react';
import {Droppable} from './Droppable';
import './styles.css';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});
  return <button ref={ref} className="btn">draggable</button>;
}

export default function App() {
  const [parent, setParent] = useState(undefined);
  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id);
      }}
    >
      <div className="container">
        {parent == null ? <Draggable /> : null}
        <Droppable>
          {parent === 'droppable' ? <Draggable /> : null}
        </Droppable>
      </div>
    </DragDropProvider>
  );
}
```

--------------------------------

### Install dnd-kit/svelte package

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/quickstart.mdx

Install the @dnd-kit/svelte package using your preferred package manager to get started with drag and drop functionalities in Svelte.

```bash
npm install @dnd-kit/svelte
```

```bash
yarn add @dnd-kit/svelte
```

```bash
pnpm add @dnd-kit/svelte
```

```bash
bun add @dnd-kit/svelte
```

--------------------------------

### Quick start drag and drop with React hooks

Source: https://github.com/clauderic/dnd-kit/blob/main/packages/react/README.md

Basic example demonstrating how to set up a drag and drop interface using DragDropProvider, useDraggable, and useDroppable hooks. The example shows state management for tracking the parent droppable target and handling drag end events.

```typescript
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/react';

function App() {
  const [parent, setParent] = useState(null);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id ?? null);
      }}
    >
      {parent == null ? <Draggable /> : null}
      <Droppable>{parent ? <Draggable /> : 'Drop here'}</Droppable>
    </DragDropProvider>
  );
}
```

--------------------------------

### Install Mintlify CLI using npm

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/README.md

Install the Mintlify CLI globally to enable local documentation previews. This is required before running the development server.

```bash
npm i -g mintlify
```

--------------------------------

### Install @dnd-kit/solid

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/solid/quickstart.mdx

Install the package using your preferred package manager. Requires SolidJS 1.8 or later.

```bash npm
npm install @dnd-kit/solid
```

```bash yarn
yarn add @dnd-kit/solid
```

```bash pnpm
pnpm add @dnd-kit/solid
```

```bash bun
bun add @dnd-kit/solid
```

--------------------------------

### App Example with Sortable Items

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-sortable.mdx

This code snippet shows a complete application example using `DragDropProvider` and `SortableItem` components to create a reorderable list. It handles drag start, drag over, and drag end events to manage the item order.

```APIDOC
## DragDropProvider and Sortable Integration

### Description

This example demonstrates how to set up the `DragDropProvider` and integrate `SortableItem` components to create a fully functional sortable list. It includes event handlers for managing the drag-and-drop state and item reordering.

### Usage

```svelte
<script>
  import {DragDropProvider} from '@dnd-kit/svelte';
  import {move} from '@dnd-kit/helpers';
  import SortableItem from './SortableItem.svelte';
  import './styles.css';

  let items = $state([1, 2, 3, 4]);
  let snapshot = [];

  function onDragStart() {
    snapshot = items.slice();
  }

  function onDragOver(event) {
    items = move(items, event);
  }

  function onDragEnd(event) {
    if (event.canceled) items = snapshot;
  }
</script>

<DragDropProvider {onDragStart} {onDragOver} {onDragEnd}>
  <ul class="list">
    {#each items as id, index (id)}
      <SortableItem {id} {index} />
    {/each}
  </ul>
</DragDropProvider>
```
```

--------------------------------

### Install @dnd-kit/dom

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/quickstart.mdx

Install the dnd-kit DOM package using your preferred package manager.

```bash
npm install @dnd-kit/dom
```

```bash
yarn add @dnd-kit/dom
```

```bash
pnpm add @dnd-kit/dom
```

```bash
bun add @dnd-kit/dom
```

--------------------------------

### Complete Draggable App Example

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/solid/hooks/use-draggable.mdx

Full working example with DragDropProvider wrapping a draggable button component with styling.

```tsx
import {DragDropProvider, useDraggable} from '@dnd-kit/solid';
import './styles.css';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});

  return <button ref={ref} class="btn">draggable</button>;
}

export default function App() {
  return (
    <DragDropProvider>
      <Draggable />
    </DragDropProvider>
  );
}
```

--------------------------------

### Run Mintlify development server

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/README.md

Execute this command at the root of the /apps/docs directory. It starts a local server to preview documentation changes.

```bash
mintlify dev
```

--------------------------------

### Basic Solid.js Sortable List Example

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/solid/hooks/use-sortable.mdx

This example demonstrates how to create a basic sortable list using the `useSortable` hook with Solid.js, integrating with `DragDropProvider` and the `move` helper for reordering items.

```typescript
import {createSignal, For} from 'solid-js';
import {DragDropProvider} from '@dnd-kit/solid';
import {useSortable} from '@dnd-kit/solid/sortable';
import {move} from '@dnd-kit/helpers';
import './styles.css';

function SortableItem(props) {
  const {ref} = useSortable({
    get id() { return props.id; },
    get index() { return props.index; }
  });

  return <li ref={ref} class="item">Item {props.id}</li>;
}

export default function App() {
  const [items, setItems] = createSignal([1, 2, 3, 4]);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        setItems((items) => move(items, event));
      }}
    >
      <ul class="list">
        <For each={items()}>
          {(id, index) => <SortableItem id={id} index={index()} />}
        </For>
      </ul>
    </DragDropProvider>
  );
}
```

--------------------------------

### Import dnd-kit Components and Examples

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/stories/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx

Import necessary components from dnd-kit and load example source files for implementing multiple sortable lists. Includes Code and Preview components for documentation display, and raw source imports for App, Item, and Column examples.

```typescript
import {Code, Preview} from '../../../../components';

import {MultipleLists} from '../MultipleLists.tsx';
import {Hero} from '../MultipleLists.stories.tsx';
import {Example} from './examples/QuickStart';
import ExampleSource from './examples/QuickStart?raw';
import ColumnSource from './examples/Column?raw';
import ItemSource from './examples/Item?raw';
```

--------------------------------

### Install @dnd-kit/react Package

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/stories/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx

Install the @dnd-kit/react package using npm. This is a prerequisite for implementing drag-and-drop functionality with dnd-kit.

```bash
npm install @dnd-kit/react
```

--------------------------------

### Basic Setup for Sortable List

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-sortable.mdx

Demonstrates the basic setup for a vertical sortable list using createSortable. This snippet requires separate component files for the main application and individual sortable items, along with CSS for styling.

```svelte
import { Story } from '/snippets/story.mdx';
import { CodeSandbox } from '/snippets/sandbox.mdx';
import { sortableStyles } from '/snippets/code.mdx';

<Story id="sortable-vertical-list--basic-setup" framework="svelte" height="320" hero />

<CodeSandbox template="svelte" files={{
  '/src/App.svelte': {code: appCode, active: true},
  '/src/SortableItem.svelte': {code: sortableItemCode},
  '/src/styles.css': {code: sortableStyles, hidden: true},
}} height={560} previewHeight={180} />

<Warning>
  Each sortable item must live in its own component (`SortableItem.svelte` above), with `createSortable` called in that component's `<script>`. Calling `createSortable` inline in an `{#each}` block — for example via `{@const sortable = createSortable(...)}` — re-runs the call on every reorder, which creates a fresh `Sortable` instance per render and breaks sort transition animations. Wrapping each item in its own component is what gives `createSortable` a stable per-item identity across reorders.
</Warning>

<Note>
  Pass reactive values like `id` and `index` as **getter properties** (e.g. `get id() { return id; }`, `get index() { return index; }`) so the underlying sortable stays in sync as items are reordered. Visual sorting during drag is driven by calling `move()` in `onDragOver`; the `onDragEnd` handler only needs to restore the snapshot when the drag is canceled.
</Note>
```

--------------------------------

### Install @dnd-kit/vue

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/vue/quickstart.mdx

Install the package using your preferred package manager. Note that @dnd-kit/vue requires Vue 3.5 or later.

```bash npm
npm install @dnd-kit/vue
```

```bash yarn
yarn add @dnd-kit/vue
```

```bash pnpm
pnpm add @dnd-kit/vue
```

```bash bun
bun add @dnd-kit/vue
```

--------------------------------

### Sortable Item Example

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-sortable.mdx

This code snippet demonstrates how to use the `createSortable` primitive to create a sortable list item. It includes the necessary imports and setup for a basic sortable item.

```APIDOC
## createSortable

### Description

Creates a sortable instance for a given item.

### Parameters

#### Path Parameters

- **id** (any) - Required - The unique identifier for the sortable item.
- **index** (number) - Required - The current index of the sortable item.

### Usage

```svelte
<script>
  import {createSortable} from '@dnd-kit/svelte/sortable';

  let {id, index} = $props();

  const sortable = createSortable({
    get id() { return id; },
    get index() { return index; },
  });
</script>

<li {@attach sortable.attach} class="item">
  Item {id}
</li>
```
```

--------------------------------

### Install @dnd-kit/helpers package via npm

Source: https://github.com/clauderic/dnd-kit/blob/main/packages/helpers/README.md

Installation command for the @dnd-kit/helpers package. This is a prerequisite step before using any of the helper functions in your project.

```bash
npm install @dnd-kit/helpers
```

--------------------------------

### Basic Draggable Setup with createDraggable

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-draggable.mdx

This snippet demonstrates the basic setup for making an element draggable using the `createDraggable` primitive. It requires a unique ID and attaches the primitive to a button element.

```svelte
<script>
  import {DragDropProvider, createDraggable} from '@dnd-kit/svelte';
  import './styles.css';
</script>

<DragDropProvider>
  {@const draggable = createDraggable({id: 'draggable'})}
  <button {@attach draggable.attach} class="btn">
    draggable
  </button>
</DragDropProvider>
```

--------------------------------

### Basic useDraggable Setup

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/vue/composables/use-draggable.mdx

This snippet demonstrates the basic setup for the `useDraggable` composable. It requires a unique ID and an element template ref, and it returns the `isDragging` state.

```vue
<script setup>
import {ref} from 'vue';
import {useDraggable} from '@dnd-kit/vue';

const element = ref(null);
const {isDragging} = useDraggable({id: 'my-draggable', element});
</script>

<template>
  <button ref="element" :data-dragging="isDragging">
    Drag me
  </button>
</template>
```

--------------------------------

### Initialize Drag and Drop Application

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/quickstart.mdx

Sets up the main application by creating a DragDropManager, draggable, and droppable instances, then appending them to the DOM. This is the initial setup for the drag-and-drop interface.

```javascript
import {DragDropManager} from '@dnd-kit/dom';

import {createDraggable} from './Draggable.js';
import {createDroppable} from './Droppable.js';

export default function App() {
  const manager = new DragDropManager();
  const app = document.getElementById('app');

  const draggable = createDraggable(manager);
  const droppable = createDroppable(manager);

  app.append(draggable.element, droppable.element);
}
```

--------------------------------

### Basic Droppable Setup

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-droppable.mdx

This snippet demonstrates the basic setup for a droppable component using `createDroppable`. It requires a unique ID and uses the `attach` function to bind the droppable element. The `isDropTarget` state is used to apply an 'active' class when a draggable item is hovering over it.

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

  let {children} = $props();
  const droppable = createDroppable({id: 'droppable'});
</script>

<div
  {@attach droppable.attach}
  class="droppable"
  class:active={droppable.isDropTarget}
>
  {@render children?.()}
</div>
```

--------------------------------

### Basic Droppable Setup and Event Monitoring

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/concepts/droppable.mdx

Initialize a DragDropManager and a Droppable instance. Listen for 'dragend' events on the manager to detect when an item is dropped onto the target.

```javascript
import {Droppable, DragDropManager} from '@dnd-kit/dom';

const manager = new DragDropManager();

const element = document.createElement('div');
element.classList.add('droppable');

// Create a droppable target
const droppable = new Droppable({
  id: 'drop-zone',
  element,
}, manager);

document.body.appendChild(element);

// Listen for drop events
manager.monitor.addEventListener('dragend', (event) => {
  if (event.operation.target?.id === droppable.id) {
    console.log('Item dropped!', event.operation.source);
  }
});
```

--------------------------------

### Draggable Component Setup

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-droppable.mdx

This is a simple draggable component setup using `createDraggable`. It requires an ID and uses the `attach` function to bind the draggable element to the drag-and-drop system.

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

  const draggable = createDraggable({id: 'draggable'});
</script>

<button {@attach draggable.attach} class="btn">draggable</button>
```

--------------------------------

### dragstart Event

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/concepts/drag-drop-manager.mdx

Fires when the drag operation officially starts.

```APIDOC
## dragstart Event

Fires when drag starts.

### Properties

- **operation** (object) - Required - The current drag operation
- **nativeEvent** (Event) - Required - The original browser event that triggered the drag
```

--------------------------------

### Install @dnd-kit/solid via npm

Source: https://github.com/clauderic/dnd-kit/blob/main/packages/solid/README.md

This command installs the @dnd-kit/solid package using npm, making it available for use in your SolidJS project. It's the first step to integrate dnd-kit's drag and drop functionalities into your application.

```bash
npm install @dnd-kit/solid
```

--------------------------------

### Replace All Default Plugins in DragDropProvider

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/solid/components/drag-drop-provider.mdx

This example demonstrates how to completely replace the default plugins with a custom array of plugins for the DragDropProvider.

```tsx
plugins={[MyPlugin]}
```

--------------------------------

### Basic DragDropProvider Setup

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/components/drag-drop-provider.mdx

Wrap your application or a specific section with DragDropProvider to enable drag and drop functionality. Ensure the component is imported from '@dnd-kit/react'.

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

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

--------------------------------

### Using drag handles

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/primitives/create-draggable.mdx

Example demonstrating how to use the `attachHandle` function to designate a specific element as the drag handle for a draggable item.

```APIDOC
## Using drag handles

You can use `attachHandle` to designate a specific element as the drag handle:

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

  const draggable = createDraggable({id: 'draggable'});
</script>

<div {@attach draggable.attach}>
  Drag me by the handle
  <button {@attach draggable.attachHandle} class="handle" />
</div>
```
```

--------------------------------

### Install @dnd-kit/svelte package using npm

Source: https://github.com/clauderic/dnd-kit/blob/main/packages/svelte/README.md

This command installs the `@dnd-kit/svelte` package, which is the Svelte adapter for the dnd-kit library. It's required to use the drag and drop functionalities in Svelte 5 applications.

```bash
npm install @dnd-kit/svelte
```

--------------------------------

### Basic DragDropProvider Setup in Vue

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/vue/components/drag-drop-provider.mdx

Import and wrap your draggable/droppable elements with DragDropProvider. Listen to the dragEnd event to handle drop operations.

```vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
</script>

<template>
  <DragDropProvider @dragEnd="handleDragEnd">
    <!-- Your draggable and droppable elements -->
  </DragDropProvider>
</template>
```

--------------------------------

### Basic App Component Using Draggable (React)

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/hooks/use-draggable.mdx

This example shows a minimal React `App` component that renders a `Draggable` component.

```jsx
import {Draggable} from './Draggable.js';
import './styles.css';

export default function App() {
  return <Draggable id="draggable"/>;
}
```

--------------------------------

### Extend Default Plugins in DragDropProvider

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/solid/components/drag-drop-provider.mdx

This example shows how to add a custom plugin to the DragDropProvider while retaining the default plugins.

```tsx
plugins={(defaults) => [...defaults, MyPlugin]}
```

--------------------------------

### Define Pointer Activation Constraints

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/sensors/pointer-sensor.mdx

Illustrates the type definitions and instantiation examples for `PointerActivationConstraints.Distance` and `PointerActivationConstraints.Delay` to control when a drag operation should begin.

```ts
import {PointerActivationConstraints} from '@dnd-kit/dom';

// Array of constraint instances
type ActivationConstraints<E extends Event> = ActivationConstraint<E>[];

// Distance type
type Distance = number | {x?: number; y?: number};

// Distance constraint
new PointerActivationConstraints.Distance({
    value: number;        // Required distance in pixels
    tolerance?: Distance; // Optional abort threshold
});

// Delay constraint
new PointerActivationConstraints.Delay({
    value: number;        // Required duration in ms
    tolerance: Distance;  // Movement tolerance
});
```

--------------------------------

### Create a Draggable Element

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/quickstart.mdx

This example demonstrates how to create a draggable button element and integrate it with the DragDropManager. Ensure you have the necessary imports for Draggable and DragDropManager.

```javascript
import {Draggable, DragDropManager} from '@dnd-kit/dom';

function createDraggable(manager) {
  // Create a DOM element (or use an existing one)
  const element = document.createElement('button');
  element.innerText = 'draggable';
  element.classList.add('btn');

  // Make the element draggable
  return new Draggable({id: 'draggable-button', element}, manager);
}

export default function App() {
  // Create a manager to coordinate drag and drop
  const manager = new DragDropManager();

  // Create a draggable element
  const draggable = createDraggable(manager);

  // Add the draggable element to the DOM
  document.body.append(draggable.element);
}
```

--------------------------------

### Customize Pointer Sensor Activation for Touch Devices

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/sensors/pointer-sensor.mdx

Provides an example of configuring `activationConstraints` specifically for touch input, adjusting delay and tolerance to improve responsiveness on mobile devices.

```ts
PointerSensor.configure({
  activationConstraints(event) {
    if (event.pointerType === 'touch') {
      return [
        new PointerActivationConstraints.Delay({
          value: 150,    // Shorter delay for faster touch response
          tolerance: 10, // More tolerance for finger movement
        }),
      ];
    }

    return undefined; // Use defaults for mouse/pen
  },
});
```

--------------------------------

### Create a Custom Sensor

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/sensors.mdx

Defines a custom sensor by extending the base Sensor class. This example shows how to bind custom event listeners and manage drag operations based on a 'customstart' event.

```typescript
import {Sensor} from '@dnd-kit/abstract';

interface CustomSensorOptions {
  delay?: number;
}

class CustomSensor extends Sensor {
  constructor(manager, options?: CustomSensorOptions) {
    super(manager, options);
  }

  public bind(source) {
    // Register event listeners
    const unbind = this.registerEffect(() => {
      const target = source.handle ?? source.element;

      if (!target) return;

      const handleStart = (event) => {
        if (this.disabled) return;

        this.manager.actions.setDragSource(source.id);
        this.manager.actions.start({
          event,
          coordinates: getCoordinates(event)
        });
      };

      target.addEventListener('customstart', handleStart);

      return () => {
        target.removeEventListener('customstart', handleStart);
      };
    });

    return unbind;
  }
}
```

--------------------------------

### Initial Setup: App.js, Column.js, Item.js, and styles.css

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/guides/multiple-sortable-lists.mdx

This snippet provides the initial boilerplate for the React application, including the main App component, a generic Column component, a basic Item component, and global styles. It sets up the basic structure before adding drag and drop functionality.

```javascript
import React, {useState} from 'react';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable';

import {Column} from './Column';
import {Item} from './Item';

import './styles.css';

export default function App() {
  const [items, setItems] = useState({
    todo: ['Task 1', 'Task 2', 'Task 3'],
    doing: ['Task 4', 'Task 5'],
    done: ['Task 6', 'Task 7', 'Task 8'],
  });

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  function handleDragEnd(event) {
    const {active, over} = event;

    if (active.id !== over.id) {
      setItems((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  }

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 10,
          padding: 20,
        }}
      >
        {Object.keys(items).map((columnId) => (
          <Column id={columnId} key={columnId}>
            <SortableContext
              items={items[columnId]}
              strategy={verticalListSortingStrategy}
            >
              {items[columnId].map((id) => (
                <Item key={id} id={id} />
              ))}
            </SortableContext>
          </Column>
        ))}
      </div>
    </DndContext>
  );
}
```

```javascript
import React from 'react';

export function Column({children, id}) {
  return (
    <div
      style={{
        padding: 10,
        border: '1px solid #ccc',
        borderRadius: 5,
        minHeight: 100,
      }}
    >
      <h3>{id}</h3>
      {children}
    </div>
  );
}
```

```javascript
import React from 'react';

export function Item({id}) {
  return (
    <div
      style={{
        padding: 10,
        margin: '5px 0',
        border: '1px solid #eee',
        backgroundColor: '#f9f9f9',
        borderRadius: 3,
      }}
    >
      {id}
    </div>
  );
}
```

```css
body {
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

--------------------------------

### Configure Dnd-kit KeyboardSensor with Custom Key Codes for Drag Operations

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/stories/stories/react/Draggable/Sensors/docs/SensorDocs.mdx

This JavaScript example shows how to configure the `KeyboardSensor` to respond to specific keyboard codes for various drag operations. It customizes keys for starting, canceling, ending, and moving a draggable item, ensuring accessibility while allowing flexibility.

```javascript
import {KeyboardSensor} from '@dnd-kit/dom';

const sensors = [
  KeyboardSensor.configure({
    keyboardCodes: {
      start: ['Space', 'Enter'],
      cancel: ['Escape'],
      end: ['Space', 'Enter'],
      up: ['ArrowUp'],
      down: ['ArrowDown'],
      left: ['ArrowLeft'],
      right: ['ArrowRight'],
    },
  }),
];
```

--------------------------------

### Manage dnd-kit Monorepo with Bun

Source: https://github.com/clauderic/dnd-kit/blob/main/README.md

This snippet provides essential `bun` commands for managing the dnd-kit monorepo, including installing dependencies, building all packages, and running development mode. These commands are crucial for contributors to set up their development environment and work on the project efficiently.

```bash
# Install dependencies
bun install

# Build all packages
bun run build

# Run dev mode
bun run dev
```

--------------------------------

### Global Options Configuration

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/plugins/feedback.mdx

Configure global behaviors for dnd-kit, including drop animations, keyboard transitions, and the root element for dragged items.

```APIDOC
## Global Options

### Option: dropAnimation
- **Type**: DropAnimation | null
- **Description**: Customize or disable the drop animation that plays when a dragged element is released.
  - `undefined` (default) — use the built-in drop animation
  - `null` — disable the drop animation entirely
  - `DropAnimationOptions` — customize the duration and easing of the built-in animation
  - `DropAnimationFunction` — provide a fully custom animation function

### Option: keyboardTransition
- **Type**: KeyboardTransition | null
- **Description**: Customize or disable the CSS transition applied when moving elements via keyboard.
  By default, keyboard-driven moves animate with `250ms cubic-bezier(0.25, 1, 0.5, 1)`. This transition is automatically disabled when the user prefers reduced motion.
  - `undefined` (default) — use the built-in keyboard transition
  - `null` — disable the transition (moves are instant, like pointer operations)
  - `{ duration, easing }` — customize the transition duration (in ms) and CSS easing function

### Option: rootElement
- **Type**: Element | ((source: Draggable) => Element)
- **Description**: An element (or a function returning one) to use as the root container for the dragged element. When set, the dragged element is moved into this container during the drag operation.
```

--------------------------------

### Configure and Create a Plugin Instance

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/plugins.mdx

Use the static `configure` method to create a plugin descriptor with options, then pass this descriptor to the `DragDropManager` constructor.

```typescript
const configuredPlugin = MyPlugin.configure({
  delay: 500
});

const manager = new DragDropManager({
  plugins: [configuredPlugin]
});
```

--------------------------------

### Install @dnd-kit/vue package using npm

Source: https://github.com/clauderic/dnd-kit/blob/main/packages/vue/README.md

This command installs the `@dnd-kit/vue` package, which provides Vue-specific adapters for the dnd-kit library, enabling drag and drop functionality in Vue applications. It's the first step to integrate drag and drop features into your Vue project.

```bash
npm install @dnd-kit/vue
```

--------------------------------

### Custom Modifier Example

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/modifiers.mdx

Create custom modifiers by extending the `Modifier` class.

```APIDOC
## Creating Custom Modifiers

Create custom modifiers by extending the `Modifier` class:

```ts
import {Modifier} from '@dnd-kit/abstract';
import type {Coordinates} from '@dnd-kit/geometry';

interface GridOptions {
  gridSize: number;
}

class SnapToGrid extends Modifier {
  constructor(manager, options?: GridOptions) {
    super(manager, options);
  }

  public apply(operation): Coordinates {
    if (this.disabled) return operation.transform;

    const {gridSize = 20} = this.options ?? {};
    const {transform} = operation;

    return {
      x: Math.round(transform.x / gridSize) * gridSize,
      y: Math.round(transform.y / gridSize) * gridSize,
    };
  }
}
```
```

--------------------------------

### beforedragstart Event

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/concepts/drag-drop-manager.mdx

Fires before drag begins. This event can be prevented to stop the drag operation from starting.

```APIDOC
## beforedragstart Event

Fires before drag begins. Can be prevented.

### Properties

- **operation** (object) - Required - The drag operation that is about to begin
- **preventDefault** (function) - Required - Call to prevent the drag operation from starting
```

--------------------------------

### DragDropProvider and useDraggable Integration

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/solid/hooks/use-droppable.mdx

Example of a parent component managing drag-and-drop state using DragDropProvider and useDraggable.

```tsx
import {createSignal} from 'solid-js';
import {DragDropProvider, useDraggable} from '@dnd-kit/solid';
import {Droppable} from './Droppable';
import './styles.css';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});
  return <button ref={ref} class="btn">draggable</button>;
}

export default function App() {
  const [parent, setParent] = createSignal(undefined);
  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id);
      }}
    >
      <div class="container">
        {parent() == null ? <Draggable /> : null}
        <Droppable>
          {parent() === 'droppable' ? <Draggable /> : null}
        </Droppable>
      </div>
    </DragDropProvider>
  );
}
```

--------------------------------

### Implement basic drag and drop with @dnd-kit/solid

Source: https://github.com/clauderic/dnd-kit/blob/main/packages/solid/README.md

This example demonstrates how to set up a basic drag and drop interface in SolidJS using `@dnd-kit/solid`. It utilizes `DragDropProvider` to manage the drag and drop context, `useDraggable` to make an element draggable, and `useDroppable` to define a drop target. The `onDragEnd` event handler updates the state to reflect whether the draggable item has been dropped.

```tsx
import {createSignal} from 'solid-js';
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/solid';

function Draggable() {
  const {ref} = useDraggable({id: 'draggable'});
  return <button ref={ref}>Drag me</button>;
}

function Droppable(props) {
  const {ref} = useDroppable({id: 'droppable'});
  return <div ref={ref}>{props.children}</div>;
}

function App() {
  const [parent, setParent] = createSignal(null);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;
        setParent(event.operation.target?.id ?? null);
      }}
    >
      {parent() == null ? <Draggable /> : null}
      <Droppable>{parent() ? <Draggable /> : 'Drop here'}</Droppable>
    </DragDropProvider>
  );
}
```

--------------------------------

### Initialize a Draggable element with dnd-kit/dom

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/concepts/draggable.mdx

Demonstrates how to create a new Draggable instance, associate it with an HTML element, and register it with a DragDropManager.

```javascript
import {Draggable, DragDropManager} from '@dnd-kit/dom';

export function App() {
  const manager = new DragDropManager();

  const element = document.createElement('button');
  element.innerText = 'draggable';
  element.classList.add('btn');

  const draggable = new Draggable({
    id: 'draggable-1', // Required - must be unique
    element,
  }, manager);

  document.body.appendChild(element);
}
```

--------------------------------

### Implement Basic Drag and Drop with dnd-kit in React

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/quickstart.mdx

This example demonstrates a simple drag and drop interaction using `DragDropProvider`, `useDraggable`, and `useDroppable` to manage a single draggable item and one droppable target.

```jsx
import {DragDropProvider} from '@dnd-kit/react';
import Draggable from './Draggable';
import Droppable from './Droppable';

function App() {
  const [isDropped, setIsDropped] = useState(false);

  return (
    <DragDropProvider
      onDragEnd={(event) => {
        if (event.canceled) return;

        const {target} = event.operation;
        setIsDropped(target?.id === 'droppable');
      }}
    >
      {!isDropped && <Draggable />}

      <Droppable id="droppable">
        {isDropped && <Draggable />}
      </Droppable>
    </DragDropProvider>
  );
}
```

```jsx
import {useDraggable} from '@dnd-kit/react';

export function Draggable() {
  const {ref} = useDraggable({
    id: 'draggable',
  });

  return (
    <button ref={ref}>
      Draggable
    </button>
  );
}
```

```jsx
import {useDroppable} from '@dnd-kit/react';

function Droppable({id, children}) {
  const {ref} = useDroppable({
    id,
  });

  return (
    <div ref={ref} style={{width: 300, height: 300}}>
      {children}
    </div>
  );
}
```

--------------------------------

### Initialize Debug plugin with DragDropProvider (Solid)

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/plugins/debug.mdx

Add the Debug plugin to the DragDropProvider component in Solid. Import Debug from '@dnd-kit/dom/plugins/debug' and pass it in the plugins prop.

```Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {Debug} from '@dnd-kit/dom/plugins/debug';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [Debug, ...defaults]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}
```

--------------------------------

### Configure CSS Cascade Layer Order

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/plugins/feedback.mdx

Declare the dnd-kit layer at the start of your CSS to ensure it has the lowest priority relative to other layers.

```css
@layer dnd-kit, base, components, utilities;
```

--------------------------------

### Global Modifiers with DragDropProvider

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/guides/modifiers.mdx

Set modifiers globally on the `DragDropProvider` to apply them to all draggable elements within the provider. This example restricts all draggables to the window.

```tsx
import {DragDropProvider} from '@dnd-kit/react';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';

function App() {
  return (
    <DragDropProvider modifiers={[RestrictToWindow]}>
      {/* All draggable elements are restricted to the window */}
    </DragDropProvider>
  );
}
```

--------------------------------

### Basic useSortable Example

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/react/hooks/use-sortable.mdx

Demonstrates the fundamental usage of the `useSortable` hook to create a simple sortable list item in React. It requires `id` and `index` props and returns a `ref` to attach to the DOM element.

```javascript
import {useSortable} from '@dnd-kit/react/sortable';

function Sortable({id, index}) {
  const {ref} = useSortable({id, index});

  return (
    <li ref={ref} className="item">Item {id}</li>
  );
}

export default function App() {
  const items = [1, 2, 3, 4];

  return (
    <ul className="list">
      {items.map((id, index) =>
        <Sortable key={id} id={id} index={index} />
      )}
    </ul>
  );
}
```

--------------------------------

### DragDropProvider Component Setup

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/svelte/components/drag-drop-provider.mdx

Initialize the DragDropProvider component as the root wrapper for drag and drop interactions. This component creates a DragDropManager instance and provides it to all descendant components through Svelte's context API.

```APIDOC
## DragDropProvider Component

### Description
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.

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

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

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

### Props

#### manager
- **Type**: DragDropManager
- **Required**: No
- **Description**: An optional externally created DragDropManager instance. If not provided, one will be created automatically.

#### plugins
- **Type**: Plugin[] | (defaults: Plugin[]) => Plugin[]
- **Required**: No
- **Description**: Plugins to use. Defaults to the default preset. Pass an array to replace defaults, or a function to extend them.

#### sensors
- **Type**: Sensor[] | (defaults: Sensor[]) => Sensor[]
- **Required**: No
- **Description**: Sensors to use. Defaults to PointerSensor and KeyboardSensor. Pass an array to replace defaults, or a function to extend them.

#### modifiers
- **Type**: Modifier[] | (defaults: Modifier[]) => Modifier[]
- **Required**: No
- **Description**: Modifiers to apply to drag operations. Pass an array to replace defaults, or a function to extend them.

### Events

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

#### onBeforeDragStart
- **Description**: Fired before a drag operation begins. Can be used to prepare state.

#### onDragStart
- **Description**: Fired when a drag operation starts.

#### onDragMove
- **Description**: Fired when the dragged element moves.

#### onDragOver
- **Description**: 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
- **Description**: Fired when a drag operation ends (dropped or canceled).

#### onCollision
- **Description**: Fired when collisions are detected between draggable and droppable elements.
```

--------------------------------

### Configure Cursor Plugin with 'move' style

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/plugins/cursor.mdx

Use Cursor.configure() to customize the cursor style applied during drag operations. This example sets the cursor to 'move'.

```TypeScript
import {DragDropManager, Cursor} from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: (defaults) => [
    ...defaults,
    Cursor.configure({ cursor: 'move' }),
  ],
});
```

```React
import {DragDropProvider} from '@dnd-kit/react';
import {Cursor} from '@dnd-kit/dom';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Cursor.configure({ cursor: 'move' }),
      ]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}
```

```Vue
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Cursor} from '@dnd-kit/dom';
</script>

<template>
  <DragDropProvider
    :plugins="(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]"
  >
    <!-- ... -->
  </DragDropProvider>
</template>
```

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

<DragDropProvider
  plugins={(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]}
>
  <!-- ... -->
</DragDropProvider>
```

```Solid
import {DragDropProvider} from '@dnd-kit/solid';
import {Cursor} from '@dnd-kit/dom';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Cursor.configure({ cursor: 'move' }),
      ]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}
```

--------------------------------

### Configure and Use Custom Sensor

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/sensors.mdx

Demonstrates how to configure a custom sensor with options and then use this configured sensor when initializing the DragDropManager. This allows for reusable and configurable custom input handling.

```typescript
const configuredSensor = CustomSensor.configure({
  delay: 500
});

const manager = new DragDropManager({
  sensors: [configuredSensor]
});
```

--------------------------------

### Custom Collision Detection Algorithm

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/concepts/droppable.mdx

Customize collision detection by providing a specific algorithm to the Droppable constructor. This example uses `closestCenter` for card stacking scenarios.

```javascript
import {
  closestCenter,
  pointerIntersection,
  directionBiased
} from '@dnd-kit/collision';

// Use closest center point for card stacking
const droppable = new Droppable({
  id: 'card-stack',
  element,
  collisionDetector: closestCenter
}, manager);
```

--------------------------------

### Vue Sortable List Application with DragDropProvider (Vue)

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/vue/composables/use-sortable.mdx

This example shows how to set up a sortable list in a Vue application using `DragDropProvider` and the `SortableItem` component. It includes handling the `dragEnd` event to reorder items.

```vue
<script setup>
import { ref } from 'vue';
import { DragDropProvider } from '@dnd-kit/vue';
import { move } from '@dnd-kit/helpers';
import SortableItem from './SortableItem.vue';
import './styles.css';

const items = ref([1, 2, 3, 4]);

function onDragEnd(event) {
  items.value = move(items.value, event);
}
</script>

<template>
  <DragDropProvider @dragEnd="onDragEnd">
    <ul class="list">
      <SortableItem
        v-for="(id, index) in items"
        :key="id"
        :id="id"
        :index="index"
      />
    </ul>
  </DragDropProvider>
</template>
```

--------------------------------

### Replace Global Modifiers with RestrictToWindow

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/modifiers.mdx

Replace all default global modifiers with a custom array by passing it directly to the 'modifiers' option in DragDropManager. This example uses only RestrictToWindow.

```typescript
import {DragDropManager} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';

const manager = new DragDropManager({
  modifiers: [RestrictToWindow],
});
```

--------------------------------

### Extend Global Modifiers with RestrictToWindow

Source: https://github.com/clauderic/dnd-kit/blob/main/apps/docs/docs/extend/modifiers.mdx

Extend the default global modifiers by providing a function to the 'modifiers' option in DragDropManager. This example adds RestrictToWindow to the existing defaults.

```typescript
import {DragDropManager} from '@dnd-kit/dom';
import {RestrictToWindow} from '@dnd-kit/dom/modifiers';

const manager = new DragDropManager({
  modifiers: (defaults) => [...defaults, RestrictToWindow],
});
```