Drag & Drop • by FormKit

New

FormKit for React

FormKit is now available for React — inputs, validation, and themes for your React projects.

Introduction

FormKit’s Drag and Drop is a small library for adding drag and drop functionality to your app. It’s simple, flexible, framework agnostic, and clocks in at only ~5kb gzipped. Drag and Drop works with React, Solid, Vue, Svelte, or any JavaScript framework. This library differs from others in the way the drag and drop operations are performed. Rather than moving elements around the DOM manually, Drag and Drop updates the reactive data model used by the provided render function.

Getting Started

Install

Drag and Drop is published as @formkit/drag-and-drop on npm. Click to copy the install command for your package manager of choice:

npm install @formkit/drag-and-drop
pnpm add @formkit/drag-and-drop
yarn add @formkit/drag-and-drop
bun install @formkit/drag-and-drop

Usage

Drag and drop ships two main functions: dragAndDrop and useDragAndDrop. These can be imported for your framework of choice by using the subpath import @formkit/drag-and-drop/{react/vue/solid}. A native JavaScript version of the dragAndDrop function is also available at @formkit/drag-and-drop.

Whichever method you choose, the core concept remains the same: FormKit's Drag and Drop accepts two main arguments — the parent element containing the draggable items and the data that those items represent.

useDragAndDrop

The useDragAndDrop hook is the most convenient way to add Drag and Drop to your app and is available for React, Vue, and Solid. Call this function with an initial array of values and the configuration options. It returns an array of values containing a template ref, a reactive set of values (and a setter in the case of React), as well as a function to update the parent's config. The template ref should be assigned to the parent DOM element of the items you wish to make draggable. The reactive array of values should be used in your template to render the draggable elements.

// Example parent configuration object:
const config = { sortable: false }

// React:
const [parentRef, values, setValues, updateConfig] = useDragAndDrop(
['Item 1', 'Item2', 'Item3'], 
config
) 
// Vue:
const [parentRef, values, updateConfig] = useDragAndDrop(
['Item 1', 'Item2', 'Item3'], 
config
)

dragAndDrop

The dragAndDrop hook allows you to define your own ref and list state. This is useful if you need to integrate with a pre-existing app without changing your component structure.

// Example parent configuration object:
const config = { sortable: false }

// React:
dragAndDrop({
parent: parentRef,
state: [values, setValues], 
...config
}) 
// Vue:
dragAndDrop({
parent: parentRef,
values: valueRef,
...config
}) 
// Vanilla JS: (import from core, not subpath)
dragAndDrop({
parent: HTMLElement,
getValues: () => {

// Return array of values
}, 
setValues: (newValues) => 
 // Do something with updated values
}, 
config
})

Core Features

Sortability

Using useDragAndDrop or dragAndDrop automatically makes a lists sortable. Dragging items within your list will automatically change your list’s state to reflect the new order (which in turn allows the framework to re-render to the correct order):

React
Vue
Solid
Native
Marko

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <ul ref={parent}>
      {tapes.map((tape) => (
        <li className="cassette" data-label={tape} key={tape}>
          {tape}
        </li>
      ))}
    </ul>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const tapes: Ref<string[], string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet Shop Boys",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLUListElementparent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const tapes: Ref<string[], string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet Shop Boys",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLUListElementparent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [parent, tapes] = useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet Shop Boys",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);
</script>

<template>
  <ul ref="parent">
    <li v-for="tape in tapes" :key="tape" class="cassette">
      {{ tape }}
    </li>
  </ul>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor, type JSX } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export const const MyComponent: () => JSX.ElementMyComponent = (): JSX.type JSX.Element = number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefinedElement => {
  const [const parent: Setter<HTMLUListElement | null>parent, const tapes: Accessor<string[]>tapes] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
      <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
        )}
      </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
  );
};

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor, type JSX } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export const const MyComponent: () => JSX.ElementMyComponent = (): JSX.type JSX.Element = number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefinedElement => {
  const [const parent: Setter<HTMLUListElement | null>parent, const tapes: Accessor<string[]>tapes] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
      <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
        )}
      </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
  );
};

/** @jsxImportSource solid-js */
import { For, type JSX } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export const MyComponent = (): JSX.Element => {
  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <ul ref={parent}>
      <For each={tapes()}>
        {(tape) => (
          <li class="cassette" data-label={tape}>
            {tape}
          </li>
        )}
      </For>
    </ul>
  );
};

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}): Reactive<{
    tapes: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${() =>
      const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
      )}
  </ul>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
});

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}): Reactive<{
    tapes: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${() =>
      const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
      )}
  </ul>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
});

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

html`
  <ul id="cassettes">
    ${() =>
      state.tapes.map((tape) =>
        html`<li class="cassette" data-label="${tape}">${tape}</li>`.key(tape)
      )}
  </ul>
`(document.getElementById("app")!);

dragAndDrop<string>({
  parent: document.getElementById("cassettes")!,
  getValues: () => state.tapes,
  setValues: (newValues) => {
    state.tapes = reactive(newValues);
  },
});

Draggable

For drag-and-drop to function correctly, the length of array of values provided must be equivalent to the number of immediate children to the parent element. If they are not, a console warning will appear: The number of draggable items in the parent does not match the number of values, which may lead to unexpected behavior." The most common cause of this is when the parent element has an immediate child that is not meant to be draggable. In this case, the configuration property draggable can be set to a callback function that lets you determine whether or not a given element should be draggable:

React
Vue
Solid
Native
Marko

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );
  return (
    <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.id?: string | undefinedid="no-drag">I am NOT draggable</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );
  return (
    <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
      <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.id?: string | undefinedid="no-drag">I am NOT draggable</React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable: (el) => {
        return el.id !== "no-drag";
      },
    }
  );
  return (
    <ul ref={parent}>
      {tapes.map((tape) => (
        <li className="cassette" data-label={tape} key={tape}>
          {tape}
        </li>
      ))}
      <div id="no-drag">I am NOT draggable</div>
    </ul>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const tapes: Ref<string[], string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  {
    draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
      return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
    },
  }
);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLUListElementparent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
    <li: LiHTMLAttributes & ReservedPropsli HTMLAttributes.id?: string | undefinedid="no-drag">I am NOT draggable</li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const tapes: Ref<string[], string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  {
    draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
      return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
    },
  }
);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLUListElementparent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
    <li: LiHTMLAttributes & ReservedPropsli HTMLAttributes.id?: string | undefinedid="no-drag">I am NOT draggable</li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [parent, tapes] = useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  {
    draggable: (el) => {
      return el.id !== "no-drag";
    },
  }
);
</script>

<template>
  <ul ref="parent">
    <li v-for="tape in tapes" :key="tape" class="cassette">
      {{ tape }}
    </li>
    <li id="no-drag">I am NOT draggable</li>
  </ul>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const [const parent: Setter<HTMLUListElement | null>parent, const tapes: Accessor<string[]>tapes] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );

  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
      <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
        )}
      </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.id?: string | undefinedid="no-drag">I am NOT draggable</JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
  );
}

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const [const parent: Setter<HTMLUListElement | null>parent, const tapes: Accessor<string[]>tapes] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );

  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
      <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
        )}
      </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.id?: string | undefinedid="no-drag">I am NOT draggable</JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
  );
}

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable: (el) => {
        return el.id !== "no-drag";
      },
    }
  );

  return (
    <ul ref={parent}>
      <For each={tapes()}>
        {(tape) => (
          <li class="cassette" data-label={tape}>
            {tape}
          </li>
        )}
      </For>
      <div id="no-drag">I am NOT draggable</div>
    </ul>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}): Reactive<{
    tapes: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${() =>
      const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
      )}
    <div id="no-drag">I am NOT draggable</div>
  </ul>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
      return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
    },
  },
});

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}): Reactive<{
    tapes: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${() =>
      const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
      )}
    <div id="no-drag">I am NOT draggable</div>
  </ul>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
      return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
    },
  },
});

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

html`
  <ul id="cassettes">
    ${() =>
      state.tapes.map((tape) =>
        html`<li class="cassette" data-label="${tape}">${tape}</li>`.key(tape)
      )}
    <div id="no-drag">I am NOT draggable</div>
  </ul>
`(document.getElementById("app")!);

dragAndDrop<string>({
  parent: document.getElementById("cassettes")!,
  getValues: () => state.tapes,
  setValues: (newValues) => {
    state.tapes = reactive(newValues);
  },
  config: {
    draggable: (el) => {
      return el.id !== "no-drag";
    },
  },
});

Transferability

In addition to sorting, drag-and-drop allows transferring values between parents (lists). To enable this, set the configuration property group to the same value for each list that should allow value transfers. Notice in the example below that items can be appended to the end of the list by hovering over the list itself, or inserted into the list by hovering over the target parent's draggable items.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );
  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );
  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    { group: "todoList" }
  );
  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    { group: "todoList" }
  );
  return (
    <div className="kanban-board">
      <ul ref={todoList}>
        {todos.map((todo) => (
          <li className="kanban-item" key={todo}>
            {todo}
          </li>
        ))}
      </ul>
      <ul ref={doneList}>
        {dones.map((done) => (
          <li className="kanban-item" key={done}>
            {done}
          </li>
        ))}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" });
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" });
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" });
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" });
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
const doneItems = ["Pickup new mix-tape from Beth"];

const [todoList, todos] = useDragAndDrop(todoItems, { group: "todoList" });
const [doneList, dones] = useDragAndDrop(doneItems, { group: "todoList" });
</script>

<template>
  <div class="kanban-board">
    <ul ref="todoList" class="kanban-column">
      <li v-for="todo in todos" :key="todo" class="kanban-item">
        {{ todo }}
      </li>
    </ul>
    <ul ref="doneList" class="kanban-column">
      <li v-for="done in dones" :key="done" class="kanban-item">
        {{ done }}
      </li>
    </ul>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );
  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );
  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList" }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    { group: "todoList" }
  );
  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    { group: "todoList" }
  );

  return (
    <div class="kanban-board">
      <ul ref={todoList}>
        <For each={todos()}>
          {(todo) => <li class="kanban-item">{todo}</li>}
        </For>
      </ul>
      <ul ref={doneList}>
        <For each={dones()}>
          {(done) => <li class="kanban-item">{done}</li>}
        </For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
}>state = reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}): Reactive<{
    todos: string[];
    dones: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
}>state = reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}): Reactive<{
    todos: string[];
    dones: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: ["Pickup new mix-tape from Beth"],
});

dragAndDrop<string>({
  parent: document.getElementById("todo-list")!,
  getValues: () => state.todos,
  setValues: (newValues) => {
    state.todos = reactive(newValues);
  },
  config: {
    group: "todoList",
  },
});

dragAndDrop<string>({
  parent: document.getElementById("done-list")!,
  getValues: () => state.dones,
  setValues: (newValues) => {
    state.dones = reactive(newValues);
  },
  config: {
    group: "todoList",
  },
});

html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        state.todos.map((todo) =>
          html`<li class="kanban-item">${todo}</li>`.key(todo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${state.dones.map((done) =>
        html`<li class="kanban-item">${done}</li>`.key(done)
      )}
    </ul>
  </div>
`(document.getElementById("app")!);

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const todoConfig = { group: "todoList" };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=todoConfig/>
<dnd:=dones parent=doneList config=todoConfig/>

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const todoConfig = { group: "todoList" };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=todoConfig/>
<dnd:=dones parent=doneList config=todoConfig/>

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const todoConfig = { group: "todoList" };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=todoConfig/>
<dnd:=dones parent=doneList config=todoConfig/>

Disable sort

Sortability within a given parent can be toggled on and off by setting the sortable property to in the configuration.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { 
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false
    }
  );
  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { 
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false
    }
  );
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { 
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false
    }
  );
  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { 
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false
    }
  );
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    { 
      group: "todoList",
      sortable: false
    }
  );
  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    { 
      group: "todoList",
      sortable: false
    }
  );
  return (
    <div className="kanban-board">
      <ul ref={todoList}>
        {todos.map((todo) => (
          <li className="kanban-item" key={todo}>
            {todo}
          </li>
        ))}
      </ul>
      <ul ref={doneList}>
        {dones.map((done) => (
          <li className="kanban-item" key={done}>
            {done}
          </li>
        ))}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const doneItems = ["Pickup new mix-tape from Beth"];

const [todoList, todos] = useDragAndDrop(todoItems, {
  group: "todoList",
  sortable: false,
});
const [doneList, dones] = useDragAndDrop(doneItems, {
  group: "todoList",
  sortable: false,
});
</script>

<template>
  <div class="kanban-board">
    <ul ref="todoList" class="kanban-column">
      <li v-for="todo in todos" :key="todo" class="kanban-item">
        {{ todo }}
      </li>
    </ul>
    <ul ref="doneList" class="kanban-column">
      <li v-for="done in dones" :key="done" class="kanban-item">
        {{ done }}
      </li>
    </ul>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
    }
  );
  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
    }
  );
  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      sortable: false,
    }
  );
  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      sortable: false,
    }
  );

  return (
    <div class="kanban-board">
      <ul ref={todoList}>
        <For each={todos()}>
          {(todo) => <li class="kanban-item">{todo}</li>}
        </For>
      </ul>
      <ul ref={doneList}>
        <For each={dones()}>
          {(done) => <li class="kanban-item">{done}</li>}
        </For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
}>state = reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}): Reactive<{
    todos: string[];
    dones: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
}>state = reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}): Reactive<{
    todos: string[];
    dones: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    sortable?: boolean | undefinedFlag for whether or not to allow sorting within a given parent.sortable: false,
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: ["Pickup new mix-tape from Beth"],
});

dragAndDrop<string>({
  parent: document.getElementById("todo-list")!,
  getValues: () => state.todos,
  setValues: (newValues) => {
    state.todos = reactive(newValues);
  },
  config: {
    group: "todoList",
    sortable: false,
  },
});

dragAndDrop<string>({
  parent: document.getElementById("done-list")!,
  getValues: () => state.dones,
  setValues: (newValues) => {
    state.dones = reactive(newValues);
  },
  config: {
    group: "todoList",
    sortable: false,
  },
});

html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        state.todos.map((todo) =>
          html`<li class="kanban-item">${todo}</li>`.key(todo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${state.dones.map((done) =>
        html`<li class="kanban-item">${done}</li>`.key(done)
      )}
    </ul>
  </div>
`(document.getElementById("app")!);

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const config = { group: "todoList", sortable: false };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const config = { group: "todoList", sortable: false };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const config = { group: "todoList", sortable: false };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

Accepts

For a more nuanced transfer experience, define the accepts property in the configuration. This property is a callback function that lets you determine whether or not a given element can be transferred into the given list.

React
Vue
Solid
Native
Marko

import React from "react";
import type { interface ParentConfig<T>The configuration object for a given parent.ParentConfig } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export default function function myComponent(): React.JSX.ElementmyComponent() {
  const [const source: React.RefObject<HTMLUListElement | null>source, const items1: string[]items1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt",],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );

  const const config1: Partial<ParentConfig<string>>config1: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config1: Partial<ParentConfig<string>>config1.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target2: React.RefObject<HTMLUListElement | null>target2.React.RefObject<HTMLUListElement | null>.current: HTMLUListElement | nullThe current value of the ref.current) {
      return false;
    }
    return const items2: string[]items2.Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
  };

  const const config2: Partial<ParentConfig<string>>config2: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config2: Partial<ParentConfig<string>>config2.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target1: React.RefObject<HTMLUListElement | null>target1.React.RefObject<HTMLUListElement | null>.current: HTMLUListElement | nullThe current value of the ref.current) {
      return false;
    }
    return const items3: string[]items3.Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 5;
  };

  const [const target1: React.RefObject<HTMLUListElement | null>target1, const items2: string[]items2] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["knight.bmp", "dragon.bmp"],
    const config1: Partial<ParentConfig<string>>config1
  );
  const [const target2: React.RefObject<HTMLUListElement | null>target2, const items3: string[]items3] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["brick.bmp", "moss.bmp"],
    const config2: Partial<ParentConfig<string>>config2
  );

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const source: React.RefObject<HTMLUListElement | null>source}>
        {const items1: string[]items1.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const target1: React.RefObject<HTMLUListElement | null>target1}>
        {const items2: string[]items2.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>

      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const target2: React.RefObject<HTMLUListElement | null>target2}>
        {const items3: string[]items3.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import type { interface ParentConfig<T>The configuration object for a given parent.ParentConfig } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export default function function myComponent(): React.JSX.ElementmyComponent() {
  const [const source: React.RefObject<HTMLUListElement | null>source, const items1: string[]items1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt",],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );

  const const config1: Partial<ParentConfig<string>>config1: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config1: Partial<ParentConfig<string>>config1.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target2: React.RefObject<HTMLUListElement | null>target2.React.RefObject<HTMLUListElement | null>.current: HTMLUListElement | nullThe current value of the ref.current) {
      return false;
    }
    return const items2: string[]items2.Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
  };

  const const config2: Partial<ParentConfig<string>>config2: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config2: Partial<ParentConfig<string>>config2.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target1: React.RefObject<HTMLUListElement | null>target1.React.RefObject<HTMLUListElement | null>.current: HTMLUListElement | nullThe current value of the ref.current) {
      return false;
    }
    return const items3: string[]items3.Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 5;
  };

  const [const target1: React.RefObject<HTMLUListElement | null>target1, const items2: string[]items2] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["knight.bmp", "dragon.bmp"],
    const config1: Partial<ParentConfig<string>>config1
  );
  const [const target2: React.RefObject<HTMLUListElement | null>target2, const items3: string[]items3] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["brick.bmp", "moss.bmp"],
    const config2: Partial<ParentConfig<string>>config2
  );

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const source: React.RefObject<HTMLUListElement | null>source}>
        {const items1: string[]items1.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const target1: React.RefObject<HTMLUListElement | null>target1}>
        {const items2: string[]items2.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>

      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const target2: React.RefObject<HTMLUListElement | null>target2}>
        {const items3: string[]items3.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import type { ParentConfig } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export default function myComponent() {
  const [source, items1] = useDragAndDrop<HTMLUListElement, string>(
    ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt",],
    {
      draggable: (el) => {
        return el.id !== "no-drag";
      },
    }
  );

  const config1: Partial<ParentConfig<string>> = {};
  config1.accepts = (_parent, lastParent) => {
    if (lastParent.el === target2.current) {
      return false;
    }
    return items2.length < 3;
  };

  const config2: Partial<ParentConfig<string>> = {};
  config2.accepts = (_parent, lastParent) => {
    if (lastParent.el === target1.current) {
      return false;
    }
    return items3.length < 5;
  };

  const [target1, items2] = useDragAndDrop<HTMLUListElement, string>(
    ["knight.bmp", "dragon.bmp"],
    config1
  );
  const [target2, items3] = useDragAndDrop<HTMLUListElement, string>(
    ["brick.bmp", "moss.bmp"],
    config2
  );

  return (
    <div>
      <ul ref={source}>
        {items1.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <ul ref={target1}>
        {items2.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>

      <ul ref={target2}>
        {items3.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import type { interface ParentConfig<T>The configuration object for a given parent.ParentConfig } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const [const source: Ref<HTMLElement | undefined, HTMLElement | undefined>source, const items1: Ref<string[], string[]>items1] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return true;
    },
  }
);

const const config1: Partial<ParentConfig<string>>config1: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
const config1: Partial<ParentConfig<string>>config1.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
  if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target2: Ref<HTMLElement | undefined, HTMLElement | undefined>target2.Ref<HTMLElement | undefined, HTMLElement | undefined>.value: HTMLElement | undefinedvalue) {
    return false;
  }
  return const items2: Ref<string[], string[]>items2.Ref<string[], string[]>.value: string[]value.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
};

const const config2: Partial<ParentConfig<string>>config2: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
const config2: Partial<ParentConfig<string>>config2.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
  if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target1: Ref<HTMLElement | undefined, HTMLElement | undefined>target1.Ref<HTMLElement | undefined, HTMLElement | undefined>.value: HTMLElement | undefinedvalue) {
    return false;
  }
  return const items3: Ref<string[], string[]>items3.Ref<string[], string[]>.value: string[]value.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 5;
};

