### Basic Svelte DND Action Example

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

A fundamental example of using the dndzone action in Svelte. It includes item management, event handling for 'consider' and 'finalize', and uses Svelte's flip animation.

```svelte
<script>
    import {flip} from "svelte/animate";
    import {dndzone} from "svelte-dnd-action";
    let items = [
        {id: 1, name: "item1"},
        {id: 2, name: "item2"},
        {id: 3, name: "item3"},
        {id: 4, name: "item4"}
    ];
    const flipDurationMs = 300;
    function handleDndConsider(e) {
        items = e.detail.items;
    }
    function handleDndFinalize(e) {
        items = e.detail.items;
    }
</script>

<style>
    section {
        width: 50%;
        padding: 0.3em;
        border: 1px solid black;
        /* this will allow the dragged element to scroll the list although starting in version 0.9.41 the lib would detect any scrollable parent*/
        overflow: scroll;
        height: 200px;
    }
    div {
        width: 50%;
        padding: 0.2em;
        border: 1px solid blue;
        margin: 0.15em 0;
    }
</style>
<section use:dndzone="{{items, flipDurationMs}}" on:consider="{handleDndConsider}" on:finalize="{handleDndFinalize}">
    {#each items as item(item.id)}
    <div animate:flip="{{duration: flipDurationMs}}">{item.name}</div>
    {/each}
</section>
```

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

### Basic Drag-and-Drop Implementation

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Standard setup for a sortable list using dndzone and Svelte's flip animation.

```html
<style>
    section {
        width: 12em;
        padding: 1em;
        height: 7.5em;
    }
    div {
        height: 1.5em;
        width: 10em;
        text-align: center;
        border: 1px solid black;
        margin: 0.2em;
        padding: 0.3em;
    }
</style>
<script lang="ts">
    import {dndzone} from "svelte-dnd-action";
    import {flip} from "svelte/animate";

    const flipDurationMs = 200;
    function handleSort(e: CustomEvent<DndEvent>) {
        items = e.detail.items as {id: number; title: string}[];
    }

    let items = [
        {id: 1, title: "I"},
        {id: 2, title: "Am"},
        {id: 3, title: "Yoda"}
    ];
</script>
<section use:dndzone="{{items, flipDurationMs}}" on:consider="{handleSort}" on:finalize="{handleSort}">
    {#each items as item(item.id)}
    <div animate:flip="{{duration:flipDurationMs}}">{item.title}</div>
    {/each}
</section>
```

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

### Install svelte-dnd-action with Yarn

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Use this command to add the svelte-dnd-action library as a development dependency using Yarn.

```bash
yarn add -D svelte-dnd-action
```

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

### Install svelte-dnd-action with NPM

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Use this command to add the svelte-dnd-action library as a development dependency using NPM.

```bash
npm install --save-dev svelte-dnd-action
```

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

### HTML Structure for Draggable Items with Accessibility

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Example of setting up a Svelte component with draggable items, including ARIA labels for accessibility. Ensure 'aria-label' is provided on containers and items for screen reader compatibility.

```html
<h2>{listName}</h2>
<section aria-label="{listName}" use:dndzone="{{items, flipDurationMs}}" on:consider="{handleDndConsider}" on:finalize="{handleDndFinalize}">
    {#each items as item(item.id)}
    <div aria-label="{item.name}" animate:flip="{{duration: flipDurationMs}}">{item.name}</div>
    {/each}
</section>
```

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

### Basic HTML Structure for svelte-dnd-action

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

This HTML structure demonstrates the basic usage of the dndzone action, binding items and event handlers.

```html
<div use:dndzone="{{items: myItems, ...otherOptions}}" on:consider="{handler}" on:finalize="{handler}">
    {#each myItems as item(item.id)}
    <div>this is now a draggable div that can be dropped in other dnd zones</div>
    {/each}
</div>
```

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

### DND Action Options

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Configuration options for the svelte-dnd-action.