const [const target1: Ref<HTMLElement | undefined, HTMLElement | undefined>target1, const items2: Ref<string[], string[]>items2] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(["knight.bmp", "dragon.bmp"], const config1: Partial<ParentConfig<string>>config1);
const [const target2: Ref<HTMLElement | undefined, HTMLElement | undefined>target2, const items3: Ref<string[], string[]>items3] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(["brick.bmp", "moss.bmp"], const config2: Partial<ParentConfig<string>>config2);
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv name: stringname="accepts">
    <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="flex justify-between">
      <div: HTMLAttributes & ReservedPropsdiv>
        <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="source: HTMLUListElementsource">
          <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items1: Ref<string[], string[]>items1" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
        </ul: HTMLAttributes & ReservedPropsul>
      </div: HTMLAttributes & ReservedPropsdiv>
      <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="flex flex-col">
        <div: HTMLAttributes & ReservedPropsdiv>
          <h5: HTMLAttributes & ReservedPropsh5>I can accept up to three items</h5: HTMLAttributes & ReservedPropsh5>
          <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="target1: HTMLUListElementtarget1" HTMLAttributes.class?: ClassValueclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items2: Ref<string[], string[]>items2" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
          </ul: HTMLAttributes & ReservedPropsul>
        </div: HTMLAttributes & ReservedPropsdiv>
        <div: HTMLAttributes & ReservedPropsdiv>
          I can accept up to five items.
          <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="target2: HTMLUListElementtarget2" HTMLAttributes.class?: ClassValueclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items3: Ref<string[], string[]>items3" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
          </ul: HTMLAttributes & ReservedPropsul>
        </div: HTMLAttributes & ReservedPropsdiv>
      </div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import type { interface ParentConfig<T>The configuration object for a given parent.ParentConfig } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const [const source: Ref<HTMLElement | undefined, HTMLElement | undefined>source, const items1: Ref<string[], string[]>items1] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return true;
    },
  }
);

const const config1: Partial<ParentConfig<string>>config1: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
const config1: Partial<ParentConfig<string>>config1.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
  if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target2: Ref<HTMLElement | undefined, HTMLElement | undefined>target2.Ref<HTMLElement | undefined, HTMLElement | undefined>.value: HTMLElement | undefinedvalue) {
    return false;
  }
  return const items2: Ref<string[], string[]>items2.Ref<string[], string[]>.value: string[]value.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
};

const const config2: Partial<ParentConfig<string>>config2: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
const config2: Partial<ParentConfig<string>>config2.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
  if (lastParent: ParentRecord<string>lastParent.ParentRecord<string>.el: HTMLElementel === const target1: Ref<HTMLElement | undefined, HTMLElement | undefined>target1.Ref<HTMLElement | undefined, HTMLElement | undefined>.value: HTMLElement | undefinedvalue) {
    return false;
  }
  return const items3: Ref<string[], string[]>items3.Ref<string[], string[]>.value: string[]value.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 5;
};

const [const target1: Ref<HTMLElement | undefined, HTMLElement | undefined>target1, const items2: Ref<string[], string[]>items2] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(["knight.bmp", "dragon.bmp"], const config1: Partial<ParentConfig<string>>config1);
const [const target2: Ref<HTMLElement | undefined, HTMLElement | undefined>target2, const items3: Ref<string[], string[]>items3] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(["brick.bmp", "moss.bmp"], const config2: Partial<ParentConfig<string>>config2);
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv name: stringname="accepts">
    <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="flex justify-between">
      <div: HTMLAttributes & ReservedPropsdiv>
        <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="source: HTMLUListElementsource">
          <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items1: Ref<string[], string[]>items1" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
        </ul: HTMLAttributes & ReservedPropsul>
      </div: HTMLAttributes & ReservedPropsdiv>
      <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="flex flex-col">
        <div: HTMLAttributes & ReservedPropsdiv>
          <h5: HTMLAttributes & ReservedPropsh5>I can accept up to three items</h5: HTMLAttributes & ReservedPropsh5>
          <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="target1: HTMLUListElementtarget1" HTMLAttributes.class?: ClassValueclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items2: Ref<string[], string[]>items2" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
          </ul: HTMLAttributes & ReservedPropsul>
        </div: HTMLAttributes & ReservedPropsdiv>
        <div: HTMLAttributes & ReservedPropsdiv>
          I can accept up to five items.
          <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="target2: HTMLUListElementtarget2" HTMLAttributes.class?: ClassValueclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items3: Ref<string[], string[]>items3" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
          </ul: HTMLAttributes & ReservedPropsul>
        </div: HTMLAttributes & ReservedPropsdiv>
      </div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import type { ParentConfig } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const [source, items1] = useDragAndDrop(
  ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  {
    accepts: () => {
      return true;
    },
  }
);

const config1: Partial<ParentConfig<string>> = {};
config1.accepts = (_parent, lastParent) => {
  if (lastParent.el === target2.value) {
    return false;
  }
  return items2.value.length < 3;
};

const config2: Partial<ParentConfig<string>> = {};
config2.accepts = (_parent, lastParent) => {
  if (lastParent.el === target1.value) {
    return false;
  }
  return items3.value.length < 5;
};

const [target1, items2] = useDragAndDrop(["knight.bmp", "dragon.bmp"], config1);
const [target2, items3] = useDragAndDrop(["brick.bmp", "moss.bmp"], config2);
</script>

<template>
  <div name="accepts">
    <div class="flex justify-between">
      <div>
        <ul ref="source">
          <li v-for="item in items1" :key="item">{{ item }}</li>
        </ul>
      </div>
      <div class="flex flex-col">
        <div>
          <h5>I can accept up to three items</h5>
          <ul ref="target1" class="border-solid border-2 border-indigo-600">
            <li v-for="item in items2" :key="item">{{ item }}</li>
          </ul>
        </div>
        <div>
          I can accept up to five items.
          <ul ref="target2" class="border-solid border-2 border-indigo-600">
            <li v-for="item in items3" :key="item">{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

/** @jsxImportSource solid-js */
import type { interface ParentConfig<T>The configuration object for a given parent.ParentConfig } from "@formkit/drag-and-drop";

import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export default function function MyComponent(): JSX.ElementMyComponent() {
  const [const source: Setter<HTMLUListElement | null>source, const items1: Accessor<string[]>items1] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "dungeon_master.exe",
      "map_1.dat",
      "map_2.dat",
      "character1.txt",
      "character2.txt",
      "shell32.dll",
      "README.txt",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );

  const const config1: Partial<ParentConfig<string>>config1: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config1: Partial<ParentConfig<string>>config1.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (
      const target2: Setter<HTMLElement | null>target2 &&
      const target2: Setter<HTMLElement | null>target2 instanceof var HTMLElement: {
    new (): HTMLElement;
    prototype: HTMLElement;
}The **`HTMLElement`** interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)HTMLElement &&
      lastParent: ParentRecord<string>lastParent.ParentRecord<T>.el: HTMLElementel === const target2: Setter<HTMLElement | null> & HTMLElementtarget2
    ) {
      return false;
    }
    return const items2: () => string[]items2().Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
  };

  const const config2: Partial<ParentConfig<string>>config2: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config2: Partial<ParentConfig<string>>config2.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (
      const target1: Setter<HTMLElement | null>target1 &&
      const target1: Setter<HTMLElement | null>target1 instanceof var HTMLElement: {
    new (): HTMLElement;
    prototype: HTMLElement;
}The **`HTMLElement`** interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)HTMLElement &&
      lastParent: ParentRecord<string>lastParent.ParentRecord<T>.el: HTMLElementel === const target1: Setter<HTMLElement | null> & HTMLElementtarget1
    ) {
      return false;
    }
    return const items3: () => string[]items3().Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 5;
  };

  const [const target1: Setter<HTMLElement | null>target1, const items2: Accessor<string[]>items2] = useDragAndDrop<HTMLElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop(
    ["knight.bmp", "dragon.bmp"],
    const config1: Partial<ParentConfig<string>>config1
  );
  const [const target2: Setter<HTMLElement | null>target2, const items3: Accessor<string[]>items3] = useDragAndDrop<HTMLElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop(["brick.bmp", "moss.bmp"], const config2: Partial<ParentConfig<string>>config2);

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const source: Setter<HTMLUListElement | null>source}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items1: () => string[]items1()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const target1: Setter<HTMLElement | null>target1}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items2: () => string[]items2()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const target2: Setter<HTMLElement | null>target2}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items3: () => string[]items3()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import type { interface ParentConfig<T>The configuration object for a given parent.ParentConfig } from "@formkit/drag-and-drop";

import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export default function function MyComponent(): JSX.ElementMyComponent() {
  const [const source: Setter<HTMLUListElement | null>source, const items1: Accessor<string[]>items1] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "dungeon_master.exe",
      "map_1.dat",
      "map_2.dat",
      "character1.txt",
      "character2.txt",
      "shell32.dll",
      "README.txt",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: stringThe **`id`** property of the Element interface represents the element's identifier, reflecting the id global attribute.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)id !== "no-drag";
      },
    }
  );

  const const config1: Partial<ParentConfig<string>>config1: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config1: Partial<ParentConfig<string>>config1.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (
      const target2: Setter<HTMLElement | null>target2 &&
      const target2: Setter<HTMLElement | null>target2 instanceof var HTMLElement: {
    new (): HTMLElement;
    prototype: HTMLElement;
}The **`HTMLElement`** interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)HTMLElement &&
      lastParent: ParentRecord<string>lastParent.ParentRecord<T>.el: HTMLElementel === const target2: Setter<HTMLElement | null> & HTMLElementtarget2
    ) {
      return false;
    }
    return const items2: () => string[]items2().Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
  };

  const const config2: Partial<ParentConfig<string>>config2: type Partial<T> = { [P in keyof T]?: T[P] | undefined; }Make all properties in T optionalPartial<interface ParentConfig<T>The configuration object for a given parent.ParentConfig<string>> = {};
  const config2: Partial<ParentConfig<string>>config2.accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts = (_parent: ParentRecord<string>_parent, lastParent: ParentRecord<string>lastParent) => {
    if (
      const target1: Setter<HTMLElement | null>target1 &&
      const target1: Setter<HTMLElement | null>target1 instanceof var HTMLElement: {
    new (): HTMLElement;
    prototype: HTMLElement;
}The **`HTMLElement`** interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement)HTMLElement &&
      lastParent: ParentRecord<string>lastParent.ParentRecord<T>.el: HTMLElementel === const target1: Setter<HTMLElement | null> & HTMLElementtarget1
    ) {
      return false;
    }
    return const items3: () => string[]items3().Array<string>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 5;
  };

  const [const target1: Setter<HTMLElement | null>target1, const items2: Accessor<string[]>items2] = useDragAndDrop<HTMLElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop(
    ["knight.bmp", "dragon.bmp"],
    const config1: Partial<ParentConfig<string>>config1
  );
  const [const target2: Setter<HTMLElement | null>target2, const items3: Accessor<string[]>items3] = useDragAndDrop<HTMLElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop(["brick.bmp", "moss.bmp"], const config2: Partial<ParentConfig<string>>config2);

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const source: Setter<HTMLUListElement | null>source}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items1: () => string[]items1()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const target1: Setter<HTMLElement | null>target1}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items2: () => string[]items2()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const target2: Setter<HTMLElement | null>target2}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items3: () => string[]items3()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import type { ParentConfig } from "@formkit/drag-and-drop";

import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export default function MyComponent() {
  const [source, items1] = useDragAndDrop<HTMLUListElement, string>(
    [
      "dungeon_master.exe",
      "map_1.dat",
      "map_2.dat",
      "character1.txt",
      "character2.txt",
      "shell32.dll",
      "README.txt",
    ],
    {
      draggable: (el) => {
        return el.id !== "no-drag";
      },
    }
  );

  const config1: Partial<ParentConfig<string>> = {};
  config1.accepts = (_parent, lastParent) => {
    if (
      target2 &&
      target2 instanceof HTMLElement &&
      lastParent.el === target2
    ) {
      return false;
    }
    return items2().length < 3;
  };

  const config2: Partial<ParentConfig<string>> = {};
  config2.accepts = (_parent, lastParent) => {
    if (
      target1 &&
      target1 instanceof HTMLElement &&
      lastParent.el === target1
    ) {
      return false;
    }
    return items3().length < 5;
  };

  const [target1, items2] = useDragAndDrop(
    ["knight.bmp", "dragon.bmp"],
    config1
  );
  const [target2, items3] = useDragAndDrop(["brick.bmp", "moss.bmp"], config2);

  return (
    <div>
      <ul ref={source}>
        <For each={items1()}>{(item) => <li>{item}</li>}</For>
      </ul>
      <ul ref={target1}>
        <For each={items2()}>{(item) => <li>{item}</li>}</For>
      </ul>
      <ul ref={target2}>
        <For each={items3()}>{(item) => <li>{item}</li>}</For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state = reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>(data: {
    items1: string[];
    items2: string[];
    items3: string[];
}): Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  items1: string[]items1: ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  items2: string[]items2: ["knight.bmp", "dragon.bmp"],
  items3: string[]items3: ["brick.bmp", "moss.bmp"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("source")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return true;
    },
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("target1")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
    },
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("target2")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items3: string[] | Reactive<string[]>items3,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items3: string[] | Reactive<string[]>items3 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
    },
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div>
    <ul id="source">
      ${const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`)}
    </ul>
    <div>
      <h5>I can accept up to three items</h5>
      <ul id="target1">
        ${const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`)}
      </ul>
      <h5>I can accept up to five items</h5>
      <ul id="target2">
        ${const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`)}
      </ul>
    </div>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state = reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>(data: {
    items1: string[];
    items2: string[];
    items3: string[];
}): Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  items1: string[]items1: ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  items2: string[]items2: ["knight.bmp", "dragon.bmp"],
  items3: string[]items3: ["brick.bmp", "moss.bmp"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("source")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return true;
    },
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("target1")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
    },
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("target2")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items3: string[] | Reactive<string[]>items3,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items3: string[] | Reactive<string[]>items3 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<string>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts: () => {
      return const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1.Array<T>.length: numberGets or sets the length of the array. This is a number one higher than the highest index in the array.length < 3;
    },
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div>
    <ul id="source">
      ${const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items1: string[] | Reactive<string[]>items1.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`)}
    </ul>
    <div>
      <h5>I can accept up to three items</h5>
      <ul id="target1">
        ${const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`)}
      </ul>
      <h5>I can accept up to five items</h5>
      <ul id="target2">
        ${const state: Reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>state.items2: string[] | Reactive<string[]>items2.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`)}
      </ul>
    </div>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  items1: ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"],
  items2: ["knight.bmp", "dragon.bmp"],
  items3: ["brick.bmp", "moss.bmp"],
});

dragAndDrop<string>({
  parent: document.getElementById("source")!,
  getValues: () => state.items1,
  setValues: (newValues) => {
    state.items1 = reactive(newValues);
  },
  config: {
    accepts: () => {
      return true;
    },
  },
});

dragAndDrop<string>({
  parent: document.getElementById("target1")!,
  getValues: () => state.items2,
  setValues: (newValues) => {
    state.items2 = reactive(newValues);
  },
  config: {
    accepts: () => {
      return state.items1.length < 3;
    },
  },
});

dragAndDrop<string>({
  parent: document.getElementById("target2")!,
  getValues: () => state.items3,
  setValues: (newValues) => {
    state.items3 = reactive(newValues);
  },
  config: {
    accepts: () => {
      return state.items1.length < 3;
    },
  },
});

html`
  <div>
    <ul id="source">
      ${state.items1.map((item) => html`<li>${item}</li>`)}
    </ul>
    <div>
      <h5>I can accept up to three items</h5>
      <ul id="target1">
        ${state.items2.map((item) => html`<li>${item}</li>`)}
      </ul>
      <h5>I can accept up to five items</h5>
      <ul id="target2">
        ${state.items2.map((item) => html`<li>${item}</li>`)}
      </ul>
    </div>
  </div>
`(document.getElementById("app")!);

static const sourceItems = ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"];
static const target1Items = ["knight.bmp", "dragon.bmp"];
static const target2Items = ["brick.bmp", "moss.bmp"];

<let/items1=sourceItems>
<let/items2=target1Items>
<let/items3=target2Items>

<!-- Config objects are stable; accepts callbacks close over reactive vars. -->
<let/sourceConfig={ accepts: () => true }>
<let/target1Config={
  accepts: (_parent, lastParent) => {
    if (lastParent.el === target2()) return false;
    return items2.length < 3;
  },
}>
<let/target2Config={
  accepts: (_parent, lastParent) => {
    if (lastParent.el === target1()) return false;
    return items3.length < 5;
  },
}>

<div>
  <div class="flex justify-between">
    <div>
      <ul/source>
        <for|item| of=items1 by=(i => i)>
          <li>${item}</li>
        </for>
      </ul>
    </div>
    <div class="flex flex-col">
      <div>
        <h5>I can accept up to three items</h5>
        <ul/target1 class="border-solid border-2 border-indigo-600">
          <for|item| of=items2 by=(i => i)>
            <li>${item}</li>
          </for>
        </ul>
      </div>
      <div>
        I can accept up to five items.
        <ul/target2 class="border-solid border-2 border-indigo-600">
          <for|item| of=items3 by=(i => i)>
            <li>${item}</li>
          </for>
        </ul>
      </div>
    </div>
  </div>
</div>

<dnd:=items1 parent=source config=sourceConfig/>
<dnd:=items2 parent=target1 config=target1Config/>
<dnd:=items3 parent=target2 config=target2Config/>

static const sourceItems = ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"];
static const target1Items = ["knight.bmp", "dragon.bmp"];
static const target2Items = ["brick.bmp", "moss.bmp"];

<let/items1=sourceItems>
<let/items2=target1Items>
<let/items3=target2Items>

<!-- Config objects are stable; accepts callbacks close over reactive vars. -->
<let/sourceConfig={ accepts: () => true }>
<let/target1Config={
  accepts: (_parent, lastParent) => {
    if (lastParent.el === target2()) return false;
    return items2.length < 3;
  },
}>
<let/target2Config={
  accepts: (_parent, lastParent) => {
    if (lastParent.el === target1()) return false;
    return items3.length < 5;
  },
}>

<div>
  <div class="flex justify-between">
    <div>
      <ul/source>
        <for|item| of=items1 by=(i => i)>
          <li>${item}</li>
        </for>
      </ul>
    </div>
    <div class="flex flex-col">
      <div>
        <h5>I can accept up to three items</h5>
        <ul/target1 class="border-solid border-2 border-indigo-600">
          <for|item| of=items2 by=(i => i)>
            <li>${item}</li>
          </for>
        </ul>
      </div>
      <div>
        I can accept up to five items.
        <ul/target2 class="border-solid border-2 border-indigo-600">
          <for|item| of=items3 by=(i => i)>
            <li>${item}</li>
          </for>
        </ul>
      </div>
    </div>
  </div>
</div>

<dnd:=items1 parent=source config=sourceConfig/>
<dnd:=items2 parent=target1 config=target1Config/>
<dnd:=items3 parent=target2 config=target2Config/>

static const sourceItems = ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt"];
static const target1Items = ["knight.bmp", "dragon.bmp"];
static const target2Items = ["brick.bmp", "moss.bmp"];

<let/items1=sourceItems>
<let/items2=target1Items>
<let/items3=target2Items>

<!-- Config objects are stable; accepts callbacks close over reactive vars. -->
<let/sourceConfig={ accepts: () => true }>
<let/target1Config={
  accepts: (_parent, lastParent) => {
    if (lastParent.el === target2()) return false;
    return items2.length < 3;
  },
}>
<let/target2Config={
  accepts: (_parent, lastParent) => {
    if (lastParent.el === target1()) return false;
    return items3.length < 5;
  },
}>

<div>
  <div class="flex justify-between">
    <div>
      <ul/source>
        <for|item| of=items1 by=(i => i)>
          <li>${item}</li>
        </for>
      </ul>
    </div>
    <div class="flex flex-col">
      <div>
        <h5>I can accept up to three items</h5>
        <ul/target1 class="border-solid border-2 border-indigo-600">
          <for|item| of=items2 by=(i => i)>
            <li>${item}</li>
          </for>
        </ul>
      </div>
      <div>
        I can accept up to five items.
        <ul/target2 class="border-solid border-2 border-indigo-600">
          <for|item| of=items3 by=(i => i)>
            <li>${item}</li>
          </for>
        </ul>
      </div>
    </div>
  </div>
</div>

<dnd:=items1 parent=source config=sourceConfig/>
<dnd:=items2 parent=target1 config=target1Config/>
<dnd:=items3 parent=target2 config=target2Config/>

Drag Handles

Drag handles are a common way to allow users to drag items without accidentally dragging them when they don't intend to. To implement drag handles, set the dragHandle property to a selector that will be used to find the handle.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle"
    }
  );
  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle"
    }
  );
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList} React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-column">
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-handle"></React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList} React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-column">
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-handle"></React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle"
    }
  );
  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle"
    }
  );
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList} React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-column">
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-handle"></React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList} React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-column">
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-handle"></React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
  const doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      dragHandle: ".kanban-handle"
    }
  );
  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      dragHandle: ".kanban-handle"
    }
  );
  return (
    <div className="kanban-board">
      <ul ref={todoList} className="kanban-column">
        {todos.map((todo) => (
          <li className="kanban-item" key={todo}>
            <span className="kanban-handle"></span>
            {todo}
          </li>
        ))}
      </ul>
      <ul ref={doneList} className="kanban-column">
        {dones.map((done) => (
          <li className="kanban-item" key={done}>
            <span className="kanban-handle"></span>
            {done}
          </li>
        ))}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="kanban-handle"></span: HTMLAttributes & ReservedPropsspan>
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="kanban-handle"></span: HTMLAttributes & ReservedPropsspan>
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="kanban-handle"></span: HTMLAttributes & ReservedPropsspan>
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="kanban-handle"></span: HTMLAttributes & ReservedPropsspan>
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
const doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

const [todoList, todos] = useDragAndDrop(todoItems, {
  group: "todoList",
  dragHandle: ".kanban-handle",
});
const [doneList, dones] = useDragAndDrop(doneItems, {
  group: "todoList",
  dragHandle: ".kanban-handle",
});
</script>

<template>
  <div class="kanban-board">
    <ul ref="todoList" class="kanban-column">
      <li v-for="todo in todos" :key="todo" class="kanban-item">
        <span class="kanban-handle"></span>
        {{ todo }}
      </li>
    </ul>
    <ul ref="doneList" class="kanban-column">
      <li v-for="done in dones" :key="done" class="kanban-item">
        <span class="kanban-handle"></span>
        {{ done }}
      </li>
    </ul>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
    }
  );
  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList} JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-column">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">
              <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-handle"></JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
              {todo: stringtodo}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList} JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-column">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">
              <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-handle"></JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
              {done: stringdone}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
    }
  );
  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList} JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-column">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">
              <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-handle"></JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
              {todo: stringtodo}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList} JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-column">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">
              <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-handle"></JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
              {done: stringdone}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];
  const doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      dragHandle: ".kanban-handle",
    }
  );
  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      dragHandle: ".kanban-handle",
    }
  );

  return (
    <div class="kanban-board">
      <ul ref={todoList} class="kanban-column">
        <For each={todos()}>
          {(todo) => (
            <li class="kanban-item">
              <span class="kanban-handle"></span>
              {todo}
            </li>
          )}
        </For>
      </ul>
      <ul ref={doneList} class="kanban-column">
        <For each={dones()}>
          {(done) => (
            <li class="kanban-item">
              <span class="kanban-handle"></span>
              {done}
            </li>
          )}
        </For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
}>state = reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}): Reactive<{
    todos: string[];
    dones: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth", "Implement drag handles"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-column" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
            <li class="kanban-item">
              <span class="kanban-handle"></span>
              ${todo: stringtodo}
            </li>
          `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-column" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
          <li class="kanban-item">
            <span class="kanban-handle"></span>
            ${done: stringdone}
          </li>
        `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
}>state = reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}): Reactive<{
    todos: string[];
    dones: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth", "Implement drag handles"],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle: ".kanban-handle",
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-column" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
            <li class="kanban-item">
              <span class="kanban-handle"></span>
              ${todo: stringtodo}
            </li>
          `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-column" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
          <li class="kanban-item">
            <span class="kanban-handle"></span>
            ${done: stringdone}
          </li>
        `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: ["Pickup new mix-tape from Beth", "Implement drag handles"],
});

dragAndDrop<string>({
  parent: document.getElementById("todo-list")!,
  getValues: () => state.todos,
  setValues: (newValues) => {
    state.todos = reactive(newValues);
  },
  config: {
    group: "todoList",
    dragHandle: ".kanban-handle",
  },
});

dragAndDrop<string>({
  parent: document.getElementById("done-list")!,
  getValues: () => state.dones,
  setValues: (newValues) => {
    state.dones = reactive(newValues);
  },
  config: {
    group: "todoList",
    dragHandle: ".kanban-handle",
  },
});

html`
  <div class="kanban-board">
    <ul class="kanban-column" id="todo-list">
      ${() =>
        state.todos.map((todo) =>
          html`
            <li class="kanban-item">
              <span class="kanban-handle"></span>
              ${todo}
            </li>
          `.key(todo)
        )}
    </ul>
    <ul class="kanban-column" id="done-list">
      ${state.dones.map((done) =>
        html`
          <li class="kanban-item">
            <span class="kanban-handle"></span>
            ${done}
          </li>
        `.key(done)
      )}
    </ul>
  </div>
`(document.getElementById("app")!);

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];
static const config = { group: "todoList", dragHandle: ".kanban-handle" };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">
        <span class="kanban-handle"/>
        ${todo}
      </li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">
        <span class="kanban-handle"/>
        ${done}
      </li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];
static const config = { group: "todoList", dragHandle: ".kanban-handle" };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">
        <span class="kanban-handle"/>
        ${todo}
      </li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">
        <span class="kanban-handle"/>
        ${done}
      </li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth", "Implement drag handles"];
static const config = { group: "todoList", dragHandle: ".kanban-handle" };

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">
        <span class="kanban-handle"/>
        ${todo}
      </li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">
        <span class="kanban-handle"/>
        ${done}
      </li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

Updating Config

The parent's configuration can be updated idempotently during runtime by using the updateConfig method. In the example below, clicking the button will toggle whether drag and drop is enabled for the parent.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const values: string[]values, const _setValues: React.Dispatch<React.SetStateAction<string[]>>_setValues, const updateConfig: (config: Partial<ParentConfig<string>>) => voidupdateConfig] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<
    HTMLUListElement,
    string
  >([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  const [const disabled: booleandisabled, const setDisabled: React.Dispatch<React.SetStateAction<boolean>>setDisabled] = useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);

  const const toggleDisabled: () => voidtoggleDisabled = () => {
    const setDisabled: (value: React.SetStateAction<boolean>) => voidsetDisabled(!const disabled: booleandisabled);

    const updateConfig: (config: Partial<ParentConfig<string>>) => voidupdateConfig({ disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: !const disabled: booleandisabled });
  };
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
        {const values: string[]values.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
            {tape: stringtape}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={const toggleDisabled: () => voidtoggleDisabled}>
        {const disabled: booleandisabled ? "Enable" : "Disable"} drag and drop
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const values: string[]values, const _setValues: React.Dispatch<React.SetStateAction<string[]>>_setValues, const updateConfig: (config: Partial<ParentConfig<string>>) => voidupdateConfig] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<
    HTMLUListElement,
    string
  >([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  const [const disabled: booleandisabled, const setDisabled: React.Dispatch<React.SetStateAction<boolean>>setDisabled] = useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);

  const const toggleDisabled: () => voidtoggleDisabled = () => {
    const setDisabled: (value: React.SetStateAction<boolean>) => voidsetDisabled(!const disabled: booleandisabled);

    const updateConfig: (config: Partial<ParentConfig<string>>) => voidupdateConfig({ disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: !const disabled: booleandisabled });
  };
  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
        {const values: string[]values.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
            {tape: stringtape}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={const toggleDisabled: () => voidtoggleDisabled}>
        {const disabled: booleandisabled ? "Enable" : "Disable"} drag and drop
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useState } from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const [parent, values, _setValues, updateConfig] = useDragAndDrop<
    HTMLUListElement,
    string
  >([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  const [disabled, setDisabled] = useState(false);

  const toggleDisabled = () => {
    setDisabled(!disabled);

    updateConfig({ disabled: !disabled });
  };
  return (
    <div>
      <ul ref={parent}>
        {values.map((tape) => (
          <li className="cassette" data-label={tape} key={tape}>
            {tape}
          </li>
        ))}
      </ul>
      <button onClick={toggleDisabled}>
        {disabled ? "Enable" : "Disable"} drag and drop
      </button>
    </div>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";

const const disabled: Ref<boolean, boolean>disabled = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);

const [const parentRef: Ref<HTMLElement | undefined, HTMLElement | undefined>parentRef, const values: Ref<string[], string[]>values, const updateConfig: (config: Partial<Partial<ParentConfig<string>>>) => voidupdateConfig] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);

function function toggleDisabled(): voidtoggleDisabled() {
  const disabled: Ref<boolean, boolean>disabled.Ref<boolean, boolean>.value: booleanvalue = !const disabled: Ref<boolean, boolean>disabled.Ref<boolean, boolean>.value: booleanvalue;

  const updateConfig: (config: Partial<Partial<ParentConfig<string>>>) => voidupdateConfig({ disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: const disabled: Ref<boolean, boolean>disabled.Ref<boolean, boolean>.value: booleanvalue });
}
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parentRef: HTMLUListElementparentRef">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const values: Ref<string[], string[]>values" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
  <button: ButtonHTMLAttributes & ReservedPropsbutton HTMLAttributes.id?: string | undefinedid="no-drag" @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleDisabled(): voidtoggleDisabled">
    {{ const disabled: Ref<boolean, boolean>disabled ? "Enable" : "Disable" }} drag and drop
  </button: ButtonHTMLAttributes & ReservedPropsbutton>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";

const const disabled: Ref<boolean, boolean>disabled = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);

const [const parentRef: Ref<HTMLElement | undefined, HTMLElement | undefined>parentRef, const values: Ref<string[], string[]>values, const updateConfig: (config: Partial<Partial<ParentConfig<string>>>) => voidupdateConfig] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);

function function toggleDisabled(): voidtoggleDisabled() {
  const disabled: Ref<boolean, boolean>disabled.Ref<boolean, boolean>.value: booleanvalue = !const disabled: Ref<boolean, boolean>disabled.Ref<boolean, boolean>.value: booleanvalue;

  const updateConfig: (config: Partial<Partial<ParentConfig<string>>>) => voidupdateConfig({ disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: const disabled: Ref<boolean, boolean>disabled.Ref<boolean, boolean>.value: booleanvalue });
}
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parentRef: HTMLUListElementparentRef">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const values: Ref<string[], string[]>values" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
  <button: ButtonHTMLAttributes & ReservedPropsbutton HTMLAttributes.id?: string | undefinedid="no-drag" @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleDisabled(): voidtoggleDisabled">
    {{ const disabled: Ref<boolean, boolean>disabled ? "Enable" : "Disable" }} drag and drop
  </button: ButtonHTMLAttributes & ReservedPropsbutton>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
import { ref } from "vue";

const disabled = ref(false);

const [parentRef, values, updateConfig] = useDragAndDrop([
  "Depeche Mode",
  "Duran Duran",
  "Pet",
  "Kraftwerk",
  "Tears for Fears",
  "Spandau Ballet",
]);

function toggleDisabled() {
  disabled.value = !disabled.value;

  updateConfig({ disabled: disabled.value });
}
</script>

<template>
  <ul ref="parentRef">
    <li v-for="tape in values" :key="tape" class="cassette">
      {{ tape }}
    </li>
  </ul>
  <button id="no-drag" @click="toggleDisabled">
    {{ disabled ? "Enable" : "Disable" }} drag and drop
  </button>
</template>

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const [const parent: Setter<HTMLUListElement | null>parent, const values: Accessor<string[]>values, , const updateConfig: (config?: Partial<ParentConfig<string>> | undefined) => voidupdateConfig] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<
    HTMLUListElement,
    string
  >([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  const [const disabled: Accessor<boolean>disabled, const setDisabled: Setter<boolean>setDisabled] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);

  const const toggleDisabled: () => voidtoggleDisabled = () => {
    const setDisabled: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setDisabled(!const disabled: () => booleandisabled());
    const updateConfig: (config?: Partial<ParentConfig<string>> | undefined) => voidupdateConfig({ disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: !const disabled: () => booleandisabled() });
  };

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const values: () => string[]values()}>
          {(tape: stringtape) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
              {tape: stringtape}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent, JSX.EventHandler<HTMLButtonElement, MouseEvent>> | undefinedonClick={const toggleDisabled: () => voidtoggleDisabled}>
        {const disabled: () => booleandisabled() ? "Enable" : "Disable"} drag and drop
      </JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const [const parent: Setter<HTMLUListElement | null>parent, const values: Accessor<string[]>values, , const updateConfig: (config?: Partial<ParentConfig<string>> | undefined) => voidupdateConfig] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<
    HTMLUListElement,
    string
  >([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  const [const disabled: Accessor<boolean>disabled, const setDisabled: Setter<boolean>setDisabled] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);

  const const toggleDisabled: () => voidtoggleDisabled = () => {
    const setDisabled: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setDisabled(!const disabled: () => booleandisabled());
    const updateConfig: (config?: Partial<ParentConfig<string>> | undefined) => voidupdateConfig({ disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: !const disabled: () => booleandisabled() });
  };

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const values: () => string[]values()}>
          {(tape: stringtape) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
              {tape: stringtape}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent, JSX.EventHandler<HTMLButtonElement, MouseEvent>> | undefinedonClick={const toggleDisabled: () => voidtoggleDisabled}>
        {const disabled: () => booleandisabled() ? "Enable" : "Disable"} drag and drop
      </JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const [parent, values, , updateConfig] = useDragAndDrop<
    HTMLUListElement,
    string
  >([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  const [disabled, setDisabled] = createSignal(false);

  const toggleDisabled = () => {
    setDisabled(!disabled());
    updateConfig({ disabled: !disabled() });
  };

  return (
    <div>
      <ul ref={parent}>
        <For each={values()}>
          {(tape) => (
            <li class="cassette" data-label={tape}>
              {tape}
            </li>
          )}
        </For>
      </ul>
      <button onClick={toggleDisabled}>
        {disabled() ? "Enable" : "Disable"} drag and drop
      </button>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function updateConfig<T>(parent: HTMLElement, config: Partial<ParentConfig<T>>): voidUtility function to update parent config.
@paramparent - The parent element.@paramconfig - The config to update.@returnsvoidupdateConfig } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state = reactive<{
    tapes: string[];
    disabled: boolean;
}>(data: {
    tapes: string[];
    disabled: boolean;
}): Reactive<{
    tapes: string[];
    disabled: boolean;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  disabled: booleandisabled: false,
});

function function toggleDisabled(): voidtoggleDisabled() {
  const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.disabled: booleandisabled = !const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.disabled: booleandisabled;

  updateConfig<unknown>(parent: HTMLElement, config: Partial<ParentConfig<unknown>>): voidUtility function to update parent config.
@paramparent - The parent element.@paramconfig - The config to update.@returnsvoidupdateConfig(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!, {
    disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: !const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.disabled: booleandisabled,
  });
}

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
      function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
    )}
  </ul>
  <button onclick=${function toggleDisabled(): voidtoggleDisabled}>Toggle Disabled</button>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
});

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function updateConfig<T>(parent: HTMLElement, config: Partial<ParentConfig<T>>): voidUtility function to update parent config.
@paramparent - The parent element.@paramconfig - The config to update.@returnsvoidupdateConfig } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state = reactive<{
    tapes: string[];
    disabled: boolean;
}>(data: {
    tapes: string[];
    disabled: boolean;
}): Reactive<{
    tapes: string[];
    disabled: boolean;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  disabled: booleandisabled: false,
});

function function toggleDisabled(): voidtoggleDisabled() {
  const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.disabled: booleandisabled = !const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.disabled: booleandisabled;

  updateConfig<unknown>(parent: HTMLElement, config: Partial<ParentConfig<unknown>>): voidUtility function to update parent config.
@paramparent - The parent element.@paramconfig - The config to update.@returnsvoidupdateConfig(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!, {
    disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled: !const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.disabled: booleandisabled,
  });
}

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
      function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
    )}
  </ul>
  <button onclick=${function toggleDisabled(): voidtoggleDisabled}>Toggle Disabled</button>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
    disabled: boolean;
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
});

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop, updateConfig } from "@formkit/drag-and-drop";

const state = reactive({
  tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  disabled: false,
});

function toggleDisabled() {
  state.disabled = !state.disabled;

  updateConfig(document.getElementById("cassettes")!, {
    disabled: !state.disabled,
  });
}

html`
  <ul id="cassettes">
    ${state.tapes.map((tape) =>
      html`<li class="cassette" data-label="${tape}">${tape}</li>`.key(tape)
    )}
  </ul>
  <button onclick=${toggleDisabled}>Toggle Disabled</button>
`(document.getElementById("app")!);

dragAndDrop<string>({
  parent: document.getElementById("cassettes")!,
  getValues: () => state.tapes,
  setValues: (newValues) => {
    state.tapes = reactive(newValues);
  },
});

Multi Drag

Multi drag allows users to select multiple items and drag them all at once. To enable multi drag, set the multiDrag property to true in the configuration.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const mockFileNames: string[]mockFileNames = [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ];
  const [const parent1: React.RefObject<HTMLUListElement | null>parent1, const files1: string[]files1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const mockFileNames: string[]mockFileNames,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
      multiDrag?: boolean | undefinedmultiDrag: true,
      selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
    }
  );
  const [const parent2: React.RefObject<HTMLUListElement | null>parent2, const files2: string[]files2] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([], {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  });

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="file-manager">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent1: React.RefObject<HTMLUListElement | null>parent1} React.HTMLAttributes<T>.className?: string | undefinedclassName="file-list">
        {const files1: string[]files1.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={file: stringfile} React.HTMLAttributes<T>.className?: string | undefinedclassName="file">
            {file: stringfile}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent2: React.RefObject<HTMLUListElement | null>parent2} React.HTMLAttributes<T>.className?: string | undefinedclassName="file-list">
        {const files2: string[]files2.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={file: stringfile} React.HTMLAttributes<T>.className?: string | undefinedclassName="file">
            {file: stringfile}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const mockFileNames: string[]mockFileNames = [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ];
  const [const parent1: React.RefObject<HTMLUListElement | null>parent1, const files1: string[]files1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const mockFileNames: string[]mockFileNames,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
      multiDrag?: boolean | undefinedmultiDrag: true,
      selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
    }
  );
  const [const parent2: React.RefObject<HTMLUListElement | null>parent2, const files2: string[]files2] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([], {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  });

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="file-manager">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent1: React.RefObject<HTMLUListElement | null>parent1} React.HTMLAttributes<T>.className?: string | undefinedclassName="file-list">
        {const files1: string[]files1.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={file: stringfile} React.HTMLAttributes<T>.className?: string | undefinedclassName="file">
            {file: stringfile}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent2: React.RefObject<HTMLUListElement | null>parent2} React.HTMLAttributes<T>.className?: string | undefinedclassName="file-list">
        {const files2: string[]files2.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={file: stringfile} React.HTMLAttributes<T>.className?: string | undefinedclassName="file">
            {file: stringfile}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const mockFileNames = [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ];
  const [parent1, files1] = useDragAndDrop<HTMLUListElement, string>(
    mockFileNames,
    {
      group: "A",
      multiDrag: true,
      selectedClass: "bg-blue-500 text-white",
    }
  );
  const [parent2, files2] = useDragAndDrop<HTMLUListElement, string>([], {
    group: "A",
    multiDrag: true,
    selectedClass: "bg-blue-500 text-white",
  });

  return (
    <div className="file-manager">
      <ul ref={parent1} className="file-list">
        {files1.map((file) => (
          <li key={file} className="file">
            {file}
          </li>
        ))}
      </ul>
      <ul ref={parent2} className="file-list">
        {files2.map((file) => (
          <li key={file} className="file">
            {file}
          </li>
        ))}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const mockFileNames: string[]mockFileNames = [
  "dungeon_master.exe",
  "map_1.dat",
  "map_2.dat",
  "character1.txt",
  "character2.txt",
  "shell32.dll",
  "README.txt",
];

const [const parent1: Ref<HTMLElement | undefined, HTMLElement | undefined>parent1, const files1: Ref<string[], string[]>files1] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const mockFileNames: string[]mockFileNames, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
  multiDrag?: boolean | undefinedmultiDrag: true,
  selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
});