```APIDOC
## DND Action Configuration Options

### Description
This section details the available options for configuring the svelte-dnd-action. These options allow for fine-grained control over the drag and drop behavior, animations, accessibility, and more.

### Options Table

| Name | Type | Required? | Default Value | Description |
|---|---|---|---|---|
| `items` | Array&lt;Object&gt; | Yes | N/A | The data array used to render the list of draggable items. Each object must have a unique `id` property. |
| `flipDurationMs` | Number | No | `0` | Duration in milliseconds for the flip animation when items rearrange. Set to `0` to disable animations. Defaults to `100ms` if unset. |
| `type` | String | No | Internal | A string identifier for the dnd-zone. Zones with the same type can exchange items. Defaults to a unique internal type. |
| `dragDisabled` | Boolean | No | `false` | If `true`, prevents items from being dragged out of the zone. Can be changed dynamically. |
| `morphDisabled` | Boolean | No | `false` | If `true`, disables the visual morphing of the dragged element as it enters a zone. |
| `dropFromOthersDisabled` | Boolean | No | `false` | If `true`, prevents items from being dropped into this zone from other zones of the same type. Can be changed dynamically. |
| `zoneTabIndex` | Number | No | `0` | Custom `tabindex` for the dnd-zone container when not dragging. Useful for screen reader navigation. |
| `zoneItemTabIndex` | Number | No | `0` | Custom `tabindex` for individual list items when not dragging. Useful for drag handle interactions. |
| `dropTargetStyle` | Object&lt;String&gt; | No | `{outline: 'rgba(255, 255, 102, 0.7) solid 2px'}` | CSS styles to apply to the zone when items can be dropped into it. Overrides inline styles. |
| `dropTargetClasses` | Array&lt;String&gt; | No | `[]` | CSS classes to apply to the zone when items can be dropped into it. Classes should be global. |
| `transformDraggedElement` | Function | No | `() => {}` | A function invoked when a dragged element enters a zone or hovers over a new index. Allows modification of the dragged element's properties. Signature: `function(element, data, index) {}`. |
| `autoAriaDisabled` | Boolean | No | `false` | If `true`, disables automatically generated ARIA attributes and alerts. Use only if implementing custom accessibility features. |
| `centreDraggedOnCursor` | Boolean | No | `false` | If `true`, centers the dragged element on the cursor, making the cursor the focal point for drop detection. Useful for large items. |
| `useCursorForDetection` | Boolean | No | `false` | If `true`, uses the cursor position instead of the dragged element's center for drop detection, improving accuracy with large elements over small targets. Does not reposition the element. |
| `dropAnimationDisabled` | Boolean | No | `false` | If `true`, disables the animation of the dropped element to its final position. |
| `delayTouchStart` | Boolean \| Number | No | `false` | Prevents accidental drags on touch devices. `true` enables a default delay (80ms), a number sets a custom delay in ms, `false` disables the delay. |

### Example Usage

```javascript
import { dndzone } from 'svelte-dnd-action';

let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