const [const parent2: Ref<HTMLElement | undefined, HTMLElement | undefined>parent2, const files2: Ref<never[], never[]>files2] = useDragAndDrop<never>(initialValues: never[], options?: Partial<Partial<ParentConfig<never>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<never[], never[]>, (config: Partial<Partial<ParentConfig<never>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([], {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
  multiDrag?: boolean | undefinedmultiDrag: true,
  selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="file-manager">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent1: HTMLUListElementparent1" HTMLAttributes.class?: ClassValueclass="file-list">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const files1: Ref<string[], string[]>files1" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem" HTMLAttributes.class?: ClassValueclass="file">
        {{ const item: stringitem }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent2: HTMLUListElementparent2" HTMLAttributes.class?: ClassValueclass="file-list">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const item: neveritem in const files2: Ref<never[], never[]>files2" ReservedProps.key?: PropertyKey | undefined:key="const item: neveritem" HTMLAttributes.class?: ClassValueclass="file">
        {{ const item: neveritem }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const mockFileNames: string[]mockFileNames = [
  "dungeon_master.exe",
  "map_1.dat",
  "map_2.dat",
  "character1.txt",
  "character2.txt",
  "shell32.dll",
  "README.txt",
];

const [const parent1: Ref<HTMLElement | undefined, HTMLElement | undefined>parent1, const files1: Ref<string[], string[]>files1] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const mockFileNames: string[]mockFileNames, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
  multiDrag?: boolean | undefinedmultiDrag: true,
  selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
});

const [const parent2: Ref<HTMLElement | undefined, HTMLElement | undefined>parent2, const files2: Ref<never[], never[]>files2] = useDragAndDrop<never>(initialValues: never[], options?: Partial<Partial<ParentConfig<never>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<never[], never[]>, (config: Partial<Partial<ParentConfig<never>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([], {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
  multiDrag?: boolean | undefinedmultiDrag: true,
  selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="file-manager">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent1: HTMLUListElementparent1" HTMLAttributes.class?: ClassValueclass="file-list">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const files1: Ref<string[], string[]>files1" ReservedProps.key?: PropertyKey | undefined:key="const item: stringitem" HTMLAttributes.class?: ClassValueclass="file">
        {{ const item: stringitem }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent2: HTMLUListElementparent2" HTMLAttributes.class?: ClassValueclass="file-list">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const item: neveritem in const files2: Ref<never[], never[]>files2" ReservedProps.key?: PropertyKey | undefined:key="const item: neveritem" HTMLAttributes.class?: ClassValueclass="file">
        {{ const item: neveritem }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const mockFileNames = [
  "dungeon_master.exe",
  "map_1.dat",
  "map_2.dat",
  "character1.txt",
  "character2.txt",
  "shell32.dll",
  "README.txt",
];

const [parent1, files1] = useDragAndDrop(mockFileNames, {
  group: "A",
  multiDrag: true,
  selectedClass: "bg-blue-500 text-white",
});

const [parent2, files2] = useDragAndDrop([], {
  group: "A",
  multiDrag: true,
  selectedClass: "bg-blue-500 text-white",
});
</script>

<template>
  <div class="file-manager">
    <ul ref="parent1" class="file-list">
      <li v-for="item in files1" :key="item" class="file">
        {{ item }}
      </li>
    </ul>
    <ul ref="parent2" class="file-list">
      <li v-for="item in files2" :key="item" class="file">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const mockFileNames: string[]mockFileNames = [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ];
  const [const parent1: Setter<HTMLUListElement | null>parent1, const files1: Accessor<string[]>files1] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const mockFileNames: string[]mockFileNames,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
      multiDrag?: boolean | undefinedmultiDrag: true,
      selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
    }
  );
  const [const parent2: Setter<HTMLUListElement | null>parent2, const files2: Accessor<string[]>files2] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([], {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  });

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="file-manager">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent1: Setter<HTMLUListElement | null>parent1} JSX.DOMAttributes<T>.class?: string | undefinedclass="file-list">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const files1: () => string[]files1()}>{(file: stringfile) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="file">{file: stringfile}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent2: Setter<HTMLUListElement | null>parent2} JSX.DOMAttributes<T>.class?: string | undefinedclass="file-list">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const files2: () => string[]files2()}>{(file: stringfile) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="file">{file: stringfile}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const mockFileNames: string[]mockFileNames = [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ];
  const [const parent1: Setter<HTMLUListElement | null>parent1, const files1: Accessor<string[]>files1] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const mockFileNames: string[]mockFileNames,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
      multiDrag?: boolean | undefinedmultiDrag: true,
      selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
    }
  );
  const [const parent2: Setter<HTMLUListElement | null>parent2, const files2: Accessor<string[]>files2] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([], {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  });

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="file-manager">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent1: Setter<HTMLUListElement | null>parent1} JSX.DOMAttributes<T>.class?: string | undefinedclass="file-list">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const files1: () => string[]files1()}>{(file: stringfile) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="file">{file: stringfile}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent2: Setter<HTMLUListElement | null>parent2} JSX.DOMAttributes<T>.class?: string | undefinedclass="file-list">
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const files2: () => string[]files2()}>{(file: stringfile) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="file">{file: stringfile}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const mockFileNames = [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ];
  const [parent1, files1] = useDragAndDrop<HTMLUListElement, string>(
    mockFileNames,
    {
      group: "A",
      multiDrag: true,
      selectedClass: "bg-blue-500 text-white",
    }
  );
  const [parent2, files2] = useDragAndDrop<HTMLUListElement, string>([], {
    group: "A",
    multiDrag: true,
    selectedClass: "bg-blue-500 text-white",
  });

  return (
    <div class="file-manager">
      <ul ref={parent1} class="file-list">
        <For each={files1()}>{(file) => <li class="file">{file}</li>}</For>
      </ul>
      <ul ref={parent2} class="file-list">
        <For each={files2()}>{(file) => <li class="file">{file}</li>}</For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    files1: string[];
    files2: string[];
}>state = reactive<{
    files1: string[];
    files2: string[];
}>(data: {
    files1: string[];
    files2: string[];
}): Reactive<{
    files1: string[];
    files2: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  files1: string[]files1: [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ],
  files2: string[]files2: [] as string[],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("parent1")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files1: string[] | Reactive<string[]>files1,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files1: string[] | Reactive<string[]>files1 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("parent2")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files2: string[] | Reactive<string[]>files2,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files2: string[] | Reactive<string[]>files2 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="file-manager">
    <ul class="file-list" id="parent1">
      ${() =>
        const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files1: string[] | Reactive<string[]>files1.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml` <li class="file">${file: stringfile}</li> `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(file: stringfile)
        )}
    </ul>
    <ul class="file-list" id="parent2">
      ${const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files2: string[] | Reactive<string[]>files2.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml` <li class="file">${file: stringfile}</li> `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(file: stringfile)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    files1: string[];
    files2: string[];
}>state = reactive<{
    files1: string[];
    files2: string[];
}>(data: {
    files1: string[];
    files2: string[];
}): Reactive<{
    files1: string[];
    files2: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  files1: string[]files1: [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ],
  files2: string[]files2: [] as string[],
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("parent1")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files1: string[] | Reactive<string[]>files1,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files1: string[] | Reactive<string[]>files1 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("parent2")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files2: string[] | Reactive<string[]>files2,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files2: string[] | Reactive<string[]>files2 = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "A",
    multiDrag?: boolean | undefinedmultiDrag: true,
    selectedClass?: string | undefinedThe class to add to a node when it is selected (clicked or pressed).selectedClass: "bg-blue-500 text-white",
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="file-manager">
    <ul class="file-list" id="parent1">
      ${() =>
        const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files1: string[] | Reactive<string[]>files1.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml` <li class="file">${file: stringfile}</li> `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(file: stringfile)
        )}
    </ul>
    <ul class="file-list" id="parent2">
      ${const state: Reactive<{
    files1: string[];
    files2: string[];
}>state.files2: string[] | Reactive<string[]>files2.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((file: stringfile) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml` <li class="file">${file: stringfile}</li> `.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(file: stringfile)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  files1: [
    "dungeon_master.exe",
    "map_1.dat",
    "map_2.dat",
    "character1.txt",
    "character2.txt",
    "shell32.dll",
    "README.txt",
  ],
  files2: [] as string[],
});

dragAndDrop<string>({
  parent: document.getElementById("parent1")!,
  getValues: () => state.files1,
  setValues: (newValues) => {
    state.files1 = reactive(newValues);
  },
  config: {
    group: "A",
    multiDrag: true,
    selectedClass: "bg-blue-500 text-white",
  },
});

dragAndDrop<string>({
  parent: document.getElementById("parent2")!,
  getValues: () => state.files2,
  setValues: (newValues) => {
    state.files2 = reactive(newValues);
  },
  config: {
    group: "A",
    multiDrag: true,
    selectedClass: "bg-blue-500 text-white",
  },
});

html`
  <div class="file-manager">
    <ul class="file-list" id="parent1">
      ${() =>
        state.files1.map((file) =>
          html` <li class="file">${file}</li> `.key(file)
        )}
    </ul>
    <ul class="file-list" id="parent2">
      ${state.files2.map((file) =>
        html` <li class="file">${file}</li> `.key(file)
      )}
    </ul>
  </div>
`(document.getElementById("app")!);

static const mockFileNames = [
  "dungeon_master.exe",
  "map_1.dat",
  "map_2.dat",
  "character1.txt",
  "character2.txt",
  "shell32.dll",
  "README.txt",
];
static const config = {
  group: "A",
  multiDrag: true,
  selectedClass: "bg-blue-500 text-white",
};

<let/files1=mockFileNames>
<let/files2=[]>

<div class="file-manager">
  <ul/parent1 class="file-list">
    <for|item| of=files1 by=(f => f)>
      <li class="file">${item}</li>
    </for>
  </ul>
  <ul/parent2 class="file-list">
    <for|item| of=files2 by=(f => f)>
      <li class="file">${item}</li>
    </for>
  </ul>
</div>

<dnd:=files1 parent=parent1 config=config/>
<dnd:=files2 parent=parent2 config=config/>

static const mockFileNames = [
  "dungeon_master.exe",
  "map_1.dat",
  "map_2.dat",
  "character1.txt",
  "character2.txt",
  "shell32.dll",
  "README.txt",
];
static const config = {
  group: "A",
  multiDrag: true,
  selectedClass: "bg-blue-500 text-white",
};

<let/files1=mockFileNames>
<let/files2=[]>

<div class="file-manager">
  <ul/parent1 class="file-list">
    <for|item| of=files1 by=(f => f)>
      <li class="file">${item}</li>
    </for>
  </ul>
  <ul/parent2 class="file-list">
    <for|item| of=files2 by=(f => f)>
      <li class="file">${item}</li>
    </for>
  </ul>
</div>

<dnd:=files1 parent=parent1 config=config/>
<dnd:=files2 parent=parent2 config=config/>

static const mockFileNames = [
  "dungeon_master.exe",
  "map_1.dat",
  "map_2.dat",
  "character1.txt",
  "character2.txt",
  "shell32.dll",
  "README.txt",
];
static const config = {
  group: "A",
  multiDrag: true,
  selectedClass: "bg-blue-500 text-white",
};

<let/files1=mockFileNames>
<let/files2=[]>

<div class="file-manager">
  <ul/parent1 class="file-list">
    <for|item| of=files1 by=(f => f)>
      <li class="file">${item}</li>
    </for>
  </ul>
  <ul/parent2 class="file-list">
    <for|item| of=files2 by=(f => f)>
      <li class="file">${item}</li>
    </for>
  </ul>
</div>

<dnd:=files1 parent=parent1 config=config/>
<dnd:=files2 parent=parent2 config=config/>

Plugins

Plugins are a powerful way to extend the functionality of the library. They can be used to add new features, modify existing ones, or even create entirely new experiences.

Drop or Swap

The examples seen so far have shown the values of a given list being updated as the end-user drags over the list and its children. To enable behavior where the values of the list are only updated when the user drops the item, use the dropOrSwap plugin.

React
Vue
Solid
Native
Marko

import React from "react";
import { function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: booleantodoSwap, const setTodoSwap: React.Dispatch<React.SetStateAction<boolean>>setTodoSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);
  const [const doneSwap: booleandoneSwap, const setDoneSwap: React.Dispatch<React.SetStateAction<boolean>>setDoneSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const todoSwap: booleantodoSwap;
          },
        }),
      ],
    }
  );

  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const doneSwap: booleandoneSwap;
          },
        }),
      ],
    }
  );

  function function (local function) toggleTodoSwap(): voidtoggleTodoSwap() {
    const setTodoSwap: (value: React.SetStateAction<boolean>) => voidsetTodoSwap(!const todoSwap: booleantodoSwap);
  }

  function function (local function) toggleDoneSwap(): voidtoggleDoneSwap() {
    const setDoneSwap: (value: React.SetStateAction<boolean>) => voidsetDoneSwap(!const doneSwap: booleandoneSwap);
  }

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={function (local function) toggleTodoSwap(): voidtoggleTodoSwap}>
        {" "}
        Toggle {const todoSwap: booleantodoSwap ? "Drop" : "Swap"}
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={function (local function) toggleDoneSwap(): voidtoggleDoneSwap}>
        Toggle {const doneSwap: booleandoneSwap ? "Drop" : "Swap"}
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: booleantodoSwap, const setTodoSwap: React.Dispatch<React.SetStateAction<boolean>>setTodoSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);
  const [const doneSwap: booleandoneSwap, const setDoneSwap: React.Dispatch<React.SetStateAction<boolean>>setDoneSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const todoSwap: booleantodoSwap;
          },
        }),
      ],
    }
  );

  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const doneSwap: booleandoneSwap;
          },
        }),
      ],
    }
  );

  function function (local function) toggleTodoSwap(): voidtoggleTodoSwap() {
    const setTodoSwap: (value: React.SetStateAction<boolean>) => voidsetTodoSwap(!const todoSwap: booleantodoSwap);
  }

  function function (local function) toggleDoneSwap(): voidtoggleDoneSwap() {
    const setDoneSwap: (value: React.SetStateAction<boolean>) => voidsetDoneSwap(!const doneSwap: booleandoneSwap);
  }

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={function (local function) toggleTodoSwap(): voidtoggleTodoSwap}>
        {" "}
        Toggle {const todoSwap: booleantodoSwap ? "Drop" : "Swap"}
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.DOMAttributes<HTMLButtonElement>.onClick?: React.MouseEventHandler<HTMLButtonElement> | undefinedonClick={function (local function) toggleDoneSwap(): voidtoggleDoneSwap}>
        Toggle {const doneSwap: booleandoneSwap ? "Drop" : "Swap"}
      </React.JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { dropOrSwap } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [todoSwap, setTodoSwap] = React.useState(false);
  const [doneSwap, setDoneSwap] = React.useState(false);

  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      plugins: [
        dropOrSwap({
          shouldSwap: () => {
            return todoSwap;
          },
        }),
      ],
    }
  );

  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      plugins: [
        dropOrSwap({
          shouldSwap: () => {
            return doneSwap;
          },
        }),
      ],
    }
  );

  function toggleTodoSwap() {
    setTodoSwap(!todoSwap);
  }

  function toggleDoneSwap() {
    setDoneSwap(!doneSwap);
  }

  return (
    <div className="kanban-board">
      <ul ref={todoList}>
        {todos.map((todo) => (
          <li className="kanban-item" key={todo}>
            {todo}
          </li>
        ))}
      </ul>
      <button onClick={toggleTodoSwap}>
        {" "}
        Toggle {todoSwap ? "Drop" : "Swap"}
      </button>
      <ul ref={doneList}>
        {dones.map((done) => (
          <li className="kanban-item" key={done}>
            {done}
          </li>
        ))}
      </ul>
      <button onClick={toggleDoneSwap}>
        Toggle {doneSwap ? "Drop" : "Swap"}
      </button>
    </div>
  );
}

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);
const const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
      DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue,
    }),
  ],
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
      DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue,
    }),
  ],
});

function function toggleTodoSwap(): voidtoggleTodoSwap() {
  const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}

function function toggleDoneSwap(): voidtoggleDoneSwap() {
  const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleTodoSwap(): voidtoggleTodoSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleDoneSwap(): voidtoggleDoneSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const todoItems: string[]todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);
const const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
      DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue,
    }),
  ],
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
      DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue,
    }),
  ],
});

function function toggleTodoSwap(): voidtoggleTodoSwap() {
  const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}

function function toggleDoneSwap(): voidtoggleDoneSwap() {
  const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleTodoSwap(): voidtoggleTodoSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleDoneSwap(): voidtoggleDoneSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { dropOrSwap } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const doneItems = ["Pickup new mix-tape from Beth"];

const todoShouldSwap = ref(false);
const doneShouldSwap = ref(false);

const [todoList, todos] = useDragAndDrop(todoItems, {
  group: "todoList",
  plugins: [
    dropOrSwap({
      shouldSwap: () => todoShouldSwap.value,
    }),
  ],
});
const [doneList, dones] = useDragAndDrop(doneItems, {
  group: "todoList",
  plugins: [
    dropOrSwap({
      shouldSwap: () => doneShouldSwap.value,
    }),
  ],
});

function toggleTodoSwap() {
  todoShouldSwap.value = !todoShouldSwap.value;
}

function toggleDoneSwap() {
  doneShouldSwap.value = !doneShouldSwap.value;
}
</script>

<template>
  <div class="kanban-board">
    <ul ref="todoList" class="kanban-column">
      <li v-for="todo in todos" :key="todo" class="kanban-item">
        {{ todo }}
      </li>
    </ul>
    <div>
      <button
        @click="toggleTodoSwap()"
        class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ todoShouldSwap ? "Drop" : "Swap" }}
      </button>
    </div>
    <ul ref="doneList" class="kanban-column">
      <li v-for="done in dones" :key="done" class="kanban-item">
        {{ done }}
      </li>
    </ul>
    <div>
      <button
        @click="toggleDoneSwap()"
        class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ doneShouldSwap ? "Drop" : "Swap" }}
      </button>
    </div>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: Accessor<boolean>todoSwap, const setTodoSwap: Setter<boolean>setTodoSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);
  const [const doneSwap: Accessor<boolean>doneSwap, const setDoneSwap: Setter<boolean>setDoneSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const todoSwap: () => booleantodoSwap();
          },
        }),
      ],
    }
  );

  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const doneSwap: () => booleandoneSwap();
          },
        }),
      ],
    }
  );

  function function (local function) toggleTodoSwap(): voidtoggleTodoSwap() {
    const setTodoSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setTodoSwap(!const todoSwap: () => booleantodoSwap());
  }

  function function (local function) toggleDoneSwap(): voidtoggleDoneSwap() {
    const setDoneSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setDoneSwap(!const doneSwap: () => booleandoneSwap());
  }

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item" data-key: stringdata-key={todo: stringtodo}>
              {todo: stringtodo}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent, JSX.EventHandler<HTMLButtonElement, MouseEvent>> | undefinedonClick={function (local function) toggleTodoSwap(): voidtoggleTodoSwap}>
        Toggle {const todoSwap: () => booleantodoSwap() ? "Drop" : "Swap"}
      </JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item" data-key: stringdata-key={done: stringdone}>
              {done: stringdone}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent, JSX.EventHandler<HTMLButtonElement, MouseEvent>> | undefinedonClick={function (local function) toggleDoneSwap(): voidtoggleDoneSwap}>
        Toggle {const doneSwap: () => booleandoneSwap() ? "Drop" : "Swap"}
      </JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: Accessor<boolean>todoSwap, const setTodoSwap: Setter<boolean>setTodoSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);
  const [const doneSwap: Accessor<boolean>doneSwap, const setDoneSwap: Setter<boolean>setDoneSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const todoSwap: () => booleantodoSwap();
          },
        }),
      ],
    }
  );

  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
          DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => {
            return const doneSwap: () => booleandoneSwap();
          },
        }),
      ],
    }
  );

  function function (local function) toggleTodoSwap(): voidtoggleTodoSwap() {
    const setTodoSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setTodoSwap(!const todoSwap: () => booleantodoSwap());
  }

  function function (local function) toggleDoneSwap(): voidtoggleDoneSwap() {
    const setDoneSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setDoneSwap(!const doneSwap: () => booleandoneSwap());
  }

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item" data-key: stringdata-key={todo: stringtodo}>
              {todo: stringtodo}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent, JSX.EventHandler<HTMLButtonElement, MouseEvent>> | undefinedonClick={function (local function) toggleTodoSwap(): voidtoggleTodoSwap}>
        Toggle {const todoSwap: () => booleantodoSwap() ? "Drop" : "Swap"}
      </JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item" data-key: stringdata-key={done: stringdone}>
              {done: stringdone}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
          )}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton JSX.CustomEventHandlersCamelCase<HTMLButtonElement>.onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent, JSX.EventHandler<HTMLButtonElement, MouseEvent>> | undefinedonClick={function (local function) toggleDoneSwap(): voidtoggleDoneSwap}>
        Toggle {const doneSwap: () => booleandoneSwap() ? "Drop" : "Swap"}
      </JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/button@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElementbutton>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { For } from "solid-js";
import { dropOrSwap } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [todoSwap, setTodoSwap] = createSignal(false);
  const [doneSwap, setDoneSwap] = createSignal(false);

  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      plugins: [
        dropOrSwap({
          shouldSwap: () => {
            return todoSwap();
          },
        }),
      ],
    }
  );

  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      plugins: [
        dropOrSwap({
          shouldSwap: () => {
            return doneSwap();
          },
        }),
      ],
    }
  );

  function toggleTodoSwap() {
    setTodoSwap(!todoSwap());
  }

  function toggleDoneSwap() {
    setDoneSwap(!doneSwap());
  }

  return (
    <div class="kanban-board">
      <ul ref={todoList}>
        <For each={todos()}>
          {(todo) => (
            <li class="kanban-item" data-key={todo}>
              {todo}
            </li>
          )}
        </For>
      </ul>
      <button onClick={toggleTodoSwap}>
        Toggle {todoSwap() ? "Drop" : "Swap"}
      </button>
      <ul ref={doneList}>
        <For each={dones()}>
          {(done) => (
            <li class="kanban-item" data-key={done}>
              {done}
            </li>
          )}
        </For>
      </ul>
      <button onClick={toggleDoneSwap}>
        Toggle {doneSwap() ? "Drop" : "Swap"}
      </button>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state = reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>(data: {
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}): Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
  todoSwap: booleantodoSwap: false,
  doneSwap: booleandoneSwap: false,
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
        DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap,
      }),
    ],
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
        DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap,
      }),
    ],
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <button onclick=${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap = !const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap)}>
      ${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap ? "Disable" : "Enable")} swap
    </button>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
    <button onclick=${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap = !const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap)}>
      ${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap ? "Disable" : "Enable")} swap
    </button>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap } from "@formkit/drag-and-drop";

const const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state = reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>(data: {
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}): Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
  todoSwap: booleantodoSwap: false,
  doneSwap: booleandoneSwap: false,
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
        DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap,
      }),
    ],
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      dropOrSwap<unknown>(dropSwapConfig?: DropSwapConfig<unknown>): (parent: HTMLElement) => {
    setup(): void;
} | undefineddropOrSwap({
        DropSwapConfig<unknown>.shouldSwap?: ((data: ShouldSwapData<unknown>) => boolean) | undefinedshouldSwap: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap,
      }),
    ],
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <button onclick=${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap = !const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap)}>
      ${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todoSwap: booleantodoSwap ? "Disable" : "Enable")} swap
    </button>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
    <button onclick=${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap = !const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap)}>
      ${() => (const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.doneSwap: booleandoneSwap ? "Disable" : "Enable")} swap
    </button>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop, dropOrSwap } from "@formkit/drag-and-drop";

const state = reactive({
  todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: ["Pickup new mix-tape from Beth"],
  todoSwap: false,
  doneSwap: false,
});

dragAndDrop<string>({
  parent: document.getElementById("todo-list")!,
  getValues: () => state.todos,
  setValues: (newValues) => {
    state.todos = reactive(newValues);
  },
  config: {
    group: "todoList",
    plugins: [
      dropOrSwap({
        shouldSwap: () => state.todoSwap,
      }),
    ],
  },
});

dragAndDrop<string>({
  parent: document.getElementById("done-list")!,
  getValues: () => state.dones,
  setValues: (newValues) => {
    state.dones = reactive(newValues);
  },
  config: {
    group: "todoList",
    plugins: [
      dropOrSwap({
        shouldSwap: () => state.doneSwap,
      }),
    ],
  },
});

html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        state.todos.map((todo) =>
          html`<li class="kanban-item">${todo}</li>`.key(todo)
        )}
    </ul>
    <button onclick=${() => (state.todoSwap = !state.todoSwap)}>
      ${() => (state.todoSwap ? "Disable" : "Enable")} swap
    </button>
    <ul class="kanban-list" id="done-list">
      ${state.dones.map((done) =>
        html`<li class="kanban-item">${done}</li>`.key(done)
      )}
    </ul>
    <button onclick=${() => (state.doneSwap = !state.doneSwap)}>
      ${() => (state.doneSwap ? "Disable" : "Enable")} swap
    </button>
  </div>
`(document.getElementById("app")!);

import { dropOrSwap } from "@formkit/drag-and-drop";

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];

<let/todos=todoItems>
<let/dones=doneItems>
<let/todoSwap=false>
<let/doneSwap=false>

<!-- Config objects are initialized once; the shouldSwap callbacks close
     over reactive variables and always read the current value. -->
<let/todoConfig={ group: "todoList", plugins: [dropOrSwap({ shouldSwap: () => todoSwap })] }>
<let/doneConfig={ group: "todoList", plugins: [dropOrSwap({ shouldSwap: () => doneSwap })] }>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <div>
    <button
      onClick() { todoSwap = !todoSwap; }
      class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
    >
      Toggle ${todoSwap ? "Drop" : "Swap"}
    </button>
  </div>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
  <div>
    <button
      onClick() { doneSwap = !doneSwap; }
      class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
    >
      Toggle ${doneSwap ? "Drop" : "Swap"}
    </button>
  </div>
</div>

<dnd:=todos parent=todoList config=todoConfig/>
<dnd:=dones parent=doneList config=doneConfig/>

import { dropOrSwap } from "@formkit/drag-and-drop";

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];

<let/todos=todoItems>
<let/dones=doneItems>
<let/todoSwap=false>
<let/doneSwap=false>

<!-- Config objects are initialized once; the shouldSwap callbacks close
     over reactive variables and always read the current value. -->
<let/todoConfig={ group: "todoList", plugins: [dropOrSwap({ shouldSwap: () => todoSwap })] }>
<let/doneConfig={ group: "todoList", plugins: [dropOrSwap({ shouldSwap: () => doneSwap })] }>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <div>
    <button
      onClick() { todoSwap = !todoSwap; }
      class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
    >
      Toggle ${todoSwap ? "Drop" : "Swap"}
    </button>
  </div>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
  <div>
    <button
      onClick() { doneSwap = !doneSwap; }
      class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
    >
      Toggle ${doneSwap ? "Drop" : "Swap"}
    </button>
  </div>
</div>

<dnd:=todos parent=todoList config=todoConfig/>
<dnd:=dones parent=doneList config=doneConfig/>

import { dropOrSwap } from "@formkit/drag-and-drop";

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];

<let/todos=todoItems>
<let/dones=doneItems>
<let/todoSwap=false>
<let/doneSwap=false>

<!-- Config objects are initialized once; the shouldSwap callbacks close
     over reactive variables and always read the current value. -->
<let/todoConfig={ group: "todoList", plugins: [dropOrSwap({ shouldSwap: () => todoSwap })] }>
<let/doneConfig={ group: "todoList", plugins: [dropOrSwap({ shouldSwap: () => doneSwap })] }>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <div>
    <button
      onClick() { todoSwap = !todoSwap; }
      class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
    >
      Toggle ${todoSwap ? "Drop" : "Swap"}
    </button>
  </div>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
  <div>
    <button
      onClick() { doneSwap = !doneSwap; }
      class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
    >
      Toggle ${doneSwap ? "Drop" : "Swap"}
    </button>
  </div>
</div>

<dnd:=todos parent=todoList config=todoConfig/>
<dnd:=dones parent=doneList config=doneConfig/>

Insert (Experimental)

Similar to the dropOrSwap plugin, the insert plugin does not update values until the user drops the item. In addition, the insert plugin will render an insert point between the items to indicate where the item will be placed.

React
Vue
Solid
Native
Marko

import React from "react";
import { function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: booleantodoSwap, const setTodoSwap: React.Dispatch<React.SetStateAction<boolean>>setTodoSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);
  const [const doneSwap: booleandoneSwap, const setDoneSwap: React.Dispatch<React.SetStateAction<boolean>>setDoneSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

export function function myComponent(): React.JSX.ElementmyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: booleantodoSwap, const setTodoSwap: React.Dispatch<React.SetStateAction<boolean>>setTodoSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);
  const [const doneSwap: booleandoneSwap, const setDoneSwap: React.Dispatch<React.SetStateAction<boolean>>setDoneSwap] = React.function React.useState<boolean>(initialState: boolean | (() => boolean)): [boolean, React.Dispatch<React.SetStateAction<boolean>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: React.RefObject<HTMLUListElement | null>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  const [const doneList: React.RefObject<HTMLUListElement | null>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const todoList: React.RefObject<HTMLUListElement | null>todoList}>
        {const todos: string[]todos.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={todo: stringtodo}>
            {todo: stringtodo}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const doneList: React.RefObject<HTMLUListElement | null>doneList}>
        {const dones: string[]dones.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) => (
          <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-item" React.Attributes.key?: React.Key | null | undefinedkey={done: stringdone}>
            {done: stringdone}
          </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { insert } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

export function myComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [todoSwap, setTodoSwap] = React.useState(false);
  const [doneSwap, setDoneSwap] = React.useState(false);

  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      plugins: [
        insert({
          insertPoint: (parent) => {
            const div = document.createElement("div");

            for (const cls of insertPointClasses) div.classList.add(cls);

            return div;
          },
        }),
      ],
    }
  );

  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      plugins: [
        insert({
          insertPoint: (parent) => {
            const div = document.createElement("div");

            for (const cls of insertPointClasses) div.classList.add(cls);

            return div;
          },
        }),
      ],
    }
  );

  return (
    <div className="kanban-board">
      <ul ref={todoList}>
        {todos.map((todo) => (
          <li className="kanban-item" key={todo}>
            {todo}
          </li>
        ))}
      </ul>
      <ul ref={doneList}>
        {dones.map((done) => (
          <li className="kanban-item" key={done}>
            {done}
          </li>
        ))}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

const const todoItems: string[]todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);
const const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
      InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
        const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

        for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

        return const div: HTMLDivElementdiv;
      },
    }),
  ],
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
      InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
        const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

        for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

        return const div: HTMLDivElementdiv;
      },
    }),
  ],
});

function function toggleTodoSwap(): voidtoggleTodoSwap() {
  const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}

function function toggleDoneSwap(): voidtoggleDoneSwap() {
  const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleTodoSwap(): voidtoggleTodoSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleDoneSwap(): voidtoggleDoneSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

const const todoItems: string[]todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

const const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);
const const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap = ref<boolean>(value: boolean): Ref<boolean, boolean> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref(false);

const [const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList, const todos: Ref<string[], string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const todoItems: string[]todoItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
      InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
        const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

        for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

        return const div: HTMLDivElementdiv;
      },
    }),
  ],
});
const [const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList, const dones: Ref<string[], string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(const doneItems: string[]doneItems, {
  group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
  plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
    insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
      InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
        const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

        for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

        return const div: HTMLDivElementdiv;
      },
    }),
  ],
});

function function toggleTodoSwap(): voidtoggleTodoSwap() {
  const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}

function function toggleDoneSwap(): voidtoggleDoneSwap() {
  const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue = !const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap.Ref<boolean, boolean>.value: booleanvalue;
}
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="todoList: HTMLUListElementtodoList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" ReservedProps.key?: PropertyKey | undefined:key="const todo: stringtodo" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleTodoSwap(): voidtoggleTodoSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const todoShouldSwap: Ref<boolean, boolean>todoShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
    <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="doneList: HTMLUListElementdoneList" HTMLAttributes.class?: ClassValueclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" ReservedProps.key?: PropertyKey | undefined:key="const done: stringdone" HTMLAttributes.class?: ClassValueclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <div: HTMLAttributes & ReservedPropsdiv>
      <button: ButtonHTMLAttributes & ReservedPropsbutton
        @onClick?: ((payload: PointerEvent) => void) | undefinedclick="function toggleDoneSwap(): voidtoggleDoneSwap()"
        HTMLAttributes.class?: ClassValueclass="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ const doneShouldSwap: Ref<boolean, boolean>doneShouldSwap ? "Drop" : "Swap" }}
      </button: ButtonHTMLAttributes & ReservedPropsbutton>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { insert } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

const todoItems = [
  "Schedule perm",
  "Rewind VHS tapes",
  "Make change for the arcade",
  "Get disposable camera developed",
  "Learn C++",
  "Return Nintendo Power Glove",
];
const doneItems = ["Pickup new mix-tape from Beth"];

const todoShouldSwap = ref(false);
const doneShouldSwap = ref(false);

const [todoList, todos] = useDragAndDrop(todoItems, {
  group: "todoList",
  plugins: [
    insert({
      insertPoint: (parent) => {
        const div = document.createElement("div");

        for (const cls of insertPointClasses) div.classList.add(cls);

        return div;
      },
    }),
  ],
});
const [doneList, dones] = useDragAndDrop(doneItems, {
  group: "todoList",
  plugins: [
    insert({
      insertPoint: (parent) => {
        const div = document.createElement("div");

        for (const cls of insertPointClasses) div.classList.add(cls);

        return div;
      },
    }),
  ],
});

function toggleTodoSwap() {
  todoShouldSwap.value = !todoShouldSwap.value;
}

function toggleDoneSwap() {
  doneShouldSwap.value = !doneShouldSwap.value;
}
</script>

<template>
  <div class="kanban-board">
    <ul ref="todoList" class="kanban-column">
      <li v-for="todo in todos" :key="todo" class="kanban-item">
        {{ todo }}
      </li>
    </ul>
    <div>
      <button
        @click="toggleTodoSwap()"
        class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ todoShouldSwap ? "Drop" : "Swap" }}
      </button>
    </div>
    <ul ref="doneList" class="kanban-column">
      <li v-for="done in dones" :key="done" class="kanban-item">
        {{ done }}
      </li>
    </ul>
    <div>
      <button
        @click="toggleDoneSwap()"
        class="bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg mt-4"
      >
        Toggle {{ doneShouldSwap ? "Drop" : "Swap" }}
      </button>
    </div>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: Accessor<boolean>todoSwap, const setTodoSwap: Setter<boolean>setTodoSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);
  const [const doneSwap: Accessor<boolean>doneSwap, const setDoneSwap: Setter<boolean>setDoneSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  function function (local function) toggleTodoSwap(): voidtoggleTodoSwap() {
    const setTodoSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setTodoSwap(!const todoSwap: () => booleantodoSwap());
  }

  function function (local function) toggleDoneSwap(): voidtoggleDoneSwap() {
    const setDoneSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setDoneSwap(!const doneSwap: () => booleandoneSwap());
  }

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

export function function MyComponent(): JSX.ElementMyComponent() {
  const const todoItems: string[]todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [const todoSwap: Accessor<boolean>todoSwap, const setTodoSwap: Setter<boolean>setTodoSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);
  const [const doneSwap: Accessor<boolean>doneSwap, const setDoneSwap: Setter<boolean>setDoneSwap] = createSignal<boolean>(value: boolean, options?: SignalOptions<boolean> | undefined): Signal<boolean> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal(false);

  const const doneItems: string[]doneItems = ["Pickup new mix-tape from Beth"];

  const [const todoList: Setter<HTMLUListElement | null>todoList, const todos: Accessor<string[]>todos] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  const [const doneList: Setter<HTMLUListElement | null>doneList, const dones: Accessor<string[]>dones] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
      plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
        insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
          InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
            const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

            for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

            return const div: HTMLDivElementdiv;
          },
        }),
      ],
    }
  );

  function function (local function) toggleTodoSwap(): voidtoggleTodoSwap() {
    const setTodoSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setTodoSwap(!const todoSwap: () => booleantodoSwap());
  }

  function function (local function) toggleDoneSwap(): voidtoggleDoneSwap() {
    const setDoneSwap: <boolean>(value: boolean | ((prev: boolean) => boolean)) => boolean (+3 overloads)setDoneSwap(!const doneSwap: () => booleandoneSwap());
  }

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv JSX.DOMAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}
        </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { For } from "solid-js";
import { insert } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

export function MyComponent() {
  const todoItems = [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ];

  const [todoSwap, setTodoSwap] = createSignal(false);
  const [doneSwap, setDoneSwap] = createSignal(false);

  const doneItems = ["Pickup new mix-tape from Beth"];

  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
    todoItems,
    {
      group: "todoList",
      plugins: [
        insert({
          insertPoint: (parent) => {
            const div = document.createElement("div");

            for (const cls of insertPointClasses) div.classList.add(cls);

            return div;
          },
        }),
      ],
    }
  );

  const [doneList, dones] = useDragAndDrop<HTMLUListElement, string>(
    doneItems,
    {
      group: "todoList",
      plugins: [
        insert({
          insertPoint: (parent) => {
            const div = document.createElement("div");

            for (const cls of insertPointClasses) div.classList.add(cls);

            return div;
          },
        }),
      ],
    }
  );

  function toggleTodoSwap() {
    setTodoSwap(!todoSwap());
  }

  function toggleDoneSwap() {
    setDoneSwap(!doneSwap());
  }

  return (
    <div class="kanban-board">
      <ul ref={todoList}>
        <For each={todos()}>
          {(todo) => <li class="kanban-item">{todo}</li>}
        </For>
      </ul>
      <ul ref={doneList}>
        <For each={dones()}>
          {(done) => <li class="kanban-item">{done}</li>}
        </For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

const const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state = reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>(data: {
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}): Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
  todoSwap: booleantodoSwap: false,
  doneSwap: booleandoneSwap: false,
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
        InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
          const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

          for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

          return const div: HTMLDivElementdiv;
        },
      }),
    ],
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
        InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: () => var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div"),
      }),
    ],
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert } from "@formkit/drag-and-drop";

const const insertPointClasses: string[]insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

const const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state = reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>(data: {
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}): Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
  todoSwap: booleantodoSwap: false,
  doneSwap: booleandoneSwap: false,
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
        InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: (parent: ParentRecord<unknown>parent) => {
          const const div: HTMLDivElementdiv = var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div");

          for (const const cls: stringcls of const insertPointClasses: string[]insertPointClasses) const div: HTMLDivElementdiv.Element.classList: DOMTokenListThe read-only **`classList`** property of the Element interface contains a live DOMTokenList collection representing the class attribute of the element. This can then be used to manipulate the class list.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/classList)classList.DOMTokenList.add(...tokens: string[]): voidThe **`add()`** method of the DOMTokenList interface adds the given tokens to the list, omitting any that are already present.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMTokenList/add)add(const cls: stringcls);

          return const div: HTMLDivElementdiv;
        },
      }),
    ],
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group: "todoList",
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [
      insert<unknown>(insertConfig: InsertConfig<unknown>): (parent: HTMLElement) => {
    teardown(): void;
    setup(): void;
} | undefinedinsert({
        InsertConfig<unknown>.insertPoint: (parent: ParentRecord<unknown>) => HTMLElementinsertPoint: () => var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.createElement<"div">(tagName: "div", options?: ElementCreationOptions): HTMLDivElement (+2 overloads)In an HTML document, the **`document.createElement()`** method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)createElement("div"),
      }),
    ],
  },
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.todos: string[] | Reactive<string[]>todos.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((todo: stringtodo) =>
          function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${const state: Reactive<{
    todos: string[];
    dones: string[];
    todoSwap: boolean;
    doneSwap: boolean;
}>state.dones: string[] | Reactive<string[]>dones.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((done: stringdone) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop, insert } from "@formkit/drag-and-drop";

const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

const state = reactive({
  todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: ["Pickup new mix-tape from Beth"],
  todoSwap: false,
  doneSwap: false,
});

dragAndDrop<string>({
  parent: document.getElementById("todo-list")!,
  getValues: () => state.todos,
  setValues: (newValues) => {
    state.todos = reactive(newValues);
  },
  config: {
    group: "todoList",
    plugins: [
      insert({
        insertPoint: (parent) => {
          const div = document.createElement("div");

          for (const cls of insertPointClasses) div.classList.add(cls);

          return div;
        },
      }),
    ],
  },
});

dragAndDrop<string>({
  parent: document.getElementById("done-list")!,
  getValues: () => state.dones,
  setValues: (newValues) => {
    state.dones = reactive(newValues);
  },
  config: {
    group: "todoList",
    plugins: [
      insert({
        insertPoint: () => document.createElement("div"),
      }),
    ],
  },
});

html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        state.todos.map((todo) =>
          html`<li class="kanban-item">${todo}</li>`.key(todo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${state.dones.map((done) =>
        html`<li class="kanban-item">${done}</li>`.key(done)
      )}
    </ul>
  </div>
`(document.getElementById("app")!);