// Apply the action with custom options
<div use:dndzone={{ items: items, flipDurationMs: 300, dragDisabled: false }}>
  {#each items as item}
    <div>{item.name}</div>
  {/each}
</div>
```
```

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

### Nested Zone Optimization Key

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Include the shadow item marker in the each block key to optimize nested drag-and-drop zones.

```sveltehtml
{#each columnItems as column (`${column._id}${column[SHADOW_ITEM_MARKER_PROPERTY_NAME] ? "_" + column[SHADOW_ITEM_MARKER_PROPERTY_NAME] : ""}`)}
   ...
{/each}
```

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

### Set Feature Flags

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Configures global optional behaviors using predefined feature flag names.

```javascript
import {setFeatureFlag, FEATURE_FLAG_NAMES} from "svelte-dnd-action";
setFeatureFlag(FEATURE_FLAG_NAMES.MY_FLAG, true);
```

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

### Implement Drag Handles with Svelte DND Action

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Use `dragHandleZone` on a container and `dragHandle` on specific elements within draggable items to enable drag-and-drop functionality via designated handles. Ensure accessibility by adding `aria-label` to the handles.

```html
<script>
    import {dragHandleZone, dragHandle} from "svelte-dnd-action";
    import {flip} from "svelte/animate";

    let items = [
        {
            id: 1,
            text: "Item 1"
        },
        {
            id: 2,
            text: "Item 2"
        },
        {
            id: 3,
            text: "Item 3"
        }
    ];
    const flipDurationMs = 100;

    function handleSort(e) {
        items = e.detail.items;
    }
</script>

<style>
    div {
        position: relative;
        height: 1.5em;
        width: 10em;
        text-align: center;
        border: 1px solid black;
        margin: 0.2em;
        padding: 0.3em;
    }
    .handle {
        position: absolute;
        right: 0;
        width: 1em;
        height: 0.5em;
        background-color: grey;
    }
</style>

<h3>Drag Handles</h3>
<p>Items can be dragged using the grey handles via mouse, touch or keyboard. The text on the items can be selected without starting a drag</p>
<hr />
<section use:dragHandleZone="{{ items, flipDurationMs }}" on:consider="{handleSort}" on:finalize="{handleSort}">
    {#each items as item (item.id)}
    <div animate:flip="{{ duration: flipDurationMs }}">
        <div use:dragHandle aria-label="drag-handle for {item.text}" class="handle" />
        <span>{item.text}</span>
    </div>
    {/each}
</section>
```

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

### Enable Touch Drag Delay in Svelte

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Set `delayTouchStart` to `true` to prevent accidental drags on touch devices. Pass a number to customize the delay threshold.

```svelte
<section use:dndzone={{ items, flipDurationMs, delayTouchStart: true }}>
    …
</section>
```

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

### overrideItemIdKeyNameBeforeInitialisingDndZones

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Configures the global key name used to identify items, useful for databases like PouchDB that use _id.

```APIDOC
## overrideItemIdKeyNameBeforeInitialisingDndZones

### Description
Sets the global key name for item identifiers. This must be called before any dndzones are initialized.

### Parameters
- **keyName** (string) - Required - The new property name to be used as the unique identifier for items.

### Request Example
```javascript
import {overrideItemIdKeyNameBeforeInitialisingDndZones} from "svelte-dnd-action";
overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
```
```

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

### Event: consider

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Dispatched when the dragged element needs to make room for itself in a new position or leaves a zone. The host component is expected to update the items list accordingly.

```APIDOC
## Event: consider

### Description
Dispatched whenever the dragged element needs to make room for itself in a new position in the items list and when it leaves. The host component is expected to update the items list.

### Payload (e.detail)
- **items** (Array) - The updated items list.
- **info** (Object) - Metadata about the drag operation.
  - **trigger** (String) - The action trigger (e.g., DRAG_STARTED, DRAGGED_ENTERED).
  - **id** (String/Number) - The item ID of the dragged element.
  - **source** (String) - The input source (POINTER or KEYBOARD).
```

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

### Enable Debug Mode

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Enables internal debug logging to the console. Disabled by default.

```javascript
import {setDebugMode} from "svelte-dnd-action";
setDebugMode(true);
```

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

### Configure TypeScript for Svelte 3

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Provides global type definitions for Svelte 3 projects to support dnd-action event handlers.

```typescript
declare type Item = import("svelte-dnd-action").Item;
declare type DndEvent<ItemType = Item> = import("svelte-dnd-action").DndEvent<ItemType>;
declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onconsider?: (event: CustomEvent<DndEvent<ItemType>> & {target: EventTarget & T}) => void;
        onfinalize?: (event: CustomEvent<DndEvent<ItemType>> & {target: EventTarget & T}) => void;
    }
}
```

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

### Nested Zone Attribute Placement

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Apply the data-is-dnd-shadow-item-hint attribute to items within nested zones to prevent unnecessary re-renders.

```html
<script>
    import {dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME} from 'svelte-dnd-action';
    let items = [];
</script>
<section>
    <div use:dndzone={{items}} on:consider={e => items = e.detail.items} on:finalize={e => items = e.detail.items}>
        {#each items as item (item.id)}
            <div data-is-dnd-shadow-item-hint={item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}>
                <h1>{item.title}</h1>
                <!--more nested zones go here, can include the attribute on their items as demonstrated above-->
            </div>
        {/each}
    </div>
</section>
```

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

### Custom Generic Types with DndEvent

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Use generics to enforce specific types for items handled by the dndzone.

```html
<script lang="ts">
    import {dndzone} from "svelte-dnd-action";
    import {flip} from "svelte/animate";

    interface Dog {
        id: number;
        name: string;
        breed: string;
    }

    function handleSort(e: CustomEvent<DndEvent<Dog>>) {
        //e.detail.items now evaluates to type Dog.
        items = e.detail.items;
    }

    let items: Dog[] = [
        {id: 1, name: "Fido", breed: "bulldog"},
        {id: 2, name: "Spot", breed: "labrador"},
        {id: 3, name: "Jacky", breed: "golden retriever"}
    ];
</script>
```

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

### TypeScript Global Definitions for Svelte 4

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Add these definitions to a global.d.ts file to enable type support for dndzone events in Svelte 4.

```typescript
declare type Item = import("svelte-dnd-action").Item;
declare type DndEvent<ItemType = Item> = import("svelte-dnd-action").DndEvent<ItemType>;
declare namespace svelteHTML {
    interface HTMLAttributes<T> {
        "on:consider"?: (event: CustomEvent<DndEvent<ItemType>> & {target: EventTarget & T}) => void;
        "on:finalize"?: (event: CustomEvent<DndEvent<ItemType>> & {target: EventTarget & T}) => void;
    }
}
```

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

### SvelteKit TypeScript Configuration

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Modify svelte.config.js to include global.d.ts in the generated tsconfig.json for SvelteKit projects.

```javascript
const config = {
    kit: {
        typescript: {
            config(config) {
                // This path is relative to the ".svelte-kit" folder
                config.include.push("../global.d.ts");
            }
        }
    }
};
```

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

### Event: finalize

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Dispatched on the target and origin dnd-zones when the dragged element is dropped into position. This event is typically used to persist changes to a server.

```APIDOC
## Event: finalize

### Description
Dispatched on the target and origin dnd-zones when the dragged element is dropped into position. Use this event to save the final state of the items list.

### Payload (e.detail)
- **items** (Array) - The final items list after the drop.
- **info** (Object) - Metadata about the drop operation.
  - **trigger** (String) - The action trigger (e.g., DROPPED_INTO_ZONE, DROPPED_INTO_ANOTHER).
  - **id** (String/Number) - The item ID of the dragged element.
  - **source** (String) - The input source (POINTER or KEYBOARD).
```

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

### setFeatureFlag

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Sets global feature flags to control optional library behaviors.

```APIDOC
## setFeatureFlag

### Description
Enables or disables specific library features. Currently supports USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT.

### Parameters
- **flagName** (string) - Required - The name of the feature flag.
- **value** (boolean) - Required - The state to set for the flag.

### Request Example
```javascript
import {setFeatureFlag, FEATURE_FLAG_NAMES} from "svelte-dnd-action";
setFeatureFlag(FEATURE_FLAG_NAMES.USE_COMPUTED_STYLE_INSTEAD_OF_BOUNDING_RECT, true);
```
```

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

### Override Item ID Key Name

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Changes the default 'id' key used by the library to a custom string, such as '_id' for PouchDB. Must be called before any dndzones are rendered.

```javascript
import {overrideItemIdKeyNameBeforeInitialisingDndZones} from "svelte-dnd-action";
overrideItemIdKeyNameBeforeInitialisingDndZones("_id");
```

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

### setDebugMode

Source: https://github.com/isaachagoel/svelte-dnd-action/blob/master/README.md

Enables or disables internal debug logging to the console.

```APIDOC
## setDebugMode

### Description
Controls whether internal debug messages are logged to the browser console.

### Parameters
- **enabled** (boolean) - Required - Set to true to enable debug output, false to disable.

### Request Example
```javascript
import {setDebugMode} from "svelte-dnd-action";
setDebugMode(true);
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.