import { insert } from "@formkit/drag-and-drop";

static const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

static function makeInsertPoint() {
  const div = document.createElement("div");
  for (const cls of insertPointClasses) div.classList.add(cls);
  return div;
}

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const config = {
  group: "todoList",
  plugins: [insert({ insertPoint: makeInsertPoint })],
};

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

import { insert } from "@formkit/drag-and-drop";

static const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

static function makeInsertPoint() {
  const div = document.createElement("div");
  for (const cls of insertPointClasses) div.classList.add(cls);
  return div;
}

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const config = {
  group: "todoList",
  plugins: [insert({ insertPoint: makeInsertPoint })],
};

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

import { insert } from "@formkit/drag-and-drop";

static const insertPointClasses = [
  "absolute",
  "bg-blue-500",
  "z-[1000]",
  "rounded-full",
  "duration-[5ms]",
  "before:block",
  'before:content-["Insert"]',
  "before:whitespace-nowrap",
  "before:block",
  "before:bg-blue-500",
  "before:py-1",
  "before:px-2",
  "before:rounded-full",
  "before:text-xs",
  "before:absolute",
  "before:top-1/2",
  "before:left-1/2",
  "before:-translate-y-1/2",
  "before:-translate-x-1/2",
  "before:text-white",
  "before:text-xs",
];

static function makeInsertPoint() {
  const div = document.createElement("div");
  for (const cls of insertPointClasses) div.classList.add(cls);
  return div;
}

static const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
static const doneItems = ["Pickup new mix-tape from Beth"];
static const config = {
  group: "todoList",
  plugins: [insert({ insertPoint: makeInsertPoint })],
};

<let/todos=todoItems>
<let/dones=doneItems>

<div class="kanban-board">
  <ul/todoList class="kanban-column">
    <for|todo| of=todos by=(t => t)>
      <li class="kanban-item">${todo}</li>
    </for>
  </ul>
  <ul/doneList class="kanban-column">
    <for|done| of=dones by=(t => t)>
      <li class="kanban-item">${done}</li>
    </for>
  </ul>
</div>

<dnd:=todos parent=todoList config=config/>
<dnd:=dones parent=doneList config=config/>

Animations (Experimenal)

To add animations to your drag and drop experience, you can use the animations plugin.

React
Vue
Solid
Native
Marko

import React from "react";
import { function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    { plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
  );
  return (
    <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

import React from "react";
import { function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement | null>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    { plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
  );
  return (
    <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) => (
        <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

import React from "react";
import { animations } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function myComponent() {
  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    { plugins: [animations()] }
  );
  return (
    <ul ref={parent}>
      {tapes.map((tape) => (
        <li className="cassette" data-label={tape} key={tape}>
          {tape}
        </li>
      ))}
    </ul>
  );
}

<script setup lang="ts">
import { function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const tapes: Ref<string[], string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  { plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLUListElementparent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

<script setup lang="ts">
import { function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const tapes: Ref<string[], string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  { plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLUListElementparent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" ReservedProps.key?: PropertyKey | undefined:key="const tape: stringtape" HTMLAttributes.class?: ClassValueclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

<script setup lang="ts">
import { animations } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [parent, tapes] = useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  { plugins: [animations()] }
);
</script>

<template>
  <ul ref="parent">
    <li v-for="tape in tapes" :key="tape" class="cassette">
      {{ tape }}
    </li>
  </ul>
</template>

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const [const parent: Setter<HTMLUListElement | null>parent, const tapes: Accessor<string[]>tapes] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    { plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
  );
  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
      <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
        )}
      </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
  );
}

/** @jsxImportSource solid-js */
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function MyComponent(): JSX.ElementMyComponent() {
  const [const parent: Setter<HTMLUListElement | null>parent, const tapes: Accessor<string[]>tapes] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    { plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
  );
  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
      <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli JSX.DOMAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>
        )}
      </function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
  );
}

/** @jsxImportSource solid-js */
import { For } from "solid-js";
import { animations } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function MyComponent() {
  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    { plugins: [animations()] }
  );
  return (
    <ul ref={parent}>
      <For each={tapes()}>
        {(tape) => (
          <li class="cassette" data-label={tape}>
            {tape}
          </li>
        )}
      </For>
    </ul>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}): Reactive<{
    tapes: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${() =>
      const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
      )}
  </ul>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()],
  },
});

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";

const const state: Reactive<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}): Reactive<{
    tapes: string[];
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <ul id="cassettes">
    ${() =>
      const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((tape: stringtape) =>
        function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(tape: stringtape)
      )}
  </ul>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    tapes: string[];
}>state.tapes: string[] | Reactive<string[]>tapes = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    plugins?: DNDPlugin[] | undefinedAn array of functions to use for a given parent.plugins: [function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()],
  },
});

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop, animations } from "@formkit/drag-and-drop";

const state = reactive({
  tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

html`
  <ul id="cassettes">
    ${() =>
      state.tapes.map((tape) =>
        html`<li class="cassette" data-label="${tape}">${tape}</li>`.key(tape)
      )}
  </ul>
`(document.getElementById("app")!);

dragAndDrop<string>({
  parent: document.getElementById("cassettes")!,
  getValues: () => state.tapes,
  setValues: (newValues) => {
    state.tapes = reactive(newValues);
  },
  config: {
    plugins: [animations()],
  },
});

Events

When using a drag and drop library, often it is useful to be able to listen to particular events, such as when a drag starts or ends. Event listeners can be set at either a global level or at the parent level.

Global

Two global events are available, `dragStarted` and `dragEnded`. In order to listen to global events, import the state object from @formkit/drag-and-drop and register your event listener using the on method.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function App(): React.JSX.ElementApp() {
  const [const dragStatus: stringdragStatus, const setDragStatus: React.Dispatch<React.SetStateAction<string>>setDragStatus] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState("Not dragging");

  const [const parent: React.RefObject<HTMLUListElement | null>parent, const items: string[]items] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "🍦 vanilla",
    "🍫 chocolate",
    "🍓 strawberry",
  ]);

  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", () => const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Dragging"));

  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", () => const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Not dragging"));

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>Rank your favorite flavors</React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const dragStatus: stringdragStatus}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
        {const items: string[]items.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => {
          return <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>;
        })}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function App(): React.JSX.ElementApp() {
  const [const dragStatus: stringdragStatus, const setDragStatus: React.Dispatch<React.SetStateAction<string>>setDragStatus] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState("Not dragging");

  const [const parent: React.RefObject<HTMLUListElement | null>parent, const items: string[]items] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "🍦 vanilla",
    "🍫 chocolate",
    "🍓 strawberry",
  ]);

  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", () => const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Dragging"));

  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", () => const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Not dragging"));

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>Rank your favorite flavors</React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const dragStatus: stringdragStatus}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
        {const items: string[]items.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => {
          return <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>;
        })}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useState } from "react";
import { state } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function App() {
  const [dragStatus, setDragStatus] = useState("Not dragging");

  const [parent, items] = useDragAndDrop<HTMLUListElement, string>([
    "🍦 vanilla",
    "🍫 chocolate",
    "🍓 strawberry",
  ]);

  state.on("dragStarted", () => setDragStatus("Dragging"));

  state.on("dragEnded", () => setDragStatus("Not dragging"));

  return (
    <div>
      <strong>Rank your favorite flavors</strong>
      <br />
      <span>{dragStatus}</span>
      <br />
      <ul ref={parent}>
        {items.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const dragStatus: Ref<string, string>dragStatus = ref<string>(value: string): Ref<string, string> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref("Not dragging");

const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const flavors: Ref<string[], string[]>flavors] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([
  "🍦 vanilla",
  "🍫 chocolate",
  "🍓 strawberry",
]);

let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", () => {
  const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Dragging";
});

let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", () => {
  const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Not dragging";
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
    <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
      <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="antialiased">=== Rank your favorite flavors ===</span: HTMLAttributes & ReservedPropsspan>
      <div: HTMLAttributes & ReservedPropsdiv>Drag status: {{ const dragStatus: Ref<string, string>dragStatus }}</div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
    <div: HTMLAttributes & ReservedPropsdiv
      ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLDivElementparent"
      HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased"
    >
      <div: HTMLAttributes & ReservedPropsdiv
        v-for="const flavor: stringflavor in const flavors: Ref<string[], string[]>flavors"
        ReservedProps.key?: PropertyKey | undefined:key="const flavor: stringflavor"
        HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 p-2"
      >
        {{ const flavor: stringflavor }}
      </div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const dragStatus: Ref<string, string>dragStatus = ref<string>(value: string): Ref<string, string> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref("Not dragging");

const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const flavors: Ref<string[], string[]>flavors] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop([
  "🍦 vanilla",
  "🍫 chocolate",
  "🍓 strawberry",
]);

let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", () => {
  const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Dragging";
});

let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", () => {
  const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Not dragging";
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
    <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
      <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="antialiased">=== Rank your favorite flavors ===</span: HTMLAttributes & ReservedPropsspan>
      <div: HTMLAttributes & ReservedPropsdiv>Drag status: {{ const dragStatus: Ref<string, string>dragStatus }}</div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
    <div: HTMLAttributes & ReservedPropsdiv
      ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLDivElementparent"
      HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased"
    >
      <div: HTMLAttributes & ReservedPropsdiv
        v-for="const flavor: stringflavor in const flavors: Ref<string[], string[]>flavors"
        ReservedProps.key?: PropertyKey | undefined:key="const flavor: stringflavor"
        HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 p-2"
      >
        {{ const flavor: stringflavor }}
      </div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { state } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const dragStatus = ref("Not dragging");

const [parent, flavors] = useDragAndDrop([
  "🍦 vanilla",
  "🍫 chocolate",
  "🍓 strawberry",
]);

state.on("dragStarted", () => {
  dragStatus.value = "Dragging";
});

state.on("dragEnded", () => {
  dragStatus.value = "Not dragging";
});
</script>

<template>
  <div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
    <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
      <span class="antialiased">=== Rank your favorite flavors ===</span>
      <div>Drag status: {{ dragStatus }}</div>
    </div>
    <div
      ref="parent"
      class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased"
    >
      <div
        v-for="flavor in flavors"
        :key="flavor"
        class="border-2 border-indigo-300 p-2"
      >
        {{ flavor }}
      </div>
    </div>
  </div>
</template>

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function App(): JSX.ElementApp() {
  const [const dragStatus: Accessor<string>dragStatus, const setDragStatus: Setter<string>setDragStatus] = createSignal<string>(value: string, options?: SignalOptions<string> | undefined): Signal<string> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal("Not dragging");

  const [const parent: Setter<HTMLUListElement | null>parent, const items: Accessor<string[]>items] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "🍦 vanilla",
    "🍫 chocolate",
    "🍓 strawberry",
  ]);

  const const onDragStarted: () => "Dragging"onDragStarted = () => const setDragStatus: <"Dragging">(value: "Dragging" | ((prev: string) => "Dragging")) => "Dragging" (+3 overloads)setDragStatus("Dragging");
  const const onDragEnded: () => "Not dragging"onDragEnded = () => const setDragStatus: <"Not dragging">(value: "Not dragging" | ((prev: string) => "Not dragging")) => "Not dragging" (+3 overloads)setDragStatus("Not dragging");

  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", const onDragStarted: () => "Dragging"onDragStarted);
  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", const onDragEnded: () => "Not dragging"onDragEnded);

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>Rank your favorite flavors</JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>{const dragStatus: () => stringdragStatus()}</JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items: () => string[]items()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function App(): JSX.ElementApp() {
  const [const dragStatus: Accessor<string>dragStatus, const setDragStatus: Setter<string>setDragStatus] = createSignal<string>(value: string, options?: SignalOptions<string> | undefined): Signal<string> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal("Not dragging");

  const [const parent: Setter<HTMLUListElement | null>parent, const items: Accessor<string[]>items] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>([
    "🍦 vanilla",
    "🍫 chocolate",
    "🍓 strawberry",
  ]);

  const const onDragStarted: () => "Dragging"onDragStarted = () => const setDragStatus: <"Dragging">(value: "Dragging" | ((prev: string) => "Dragging")) => "Dragging" (+3 overloads)setDragStatus("Dragging");
  const const onDragEnded: () => "Not dragging"onDragEnded = () => const setDragStatus: <"Not dragging">(value: "Not dragging" | ((prev: string) => "Not dragging")) => "Not dragging" (+3 overloads)setDragStatus("Not dragging");

  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", const onDragStarted: () => "Dragging"onDragStarted);
  let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", const onDragEnded: () => "Not dragging"onDragEnded);

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>Rank your favorite flavors</JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>{const dragStatus: () => stringdragStatus()}</JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items: () => string[]items()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { For } from "solid-js";
import { state } from "@formkit/drag-and-drop";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function App() {
  const [dragStatus, setDragStatus] = createSignal("Not dragging");

  const [parent, items] = useDragAndDrop<HTMLUListElement, string>([
    "🍦 vanilla",
    "🍫 chocolate",
    "🍓 strawberry",
  ]);

  const onDragStarted = () => setDragStatus("Dragging");
  const onDragEnded = () => setDragStatus("Not dragging");

  state.on("dragStarted", onDragStarted);
  state.on("dragEnded", onDragEnded);

  return (
    <div>
      <strong>Rank your favorite flavors</strong>
      <br />
      <span>{dragStatus()}</span>
      <br />
      <ul ref={parent}>
        <For each={items()}>{(item) => <li>{item}</li>}</For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state as let DNDState: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}DNDState } from "@formkit/drag-and-drop";

const const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state = reactive<{
    items: string[];
    dragStatus: string;
}>(data: {
    items: string[];
    dragStatus: string;
}): Reactive<{
    items: string[];
    dragStatus: string;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  items: string[]items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: stringdragStatus: "Not dragging",
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.dragStatus: stringdragStatus}</span>
    <ul id="list">
      ${() => const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.items: string[] | Reactive<string[]>items.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(item: stringitem))}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.items: string[] | Reactive<string[]>items,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.items: string[] | Reactive<string[]>items = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
});

let DNDState: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}DNDState.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", () => {
  const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.dragStatus: stringdragStatus = "Dragging";
});

let DNDState: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}DNDState.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", () => {
  const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.dragStatus: stringdragStatus = "Not dragging";
});

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop, let state: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}state as let DNDState: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}DNDState } from "@formkit/drag-and-drop";

const const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state = reactive<{
    items: string[];
    dragStatus: string;
}>(data: {
    items: string[];
    dragStatus: string;
}): Reactive<{
    items: string[];
    dragStatus: string;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  items: string[]items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: stringdragStatus: "Not dragging",
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.dragStatus: stringdragStatus}</span>
    <ul id="list">
      ${() => const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.items: string[] | Reactive<string[]>items.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(item: stringitem))}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.items: string[] | Reactive<string[]>items,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.items: string[] | Reactive<string[]>items = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
});

let DNDState: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}DNDState.on: (event: string, callback: (data: unknown) => void) => voidon("dragStarted", () => {
  const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.dragStatus: stringdragStatus = "Dragging";
});

let DNDState: BaseDragState<unknown>The state of the drag and drop.
@type{BaseDragState<unknown>}DNDState.on: (event: string, callback: (data: unknown) => void) => voidon("dragEnded", () => {
  const state: Reactive<{
    items: string[];
    dragStatus: string;
}>state.dragStatus: stringdragStatus = "Not dragging";
});

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop, state as DNDState } from "@formkit/drag-and-drop";

const state = reactive({
  items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: "Not dragging",
});

html`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${state.dragStatus}</span>
    <ul id="list">
      ${() => state.items.map((item) => html`<li>${item}</li>`.key(item))}
    </ul>
  </div>
`(document.getElementById("app")!);

dragAndDrop<string>({
  parent: document.getElementById("list")!,
  getValues: () => state.items,
  setValues: (newValues) => {
    state.items = reactive(newValues);
  },
});

DNDState.on("dragStarted", () => {
  state.dragStatus = "Dragging";
});

DNDState.on("dragEnded", () => {
  state.dragStatus = "Not dragging";
});

client import { state } from "@formkit/drag-and-drop";

<let/flavors=["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"]>
<let/dragStatus="Not dragging">

<lifecycle
  onMount() {
    state.on("dragStarted", () => { dragStatus = "Dragging"; });
    state.on("dragEnded", () => { dragStatus = "Not dragging"; });
  }
/>

<div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
  <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
    <span class="antialiased">=== Rank your favorite flavors ===</span>
    <div>Drag status: ${dragStatus}</div>
  </div>
  <div/parent class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased">
    <for|flavor| of=flavors by=(f => f)>
      <div class="border-2 border-indigo-300 p-2">${flavor}</div>
    </for>
  </div>
</div>

<dnd:=flavors parent=parent/>

client import { state } from "@formkit/drag-and-drop";

<let/flavors=["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"]>
<let/dragStatus="Not dragging">

<lifecycle
  onMount() {
    state.on("dragStarted", () => { dragStatus = "Dragging"; });
    state.on("dragEnded", () => { dragStatus = "Not dragging"; });
  }
/>

<div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
  <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
    <span class="antialiased">=== Rank your favorite flavors ===</span>
    <div>Drag status: ${dragStatus}</div>
  </div>
  <div/parent class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased">
    <for|flavor| of=flavors by=(f => f)>
      <div class="border-2 border-indigo-300 p-2">${flavor}</div>
    </for>
  </div>
</div>

<dnd:=flavors parent=parent/>

client import { state } from "@formkit/drag-and-drop";

<let/flavors=["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"]>
<let/dragStatus="Not dragging">

<lifecycle
  onMount() {
    state.on("dragStarted", () => { dragStatus = "Dragging"; });
    state.on("dragEnded", () => { dragStatus = "Not dragging"; });
  }
/>

<div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
  <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
    <span class="antialiased">=== Rank your favorite flavors ===</span>
    <div>Drag status: ${dragStatus}</div>
  </div>
  <div/parent class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased">
    <for|flavor| of=flavors by=(f => f)>
      <div class="border-2 border-indigo-300 p-2">${flavor}</div>
    </for>
  </div>
</div>

<dnd:=flavors parent=parent/>

Parent

Parents themselves have their own set of events that can be listened to. These events include: `onDragstart`, `onDragend`, `onSort`, `onTransfer`. To listen to parent events, assign a callback function to the event in the parent's configuration object.

React
Vue
Solid
Native
Marko

import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function App(): React.JSX.ElementApp() {
  const [const dragStatus: stringdragStatus, const setDragStatus: React.Dispatch<React.SetStateAction<string>>setDragStatus] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState("Not dragging");
  const [const valuesChanged: stringvaluesChanged, const setValuesChanged: React.Dispatch<React.SetStateAction<string>>setValuesChanged] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState("Not sorting");

  const [const parent: React.RefObject<HTMLUListElement | null>parent, const items: string[]items] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    {
      onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
        const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Dragging");
      },
      onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
        const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Not dragging");
        const setValuesChanged: (value: React.SetStateAction<string>) => voidsetValuesChanged("Not sorting");
      },
      onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
        const setValuesChanged: (value: React.SetStateAction<string>) => voidsetValuesChanged(`${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`);
      },
    }
  );

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>Rank your favorite flavors</React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const dragStatus: stringdragStatus}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const valuesChanged: stringvaluesChanged}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
        {const items: string[]items.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => {
          return <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>;
        })}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E | null>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/react";

export function function App(): React.JSX.ElementApp() {
  const [const dragStatus: stringdragStatus, const setDragStatus: React.Dispatch<React.SetStateAction<string>>setDragStatus] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState("Not dragging");
  const [const valuesChanged: stringvaluesChanged, const setValuesChanged: React.Dispatch<React.SetStateAction<string>>setValuesChanged] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState("Not sorting");

  const [const parent: React.RefObject<HTMLUListElement | null>parent, const items: string[]items] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>>): [React.RefObject<HTMLUListElement | null>, string[], React.Dispatch<React.SetStateAction<string[]>>, (config: Partial<ParentConfig<string>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    {
      onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
        const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Dragging");
      },
      onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
        const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Not dragging");
        const setValuesChanged: (value: React.SetStateAction<string>) => voidsetValuesChanged("Not sorting");
      },
      onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
        const setValuesChanged: (value: React.SetStateAction<string>) => voidsetValuesChanged(`${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`);
      },
    }
  );

  return (
    <React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>Rank your favorite flavors</React.JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const dragStatus: stringdragStatus}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const valuesChanged: stringvaluesChanged}</React.JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <React.JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.Ref<HTMLUListElement> | undefinedAllows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const parent: React.RefObject<HTMLUListElement | null>parent}>
        {const items: string[]items.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => {
          return <React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</React.JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>;
        })}
      </React.JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </React.JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

import React from "react";
import { useState } from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";

export function App() {
  const [dragStatus, setDragStatus] = useState("Not dragging");
  const [valuesChanged, setValuesChanged] = useState("Not sorting");

  const [parent, items] = useDragAndDrop<HTMLUListElement, string>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    {
      onDragstart: () => {
        setDragStatus("Dragging");
      },
      onDragend: () => {
        setDragStatus("Not dragging");
        setValuesChanged("Not sorting");
      },
      onSort: (event) => {
        setValuesChanged(`${event.previousValues} -> ${event.values}`);
      },
    }
  );

  return (
    <div>
      <strong>Rank your favorite flavors</strong>
      <br />
      <span>{dragStatus}</span>
      <span>{valuesChanged}</span>
      <br />
      <ul ref={parent}>
        {items.map((item) => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </div>
  );
}

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const dragStatus: Ref<string, string>dragStatus = ref<string>(value: string): Ref<string, string> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref("Not dragging");
const const valuesChanged: Ref<string, string>valuesChanged = ref<string>(value: string): Ref<string, string> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref("Not sorting");
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const flavors: Ref<string[], string[]>flavors] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  {
    onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
      const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Dragging";
    },
    onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
      const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Not dragging";
      const valuesChanged: Ref<string, string>valuesChanged.Ref<string, string>.value: stringvalue = "Not sorting";
    },
    onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
      const valuesChanged: Ref<string, string>valuesChanged.Ref<string, string>.value: stringvalue = `${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`;
    },
  }
);
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
    <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
      <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="antialiased">=== Rank your favorite flavors ===</span: HTMLAttributes & ReservedPropsspan>
      <div: HTMLAttributes & ReservedPropsdiv>Drag status: {{ const dragStatus: Ref<string, string>dragStatus }}</div: HTMLAttributes & ReservedPropsdiv>
      <div: HTMLAttributes & ReservedPropsdiv>Values changed: {{ const valuesChanged: Ref<string, string>valuesChanged }}</div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
    <div: HTMLAttributes & ReservedPropsdiv
      ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLDivElementparent"
      HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased"
    >
      <div: HTMLAttributes & ReservedPropsdiv
        v-for="const flavor: stringflavor in const flavors: Ref<string[], string[]>flavors"
        ReservedProps.key?: PropertyKey | undefined:key="const flavor: stringflavor"
        HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 p-2"
      >
        {{ const flavor: stringflavor }}
      </div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [Ref<HTMLElement | undefined>, Ref<T[]>, (config: Partial<VueParentConfig<T>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop } from "@formkit/drag-and-drop/vue";

const const dragStatus: Ref<string, string>dragStatus = ref<string>(value: string): Ref<string, string> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref("Not dragging");
const const valuesChanged: Ref<string, string>valuesChanged = ref<string>(value: string): Ref<string, string> (+1 overload)Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref("Not sorting");
const [const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent, const flavors: Ref<string[], string[]>flavors] = useDragAndDrop<string>(initialValues: string[], options?: Partial<Partial<ParentConfig<string>>>): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<string[], string[]>, (config: Partial<Partial<ParentConfig<string>>>) => void]Creates a new instance of drag and drop and returns the parent element and
a ref of the values to use in your template.
@paraminitialValues - The initial values of the parent element.@returnsThe parent element and values for drag and drop.useDragAndDrop(
  ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  {
    onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
      const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Dragging";
    },
    onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
      const dragStatus: Ref<string, string>dragStatus.Ref<string, string>.value: stringvalue = "Not dragging";
      const valuesChanged: Ref<string, string>valuesChanged.Ref<string, string>.value: stringvalue = "Not sorting";
    },
    onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
      const valuesChanged: Ref<string, string>valuesChanged.Ref<string, string>.value: stringvalue = `${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`;
    },
  }
);
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
    <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: ClassValueclass="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
      <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: ClassValueclass="antialiased">=== Rank your favorite flavors ===</span: HTMLAttributes & ReservedPropsspan>
      <div: HTMLAttributes & ReservedPropsdiv>Drag status: {{ const dragStatus: Ref<string, string>dragStatus }}</div: HTMLAttributes & ReservedPropsdiv>
      <div: HTMLAttributes & ReservedPropsdiv>Values changed: {{ const valuesChanged: Ref<string, string>valuesChanged }}</div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
    <div: HTMLAttributes & ReservedPropsdiv
      ReservedProps.ref?: VNodeRef | undefinedref="parent: HTMLDivElementparent"
      HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased"
    >
      <div: HTMLAttributes & ReservedPropsdiv
        v-for="const flavor: stringflavor in const flavors: Ref<string[], string[]>flavors"
        ReservedProps.key?: PropertyKey | undefined:key="const flavor: stringflavor"
        HTMLAttributes.class?: ClassValueclass="border-2 border-indigo-300 p-2"
      >
        {{ const flavor: stringflavor }}
      </div: HTMLAttributes & ReservedPropsdiv>
    </div: HTMLAttributes & ReservedPropsdiv>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";

const dragStatus = ref("Not dragging");
const valuesChanged = ref("Not sorting");
const [parent, flavors] = useDragAndDrop(
  ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  {
    onDragstart: () => {
      dragStatus.value = "Dragging";
    },
    onDragend: () => {
      dragStatus.value = "Not dragging";
      valuesChanged.value = "Not sorting";
    },
    onSort: (event) => {
      valuesChanged.value = `${event.previousValues} -> ${event.values}`;
    },
  }
);
</script>

<template>
  <div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
    <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
      <span class="antialiased">=== Rank your favorite flavors ===</span>
      <div>Drag status: {{ dragStatus }}</div>
      <div>Values changed: {{ valuesChanged }}</div>
    </div>
    <div
      ref="parent"
      class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased"
    >
      <div
        v-for="flavor in flavors"
        :key="flavor"
        class="border-2 border-indigo-300 p-2"
      >
        {{ flavor }}
      </div>
    </div>
  </div>
</template>

/** @jsxImportSource solid-js */
// Start of Selection
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function App(): JSX.ElementApp() {
  const [const dragStatus: Accessor<string>dragStatus, const setDragStatus: Setter<string>setDragStatus] = createSignal<string>(value: string, options?: SignalOptions<string> | undefined): Signal<string> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal("Not dragging");
  const [const valuesChanged: Accessor<string>valuesChanged, const setValuesChanged: Setter<string>setValuesChanged] = createSignal<string>(value: string, options?: SignalOptions<string> | undefined): Signal<string> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal("Not sorting");

  const [const parent: Setter<HTMLUListElement | null>parent, const items: Accessor<string[]>items] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    {
      onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
        const setDragStatus: <"Dragging">(value: "Dragging" | ((prev: string) => "Dragging")) => "Dragging" (+3 overloads)setDragStatus("Dragging");
      },
      onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
        const setDragStatus: <"Not dragging">(value: "Not dragging" | ((prev: string) => "Not dragging")) => "Not dragging" (+3 overloads)setDragStatus("Not dragging");
        const setValuesChanged: <"Not sorting">(value: "Not sorting" | ((prev: string) => "Not sorting")) => "Not sorting" (+3 overloads)setValuesChanged("Not sorting");
      },
      onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
        const setValuesChanged: <`${string} -> ${string}`>(value: `${string} -> ${string}` | ((prev: string) => `${string} -> ${string}`)) => `${string} -> ${string}` (+3 overloads)setValuesChanged(`${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`);
      },
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>Rank your favorite flavors</JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>{const dragStatus: () => stringdragStatus()}</JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
      <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>{const valuesChanged: () => stringvaluesChanged()}</JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items: () => string[]items()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
// Start of Selection
import { function createSignal<T>(): Signal<T | undefined> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal } from "solid-js";
import { function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor } from "solid-js";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(initValues: T[], options?: Partial<ParentConfig<T>>): [Setter<E | null>, Accessor<Store<T[]>>, ReturnType<typeof createStore>[1], (config?: Partial<ParentConfig<T>>) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop } from "@formkit/drag-and-drop/solid";

export function function App(): JSX.ElementApp() {
  const [const dragStatus: Accessor<string>dragStatus, const setDragStatus: Setter<string>setDragStatus] = createSignal<string>(value: string, options?: SignalOptions<string> | undefined): Signal<string> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal("Not dragging");
  const [const valuesChanged: Accessor<string>valuesChanged, const setValuesChanged: Setter<string>setValuesChanged] = createSignal<string>(value: string, options?: SignalOptions<string> | undefined): Signal<string> (+1 overload)Creates a simple reactive state with a getter and setter
```typescript
const [state: Accessor<T>, setState: Setter<T>] = createSignal<T>(
 value: T,
 options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
)
```
@paramvalue initial value of the state; if empty, the state's type will automatically extended with undefined; otherwise you need to extend the type manually if you want setting to undefined not be an error@paramoptions optional object with a name for debugging purposes and equals, a comparator function for the previous and next value to allow fine-grained control over the reactivity@returns```typescript
[state: Accessor<T>, setState: Setter<T>]
```
* the Accessor is merely a function that returns the current value and registers each call to the reactive root
* the Setter is a function that allows directly setting or mutating the value:
```typescript
const [count, setCount] = createSignal(0);
setCount(count => count + 1);
```@descriptionhttps://docs.solidjs.com/reference/basic-reactivity/create-signalcreateSignal("Not sorting");

  const [const parent: Setter<HTMLUListElement | null>parent, const items: Accessor<string[]>items] = useDragAndDrop<HTMLUListElement, string>(initValues: string[], options?: Partial<ParentConfig<string>>): [Setter<HTMLUListElement | null>, Accessor<string[]>, SetStoreFunction<string[]>, (config?: Partial<ParentConfig<string>> | undefined) => void]Hook for adding drag and drop/sortable support to a list of items.
@paraminitValues - Initial list of data.@paramoptions - The drag and drop configuration.@returnsuseDragAndDrop<HTMLUListElement, string>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    {
      onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
        const setDragStatus: <"Dragging">(value: "Dragging" | ((prev: string) => "Dragging")) => "Dragging" (+3 overloads)setDragStatus("Dragging");
      },
      onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
        const setDragStatus: <"Not dragging">(value: "Not dragging" | ((prev: string) => "Not dragging")) => "Not dragging" (+3 overloads)setDragStatus("Not dragging");
        const setValuesChanged: <"Not sorting">(value: "Not sorting" | ((prev: string) => "Not sorting")) => "Not sorting" (+3 overloads)setValuesChanged("Not sorting");
      },
      onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
        const setValuesChanged: <`${string} -> ${string}`>(value: `${string} -> ${string}` | ((prev: string) => `${string} -> ${string}`)) => `${string} -> ${string}` (+3 overloads)setValuesChanged(`${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`);
      },
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
      <JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>Rank your favorite flavors</JSX.HTMLElementTags.strong: JSX.HTMLAttributes<HTMLElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElementstrong>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>{const dragStatus: () => stringdragStatus()}</JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
      <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>{const valuesChanged: () => stringvaluesChanged()}</JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/span@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElementspan>
      <JSX.HTMLElementTags.br: JSX.HTMLAttributes<HTMLBRElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/br@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLBRElementbr />
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent: Setter<HTMLUListElement | null>parent}>
        <function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor each: false | string[] | null | undefinedeach={const items: () => string[]items()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/li@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLLIElementli>}</function For<T extends readonly any[], U extends JSX.Element>(props: {
    each: T | undefined | null | false;
    fallback?: JSX.Element;
    children: (item: T[number], index: Accessor<number>) => U;
}): JSX.ElementCreates a list elements from a list

it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
```typescript
<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item}</div>}
</For>
```
If you have a list with fixed indices and changing values, consider using `<Index>` instead.
@descriptionhttps://docs.solidjs.com/reference/components/forFor>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElementul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElementdiv>
  );
}

/** @jsxImportSource solid-js */
// Start of Selection
import { createSignal } from "solid-js";
import { For } from "solid-js";
import { useDragAndDrop } from "@formkit/drag-and-drop/solid";

export function App() {
  const [dragStatus, setDragStatus] = createSignal("Not dragging");
  const [valuesChanged, setValuesChanged] = createSignal("Not sorting");

  const [parent, items] = useDragAndDrop<HTMLUListElement, string>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    {
      onDragstart: () => {
        setDragStatus("Dragging");
      },
      onDragend: () => {
        setDragStatus("Not dragging");
        setValuesChanged("Not sorting");
      },
      onSort: (event) => {
        setValuesChanged(`${event.previousValues} -> ${event.values}`);
      },
    }
  );

  return (
    <div>
      <strong>Rank your favorite flavors</strong>
      <br />
      <span>{dragStatus()}</span>
      <span>{valuesChanged()}</span>
      <br />
      <ul ref={parent}>
        <For each={items()}>{(item) => <li>{item}</li>}</For>
      </ul>
    </div>
  );
}

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state = reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>(data: {
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}): Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  items: string[]items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: stringdragStatus: "Not dragging",
  valuesChanged: stringvaluesChanged: "Not sorting",
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.dragStatus: stringdragStatus}</span>
    <ul id="list">
      ${() => const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.items: string[] | Reactive<string[]>items.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(item: stringitem))}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.items: string[] | Reactive<string[]>items,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.items: string[] | Reactive<string[]>items = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.dragStatus: stringdragStatus = "Dragging";
    },
    onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.dragStatus: stringdragStatus = "Not dragging";
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.valuesChanged: stringvaluesChanged = "Not sorting";
    },
    onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.valuesChanged: stringvaluesChanged = `${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`;
    },
  },
});

import { function reactive<T>(effect: () => T): Computed<T> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive, function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop } from "@formkit/drag-and-drop";

const const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state = reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>(data: {
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}): Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive({
  items: string[]items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: stringdragStatus: "Not dragging",
  valuesChanged: stringvaluesChanged: "Not sorting",
});

function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.dragStatus: stringdragStatus}</span>
    <ul id="list">
      ${() => const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.items: string[] | Reactive<string[]>items.Array<T>.map<ArrowTemplate>(callbackfn: (value: string, index: number, array: string[]) => ArrowTemplate, thisArg?: any): ArrowTemplate[]Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((item: stringitem) => function html(strings: TemplateStringsArray | string[], ...expSlots: ArrowExpression[]): ArrowTemplatehtml`<li>${item: stringitem}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => ArrowTemplatekey(item: stringitem))}
    </ul>
  </div>
`(var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): voidInitializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoiddragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElementThe parent element that will contain the draggable nodes.parent: var document: Document**`window.document`** returns a reference to the document contained in the window.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)document.Document.getElementById(elementId: string): HTMLElement | nullThe **`getElementById()`** method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.getElementById("list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]A function that returns the values assigned to the parent.getValues: () => const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.items: string[] | Reactive<string[]>items,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => voidA function that sets the values assigned to the parent.setValues: (newValues: string[]newValues) => {
    const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.items: string[] | Reactive<string[]>items = reactive<string[]>(data: string[]): Reactive<string[]> (+1 overload)A reactive object is a proxy of the original object that allows for
reactive dependency watching. It is created by calling `reactive()` and
should be used to store reactive data in your app and components.
@paramdata - The data to make reactive, typically a plain object.@returnsA reactive proxy of the original data.reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefinedAn optional configuration object.config: {
    onDragstart?: DragstartEvent<string> | undefinedFired when a drag is started, whether native drag or syntheticonDragstart: () => {
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.dragStatus: stringdragStatus = "Dragging";
    },
    onDragend?: DragendEvent<string> | undefinedFired when a drag is ended, whether native drag or syntheticonDragend: () => {
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.dragStatus: stringdragStatus = "Not dragging";
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.valuesChanged: stringvaluesChanged = "Not sorting";
    },
    onSort?: SortEvent<string> | undefinedCallback function for when a sort operation is performed.onSort: (event: SortEventData<string>event) => {
      const state: Reactive<{
    items: string[];
    dragStatus: string;
    valuesChanged: string;
}>state.valuesChanged: stringvaluesChanged = `${event: SortEventData<string>event.SortEventData<string>.previousValues: string[]previousValues} -> ${event: SortEventData<string>event.SortEventData<string>.values: string[]values}`;
    },
  },
});

import { reactive, html } from "@arrow-js/core";
import { dragAndDrop } from "@formkit/drag-and-drop";

const state = reactive({
  items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: "Not dragging",
  valuesChanged: "Not sorting",
});

html`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${state.dragStatus}</span>
    <ul id="list">
      ${() => state.items.map((item) => html`<li>${item}</li>`.key(item))}
    </ul>
  </div>
`(document.getElementById("app")!);

dragAndDrop<string>({
  parent: document.getElementById("list")!,
  getValues: () => state.items,
  setValues: (newValues) => {
    state.items = reactive(newValues);
  },
  config: {
    onDragstart: () => {
      state.dragStatus = "Dragging";
    },
    onDragend: () => {
      state.dragStatus = "Not dragging";
      state.valuesChanged = "Not sorting";
    },
    onSort: (event) => {
      state.valuesChanged = `${event.previousValues} -> ${event.values}`;
    },
  },
});

<let/flavors=["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"]>
<let/dragStatus="Not dragging">
<let/valuesChanged="Not sorting">
<let/config={
  onDragstart: () => { dragStatus = "Dragging"; },
  onDragend: () => { dragStatus = "Not dragging"; valuesChanged = "Not sorting"; },
  onSort: (event: any) => { valuesChanged = `${event.previousValues} -> ${event.values}`; },
}>

<div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
  <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
    <span class="antialiased">=== Rank your favorite flavors ===</span>
    <div>Drag status: ${dragStatus}</div>
    <div>Values changed: ${valuesChanged}</div>
  </div>
  <div/parent class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased">
    <for|flavor| of=flavors by=(f => f)>
      <div class="border-2 border-indigo-300 p-2">${flavor}</div>
    </for>
  </div>
</div>

<dnd:=flavors parent=parent config=config/>

<let/flavors=["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"]>
<let/dragStatus="Not dragging">
<let/valuesChanged="Not sorting">
<let/config={
  onDragstart: () => { dragStatus = "Dragging"; },
  onDragend: () => { dragStatus = "Not dragging"; valuesChanged = "Not sorting"; },
  onSort: (event: any) => { valuesChanged = `${event.previousValues} -> ${event.values}`; },
}>

<div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
  <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
    <span class="antialiased">=== Rank your favorite flavors ===</span>
    <div>Drag status: ${dragStatus}</div>
    <div>Values changed: ${valuesChanged}</div>
  </div>
  <div/parent class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased">
    <for|flavor| of=flavors by=(f => f)>
      <div class="border-2 border-indigo-300 p-2">${flavor}</div>
    </for>
  </div>
</div>

<dnd:=flavors parent=parent config=config/>

<let/flavors=["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"]>
<let/dragStatus="Not dragging">
<let/valuesChanged="Not sorting">
<let/config={
  onDragstart: () => { dragStatus = "Dragging"; },
  onDragend: () => { dragStatus = "Not dragging"; valuesChanged = "Not sorting"; },
  onSort: (event: any) => { valuesChanged = `${event.previousValues} -> ${event.values}`; },
}>

<div class="border-4 p-4 border-indigo-300 dark:bg-slate-800 antialiased">
  <div class="font-oldschool mb-4 text-lg md:text-xl lg:text-2xl">
    <span class="antialiased">=== Rank your favorite flavors ===</span>
    <div>Drag status: ${dragStatus}</div>
    <div>Values changed: ${valuesChanged}</div>
  </div>
  <div/parent class="border-2 border-indigo-300 font-oldschool text-lg md:text-xl lg:text-2xl antialiased">
    <for|flavor| of=flavors by=(f => f)>
      <div class="border-2 border-indigo-300 p-2">${flavor}</div>
    </for>
  </div>
</div>

<dnd:=flavors parent=parent config=config/>

Configuration

Each parent can be passed a configuration object. This object can be used to set options like group, drag handles, and or more dynamic options such as determining which direct descendants of a list are draggable. Invocation of useDragAndDrop or dragAndDrop can be used idempotently to update the configuration for a given list.

import type {
  interface ParentRecord<T>The parent record, contains the el and the data in the `parents` weakmap.ParentRecord,
  type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState,
  interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData,
  interface NodePointerEventData<T>The data passed to the node event listener when the event is a pointer event (not a native drag event).NodePointerEventData,
  interface NodeEventData<T>The data passed to the node event listener.NodeEventData,
  type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin,
  interface PointeroverNodeEvent<T>The payload of the custom event dispatched when a node is "touched" over a
node.PointeroverNodeEvent,
  type SetupNode = <T>(data: SetupNodeData<T>) => voidSetupNode,
  interface ParentEventData<T>The data passed to the parent event listener.
@parame - The event that was triggered.@paramtargetData - The data of the target parent.ParentEventData,
  type TearDownNode = <T>(data: TearDownNodeData<T>) => voidTearDownNode,
  interface PointeroverParentEvent<T>The payload of the custom event dispatched when a node is "touched" over a
parent.PointeroverParentEvent,
  type SortEvent<T> = (data: SortEventData<T>) => voidSortEvent,
  type TransferEvent<T> = (data: TransferEventData<T>) => voidTransferEvent,
  type DragstartEvent<T> = (data: DragstartEventData<T>) => voidDragstartEvent,
  type DragendEvent<T> = (data: DragendEventData<T>) => voidDragendEvent,
  interface ParentDragEventData<T>ParentDragEventData,
  type BaseDragState<T> = {
    activeState?: {
        node: NodeRecord<T>;
        parent: ParentRecord<T>;
    };
    affectedNodes: Array<NodeRecord<T>>;
    currentTargetValue: T | undefined;
    emit: (event: string, data: unknown) => void;
    on: (event: string, callback: (data: unknown) => void) => void;
    preventSynthDrag: boolean;
    longPress: boolean;
    longPressTimeout: ReturnType<typeof setTimeout> | undefined;
    pointerDown: {
        parent: ParentRecord<T>;
        node: NodeRecord<T>;
        validated: boolean;
    } | undefined;
    originalZIndex?: string;
    ... 17 more ...;
    frameIdY?: number;
}BaseDragState,
  type NativeDragEffects = "link" | "none" | "copy" | "move"NativeDragEffects,
  interface NodeRecord<T>The node record, contains the el and the data in the `nodes` weakmap.NodeRecord,
  interface DropSwapConfig<T>DropSwapConfig,
  interface InsertConfig<T>InsertConfig,
  interface ParentData<T>The data assigned to a given parent in the `parents` weakmap.ParentData,
  interface ParentKeydownEventData<T>ParentKeydownEventData,
  type SynthDragState<T> = SynthDragStateProps & DragStateProps<T> & BaseDragState<T>The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramcurrentParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.SynthDragState,
} from "@formkit/drag-and-drop";

/**
 * The configuration object for a given parent.
 */
export interface interface ParentConfig<T>The configuration object for a given parent.ParentConfig<function (type parameter) T in ParentConfig<T>T> {
  /**
   * A function that returns whether a given parent accepts a given node.
   */
  ParentConfig<T>.accepts?: ((targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, currentParentData: ParentRecord<T>, state: BaseDragState<T>) => boolean) | undefinedA function that returns whether a given parent accepts a given node.accepts?: (
    targetParentData: ParentRecord<T>targetParentData: interface ParentRecord<T>The parent record, contains the el and the data in the `parents` weakmap.ParentRecord<function (type parameter) T in ParentConfig<T>T>,
    initialParentData: ParentRecord<T>initialParentData: interface ParentRecord<T>The parent record, contains the el and the data in the `parents` weakmap.ParentRecord<function (type parameter) T in ParentConfig<T>T>,
    currentParentData: ParentRecord<T>currentParentData: interface ParentRecord<T>The parent record, contains the el and the data in the `parents` weakmap.ParentRecord<function (type parameter) T in ParentConfig<T>T>,
    state: BaseDragState<T>state: type BaseDragState<T> = {
    activeState?: {
        node: NodeRecord<T>;
        parent: ParentRecord<T>;
    };
    affectedNodes: Array<NodeRecord<T>>;
    currentTargetValue: T | undefined;
    emit: (event: string, data: unknown) => void;
    on: (event: string, callback: (data: unknown) => void) => void;
    preventSynthDrag: boolean;
    longPress: boolean;
    longPressTimeout: ReturnType<typeof setTimeout> | undefined;
    pointerDown: {
        parent: ParentRecord<T>;
        node: NodeRecord<T>;
        validated: boolean;
    } | undefined;
    originalZIndex?: string;
    ... 17 more ...;
    frameIdY?: number;
}BaseDragState<function (type parameter) T in ParentConfig<T>T>
  ) => boolean;

  /**
   * The data transfer effect to use for the drag operation.
   */
  ParentConfig<T>.dragEffectAllowed: NativeDragEffectsThe data transfer effect to use for the drag operation.dragEffectAllowed: type NativeDragEffects = "link" | "none" | "copy" | "move"NativeDragEffects;
  /**
   * The data transfer effect to use for the drag operation.
   */
  ParentConfig<T>.dragDropEffect: NativeDragEffectsThe data transfer effect to use for the drag operation.dragDropEffect: type NativeDragEffects = "link" | "none" | "copy" | "move"NativeDragEffects;
  /**
   * A function that returns the image to use for the drag operation. This is
   * invoked for native operations. The clonedNode is what will be set as the drag
   * image, but this can be updated.
   */
  ParentConfig<T>.dragImage?: ((data: NodeDragEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement) | undefinedA function that returns the image to use for the drag operation. This is
invoked for native operations. The clonedNode is what will be set as the drag
image, but this can be updated.dragImage?: (
    data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>,
    draggedNodes: NodeRecord<T>[]draggedNodes: interface Array<T>Array<interface NodeRecord<T>The node record, contains the el and the data in the `nodes` weakmap.NodeRecord<function (type parameter) T in ParentConfig<T>T>>
  ) => HTMLElement;
  /**
   * A flag to disable dragability of all nodes in the parent.
   */
  ParentConfig<T>.disabled?: boolean | undefinedA flag to disable dragability of all nodes in the parent.disabled?: boolean;
  /**
   * A selector for the drag handle. Will search at any depth within the
   * draggable element.
   */
  ParentConfig<T>.dragHandle?: string | undefinedA selector for the drag handle. Will search at any depth within the
draggable element.dragHandle?: string;
  /**
   * External drag handle
   */
  ParentConfig<T>.externalDragHandle?: {
    el: HTMLElement;
    callback: () => HTMLElement;
} | undefinedExternal drag handleexternalDragHandle?: {
    el: HTMLElementel: HTMLElement;
    callback: () => HTMLElementcallback: () => HTMLElement;
  };
  /**
   * A function that returns whether a given node is draggable.
   */
  ParentConfig<T>.draggable?: ((child: HTMLElement) => boolean) | undefinedA function that returns whether a given node is draggable.draggable?: (child: HTMLElementchild: HTMLElement) => boolean;
  /**
   * A function that returns whether a given value is draggable
   */
  ParentConfig<T>.draggableValue?: ((values: T) => boolean) | undefinedA function that returns whether a given value is draggabledraggableValue?: (values: Tvalues: function (type parameter) T in ParentConfig<T>T) => boolean;
  ParentConfig<T>.draggedNodes: (pointerDown: {
    parent: ParentRecord<T>;
    node: NodeRecord<T>;
}) => Array<NodeRecord<T>>draggedNodes: (pointerDown: {
    parent: ParentRecord<T>;
    node: NodeRecord<T>;
}pointerDown: {
    parent: ParentRecord<T>parent: interface ParentRecord<T>The parent record, contains the el and the data in the `parents` weakmap.ParentRecord<function (type parameter) T in ParentConfig<T>T>;
    node: NodeRecord<T>node: interface NodeRecord<T>The node record, contains the el and the data in the `nodes` weakmap.NodeRecord<function (type parameter) T in ParentConfig<T>T>;
  }) => interface Array<T>Array<interface NodeRecord<T>The node record, contains the el and the data in the `nodes` weakmap.NodeRecord<function (type parameter) T in ParentConfig<T>T>>;
  /**
   * The class to add to a node when it is being dragged.
   */
  ParentConfig<T>.draggingClass?: string | undefinedThe class to add to a node when it is being dragged.draggingClass?: string;
  /**
   * Accepts array of "dragged nodes" and applies dragstart classes to them.
   */
  ParentConfig<T>.dragstartClasses: (node: NodeRecord<T>, nodes: Array<NodeRecord<T>>, config: ParentConfig<T>, isSynthDrag?: boolean) => voidAccepts array of "dragged nodes" and applies dragstart classes to them.dragstartClasses: (
    node: NodeRecord<T>node: interface NodeRecord<T>The node record, contains the el and the data in the `nodes` weakmap.NodeRecord<function (type parameter) T in ParentConfig<T>T>,
    nodes: NodeRecord<T>[]nodes: interface Array<T>Array<interface NodeRecord<T>The node record, contains the el and the data in the `nodes` weakmap.NodeRecord<function (type parameter) T in ParentConfig<T>T>>,
    config: ParentConfig<T>config: interface ParentConfig<T>The configuration object for a given parent.ParentConfig<function (type parameter) T in ParentConfig<T>T>,
    isSynthDrag: boolean | undefinedisSynthDrag?: boolean
  ) => void;
  // When drag starts, this will be applied to the dragged node(s) (not their
  // representations being dragged) on dragstart. This will remain on the nodes
  // until the drag ends.
  ParentConfig<T>.dragPlaceholderClass?: string | undefineddragPlaceholderClass?: string;
  /**
   * The configuration object for the drop and swap plugin.
   */
  ParentConfig<T>.dropSwapConfig?: DropSwapConfig<T> | undefinedThe configuration object for the drop and swap plugin.dropSwapConfig?: interface DropSwapConfig<T>DropSwapConfig<function (type parameter) T in ParentConfig<T>T>;
  /**
   * The class to add to a node when the node is dragged over it.
   */
  ParentConfig<T>.dropZoneClass?: string | undefinedThe class to add to a node when the node is dragged over it.dropZoneClass?: string;
  /**
   * The class to add to a parent when it is dragged over.
   */
  ParentConfig<T>.dropZoneParentClass?: string | undefinedThe class to add to a parent when it is dragged over.dropZoneParentClass?: string;
  /**
   * A flag to indicate whether the parent itself is a dropZone.
   */
  ParentConfig<T>.dropZone?: boolean | undefinedA flag to indicate whether the parent itself is a dropZone.dropZone?: boolean;
  /**
   * The group that the parent belongs to. This is used for allowing multiple
   * parents to transfer nodes between each other.
   */
  ParentConfig<T>.group?: string | undefinedThe group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.group?: string;
  ParentConfig<T>.handleParentFocus: (data: ParentEventData<T>, state: BaseDragState<T>) => voidhandleParentFocus: (
    data: ParentEventData<T>data: interface ParentEventData<T>The data passed to the parent event listener.
@parame - The event that was triggered.@paramtargetData - The data of the target parent.ParentEventData<function (type parameter) T in ParentConfig<T>T>,
    state: BaseDragState<T>state: type BaseDragState<T> = {
    activeState?: {
        node: NodeRecord<T>;
        parent: ParentRecord<T>;
    };
    affectedNodes: Array<NodeRecord<T>>;
    currentTargetValue: T | undefined;
    emit: (event: string, data: unknown) => void;
    on: (event: string, callback: (data: unknown) => void) => void;
    preventSynthDrag: boolean;
    longPress: boolean;
    longPressTimeout: ReturnType<typeof setTimeout> | undefined;
    pointerDown: {
        parent: ParentRecord<T>;
        node: NodeRecord<T>;
        validated: boolean;
    } | undefined;
    originalZIndex?: string;
    ... 17 more ...;
    frameIdY?: number;
}BaseDragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  ParentConfig<T>.handleNodeKeydown: (data: NodeEventData<T>, state: DragState<T>) => voidhandleNodeKeydown: (data: NodeEventData<T>data: interface NodeEventData<T>The data passed to the node event listener.NodeEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;

  /**
   * Function that is called when dragend or touchend event occurs.
   */
  ParentConfig<T>.handleDragend: (data: NodeDragEventData<T>, state: DragState<T>) => voidFunction that is called when dragend or touchend event occurs.handleDragend: (data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when dragstart event occurs.
   */
  ParentConfig<T>.handleDragstart: (data: NodeDragEventData<T>, state: DragState<T>) => voidFunction that is called when dragstart event occurs.handleDragstart: (data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  ParentConfig<T>.handleEnd: (state: DragState<T> | SynthDragState<T>) => voidhandleEnd: (state: DragState<T> | SynthDragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T> | type SynthDragState<T> = SynthDragStateProps & DragStateProps<T> & BaseDragState<T>The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramcurrentParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.SynthDragState<function (type parameter) T in ParentConfig<T>T>) => void;
  ParentConfig<T>.handleNodeDrop: (data: NodeDragEventData<T>, state: DragState<T>) => voidhandleNodeDrop: (data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  ParentConfig<T>.handleNodePointerup: (data: NodePointerEventData<T>, state: DragState<T>) => voidhandleNodePointerup: (
    data: NodePointerEventData<T>data: interface NodePointerEventData<T>The data passed to the node event listener when the event is a pointer event (not a native drag event).NodePointerEventData<function (type parameter) T in ParentConfig<T>T>,
    state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  ParentConfig<T>.handleParentScroll: (data: ParentEventData<T>, state: DragState<T> | BaseDragState<T> | SynthDragState<T>) => voidhandleParentScroll: (
    data: ParentEventData<T>data: interface ParentEventData<T>The data passed to the parent event listener.
@parame - The event that was triggered.@paramtargetData - The data of the target parent.ParentEventData<function (type parameter) T in ParentConfig<T>T>,
    state: BaseDragState<T> | DragState<T> | SynthDragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T> | type BaseDragState<T> = {
    activeState?: {
        node: NodeRecord<T>;
        parent: ParentRecord<T>;
    };
    affectedNodes: Array<NodeRecord<T>>;
    currentTargetValue: T | undefined;
    emit: (event: string, data: unknown) => void;
    on: (event: string, callback: (data: unknown) => void) => void;
    preventSynthDrag: boolean;
    longPress: boolean;
    longPressTimeout: ReturnType<typeof setTimeout> | undefined;
    pointerDown: {
        parent: ParentRecord<T>;
        node: NodeRecord<T>;
        validated: boolean;
    } | undefined;
    originalZIndex?: string;
    ... 17 more ...;
    frameIdY?: number;
}BaseDragState<function (type parameter) T in ParentConfig<T>T> | type SynthDragState<T> = SynthDragStateProps & DragStateProps<T> & BaseDragState<T>The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramcurrentParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.SynthDragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * Function that is called when a dragenter event is triggered on the node.
   */
  ParentConfig<T>.handleNodeDragenter: (data: NodeDragEventData<T>, state: DragState<T>) => voidFunction that is called when a dragenter event is triggered on the node.handleNodeDragenter: (
    data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>,
    state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  ParentConfig<T>.handleNodeBlur: (data: NodeEventData<T>, state: DragState<T>) => voidhandleNodeBlur: (data: NodeEventData<T>data: interface NodeEventData<T>The data passed to the node event listener.NodeEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  ParentConfig<T>.handleNodeFocus: (data: NodeEventData<T>, state: DragState<T>) => voidhandleNodeFocus: (data: NodeEventData<T>data: interface NodeEventData<T>The data passed to the node event listener.NodeEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Dragleave event on node
   */
  ParentConfig<T>.handleNodeDragleave: (data: NodeDragEventData<T>, state: DragState<T>) => voidDragleave event on nodehandleNodeDragleave: (
    data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>,
    state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * Function that is called when a dragover event is triggered on the parent.
   */
  ParentConfig<T>.handleParentDragover: (data: ParentDragEventData<T>, state: DragState<T>) => voidFunction that is called when a dragover event is triggered on the parent.handleParentDragover: (
    data: ParentDragEventData<T>data: interface ParentDragEventData<T>ParentDragEventData<function (type parameter) T in ParentConfig<T>T>,
    state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * Drop event on parent
   */
  ParentConfig<T>.handleParentDrop: (data: ParentDragEventData<T>, state: DragState<T>) => voidDrop event on parenthandleParentDrop: (data: ParentDragEventData<T>data: interface ParentDragEventData<T>ParentDragEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when a dragover event is triggered on a node.
   */
  ParentConfig<T>.handleNodeDragover: (data: NodeDragEventData<T>, state: DragState<T>) => voidFunction that is called when a dragover event is triggered on a node.handleNodeDragover: (data: NodeDragEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T>, state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>) => void;
  ParentConfig<T>.handlePointercancel: (data: NodeDragEventData<T> | NodePointerEventData<T>, state: DragState<T> | SynthDragState<T> | BaseDragState<T>) => voidhandlePointercancel: (
    data: NodeDragEventData<T> | NodePointerEventData<T>data: interface NodeDragEventData<T>The data passed to the node event listener when the event is a drag event.NodeDragEventData<function (type parameter) T in ParentConfig<T>T> | interface NodePointerEventData<T>The data passed to the node event listener when the event is a pointer event (not a native drag event).NodePointerEventData<function (type parameter) T in ParentConfig<T>T>,
    state: BaseDragState<T> | DragState<T> | SynthDragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T> | type SynthDragState<T> = SynthDragStateProps & DragStateProps<T> & BaseDragState<T>The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramcurrentParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.SynthDragState<function (type parameter) T in ParentConfig<T>T> | type BaseDragState<T> = {
    activeState?: {
        node: NodeRecord<T>;
        parent: ParentRecord<T>;
    };
    affectedNodes: Array<NodeRecord<T>>;
    currentTargetValue: T | undefined;
    emit: (event: string, data: unknown) => void;
    on: (event: string, callback: (data: unknown) => void) => void;
    preventSynthDrag: boolean;
    longPress: boolean;
    longPressTimeout: ReturnType<typeof setTimeout> | undefined;
    pointerDown: {
        parent: ParentRecord<T>;
        node: NodeRecord<T>;
        validated: boolean;
    } | undefined;
    originalZIndex?: string;
    ... 17 more ...;
    frameIdY?: number;
}BaseDragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /*
   * Function that is called when a pointerdown is triggered on node.
   */
  ParentConfig<T>.handleNodePointerdown: (data: NodePointerEventData<T>, state: DragState<T>) => voidhandleNodePointerdown: (
    data: NodePointerEventData<T>data: interface NodePointerEventData<T>The data passed to the node event listener when the event is a pointer event (not a native drag event).NodePointerEventData<function (type parameter) T in ParentConfig<T>T>,
    state: DragState<T>state: type DragState<T> = DragStateProps<T> & BaseDragState<T>DragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * Function that is called when a node that is being moved by touchmove event
   * is over a given node (similar to dragover).
   */
  ParentConfig<T>.handleNodePointerover: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => voidFunction that is called when a node that is being moved by touchmove event
is over a given node (similar to dragover).handleNodePointerover: (
    data: PointeroverNodeEvent<T>data: interface PointeroverNodeEvent<T>The payload of the custom event dispatched when a node is "touched" over a
node.PointeroverNodeEvent<function (type parameter) T in ParentConfig<T>T>,
    state: SynthDragState<T>state: type SynthDragState<T> = SynthDragStateProps & DragStateProps<T> & BaseDragState<T>The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramcurrentParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.SynthDragState<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * Function that is called when a node that is being moved by touchmove event
   * is over the parent (similar to dragover).
   */
  ParentConfig<T>.handleParentPointerover: (e: PointeroverParentEvent<T>, state: SynthDragState<T>) => voidFunction that is called when a node that is being moved by touchmove event
is over the parent (similar to dragover).handleParentPointerover: (
    e: PointeroverParentEvent<T>e: interface PointeroverParentEvent<T>The payload of the custom event dispatched when a node is "touched" over a
parent.PointeroverParentEvent<function (type parameter) T in ParentConfig<T>T>,
    state: SynthDragState<T>state: type SynthDragState<T> = SynthDragStateProps & DragStateProps<T> & BaseDragState<T>The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramcurrentParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.SynthDragState<function (type