grab cursor

A tinydata-first library
for modern apps

Get Started
npm i@formkit/drag-and-drop
  • Data-first

    No direct DOM manipulations.

  • Lightweight

    ~4kb min-gzip. No dependencies.

  • Modern

    Leverages modern web APIs.

  • Plugins

    Multi-drag, animations, and more.

  • TypeScript

    First-class TypeScript support.

  • Production-ready

    Used on FormKit Pro inputs.

AI-Generated forms in seconds.

KickStart your next FormKit form in seconds. Generate from a prompt, image, or text attachment. Copy & paste as Vue components or FormKit schema.

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:

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 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 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
        <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}
        </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 ref?: VNodeRef | undefinedref="const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const tape: stringtape" HTMLAttributes.class?: anyclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</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.Element
Creates 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/for
For, 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);

  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>
        )}
      </
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.Element
Creates 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/for
For>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
  );
};

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    tapes: string[];
}>
state = 
reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    tapes: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <ul id="cassettes">
    ${() =>
      
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(tape: stringtape)
      )}
  </ul>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
});
FormKit Office Jams
  • Depeche ModeCassette Tape
  • Duran DuranCassette Tape
  • Pet Shop BoysCassette Tape
  • KraftwerkCassette Tape
  • Tears for FearsCassette Tape
  • Spandau BalletCassette Tape
["Depeche Mode","Duran Duran","Pet Shop Boys","Kraftwerk","Tears for Fears","Spandau Ballet"]

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 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)
id !== "no-drag";
      },
    }
  );
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
        <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}
        </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
      <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.id?: string | undefinedid="no-drag">I am NOT draggable</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
      return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

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

<template>
  <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const parent: Ref<HTMLElement | undefined, HTMLElement | undefined>parent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[], string[]>tapes" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const tape: stringtape" HTMLAttributes.class?: anyclass="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>

/** @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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    [
      "Depeche Mode",
      "Duran Duran",
      "Pet Shop Boys",
      "Kraftwerk",
      "Tears for Fears",
      "Spandau Ballet",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

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

  return (
    <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const tapes: () => string[]tapes()}>
        {(tape: stringtape) => (
          <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
            {tape: stringtape}
          </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>
        )}
      </
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.Element
Creates 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/for
For>
      <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div JSX.HTMLAttributes<HTMLDivElement>.id?: string | undefinedid="no-drag">I am NOT draggable</JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
    </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    tapes: string[];
}>
state = 
reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    tapes: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive({
  tapes: string[]tapes: [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <ul id="cassettes">
    ${() =>
      
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(tape: stringtape)
      )}
    <div id="no-drag">I am NOT draggable</div>
  </ul>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
      return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/id)
id !== "no-drag";
    },
  },
});
FormKit Office Jams
  • Depeche ModeCassette Tape
  • Duran DuranCassette Tape
  • Pet Shop BoysCassette Tape
  • KraftwerkCassette Tape
  • Tears for FearsCassette Tape
  • Spandau BalletCassette Tape
  • I am NOT draggable
["Depeche Mode","Duran Duran","Pet Shop Boys","Kraftwerk","Tears for Fears","Spandau Ballet"]

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 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } 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>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { group?: string | undefined
The 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>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList" }
  );
  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The 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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The 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?: anyclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const todo: stringtodo" HTMLAttributes.class?: anyclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const done: stringdone" HTMLAttributes.class?: anyclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { group?: string | undefined
The 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { group?: string | undefined
The 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>div JSX.HTMLAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state = 
reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The 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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
  },
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
          const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

ToDos

  • Schedule perm
  • Rewind VHS tapes
  • Make change for the arcade
  • Get disposable camera developed
  • Learn C++
  • Return Nintendo Power Glove
["Schedule perm","Rewind VHS tapes","Make change for the arcade","Get disposable camera developed","Learn C++","Return Nintendo Power Glove"]

Complete

  • Pickup new mix-tape from Beth
["Pickup new mix-tape from Beth"]

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 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } 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>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    { 
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable: false
    }
  );
  const [const doneList: React.RefObject<HTMLUListElement>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    { 
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable: false
    }
  );
  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
  sortable?: boolean | undefined
Flag 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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
  sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable: false,
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: anyclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const todo: stringtodo" HTMLAttributes.class?: anyclass="kanban-item">
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const done: stringdone" HTMLAttributes.class?: anyclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      sortable?: boolean | undefined
Flag 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable: false,
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div JSX.HTMLAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-item">{todo: stringtodo}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-item">{done: stringdone}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state = 
reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
    sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable: false,
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
    sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable: false,
  },
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
          const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

ToDos

  • Schedule perm
  • Rewind VHS tapes
  • Make change for the arcade
  • Get disposable camera developed
  • Learn C++
  • Return Nintendo Power Glove
["Schedule perm","Rewind VHS tapes","Make change for the arcade","Get disposable camera developed","Learn C++","Return Nintendo Power Glove"]

Complete

  • Pickup new mix-tape from Beth
["Pickup new mix-tape from Beth"]

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 
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>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } from "@formkit/drag-and-drop/react";

export default function function myComponent(): React.JSX.ElementmyComponent() {
  const [const source: React.RefObject<HTMLUListElement>source, const items1: string[]items1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt",],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

[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 optional
Partial<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<...>) => boolean) | undefined
A 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<HTMLElement>target2.React.RefObject<HTMLElement>.current: HTMLElement | null
The current value of the ref.
current) {
      return false;
    }
    return const items2: string[]items2.Array<string>.length: number
Gets 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 optional
Partial<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<...>) => boolean) | undefined
A 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<HTMLElement>target1.React.RefObject<HTMLElement>.current: HTMLElement | null
The current value of the ref.
current) {
      return false;
    }
    return const items3: string[]items3.Array<string>.length: number
Gets 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<HTMLElement>target1, const items2: string[]items2] = useDragAndDrop<HTMLElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop(["knight.bmp", "dragon.bmp"], const config1: Partial<ParentConfig<string>>config1);
  const [const target2: React.RefObject<HTMLElement>target2, const items3: string[]items3] = useDragAndDrop<HTMLElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop(["brick.bmp", "moss.bmp"], const config2: Partial<ParentConfig<string>>config2);

  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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="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) => (
          <JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>

      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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="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) => (
          <JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.Attributes.key?: React.Key | null | undefinedkey={item: stringitem}>{item: stringitem}</JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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<...>) => boolean) | undefined
A 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 optional
Partial<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<...>) => boolean) | undefined
A 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: number
Gets 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 optional
Partial<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<...>) => boolean) | undefined
A 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: number
Gets 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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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?: anyclass="flex justify-between">
      <div: HTMLAttributes & ReservedPropsdiv>
        <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="source: HTMLElement | undefinedsource">
          <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in items1: string[]items1" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const item: stringitem">{{ const item: stringitem }}</li: LiHTMLAttributes & ReservedPropsli>
        </ul: HTMLAttributes & ReservedPropsul>
      </div: HTMLAttributes & ReservedPropsdiv>
      <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: anyclass="flex flex-col">
        <div: HTMLAttributes & ReservedPropsdiv>
          <h5: HTMLAttributes & ReservedPropsh5>I can accept up to three items</h5: HTMLAttributes & ReservedPropsh5>
          <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="target1: HTMLElement | undefinedtarget1" HTMLAttributes.class?: anyclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in items2: string[]items2" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="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 ref?: VNodeRef | undefinedref="target2: HTMLElement | undefinedtarget2" HTMLAttributes.class?: anyclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in items3: string[]items3" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="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>

/** @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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    [
      "dungeon_master.exe",
      "map_1.dat",
      "map_2.dat",
      "character1.txt",
      "character2.txt",
      "shell32.dll",
      "README.txt",
    ],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

[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 optional
Partial<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<...>) => boolean) | undefined
A 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;
}
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<string>.el: HTMLElementel === const target2: Setter<HTMLElement | null> & HTMLElementtarget2
    ) {
      return false;
    }
    return const items2: () => string[]items2().Array<string>.length: number
Gets 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 optional
Partial<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<...>) => boolean) | undefined
A 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;
}
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<string>.el: HTMLElementel === const target1: Setter<HTMLElement | null> & HTMLElementtarget1
    ) {
      return false;
    }
    return const items3: () => string[]items3().Array<string>.length: number
Gets 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>> | undefined): [Setter<HTMLElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop(
    ["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>> | undefined): [Setter<HTMLElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop(["brick.bmp", "moss.bmp"], const config2: Partial<ParentConfig<string>>config2);

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const items1: () => string[]items1()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}</
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const items2: () => string[]items2()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}</
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const items3: () => string[]items3()}>{(item: stringitem) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>{item: stringitem}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}</
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state = 
reactive<{
    items1: string[];
    items2: string[];
    items3: string[];
}>(data: {
    items1: string[];
    items2: string[];
    items3: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("source")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items1: ReactiveProxy<string[]>items1,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items1: ReactiveProxy<string[]>items1 = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<...>) => boolean) | undefined
A function that returns whether a given parent accepts a given node.
accepts: () => {
      return true;
    },
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("target1")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items2: ReactiveProxy<string[]>items2,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items2: ReactiveProxy<string[]>items2 = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<...>) => boolean) | undefined
A function that returns whether a given parent accepts a given node.
accepts: () => {
      return 
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items1: ReactiveProxy<string[]>items1.Array<T>.length: number
Gets 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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("target2")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items3: ReactiveProxy<string[]>items3,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items3: ReactiveProxy<string[]>items3 = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    accepts?: ((targetParentData: ParentRecord<string>, initialParentData: ParentRecord<string>, currentParentData: ParentRecord<string>, state: BaseDragState<...>) => boolean) | undefined
A function that returns whether a given parent accepts a given node.
accepts: () => {
      return 
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items1: ReactiveProxy<string[]>items1.Array<T>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.
length < 3;
    },
  },
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div>
    <ul id="source">
      ${
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items1: ReactiveProxy<string[]>items1.Array<string>.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) => const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li>${item: stringitem}</li>`)}
    </ul>
    <div>
      <h5>I can accept up to three items</h5>
      <ul id="target1">
        ${
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items2: ReactiveProxy<string[]>items2.Array<string>.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) => const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li>${item: stringitem}</li>`)}
      </ul>
      <h5>I can accept up to five items</h5>
      <ul id="target2">
        ${
const state: ReactiveProxy<{
    items1: string[];
    items2: string[];
    items3: string[];
}>
state.items2: ReactiveProxy<string[]>items2.Array<string>.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) => const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li>${item: stringitem}</li>`)}
      </ul>
    </div>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);
  • dungeon_master.exe
  • map_1.dat
  • map_2.dat
  • character1.txt
  • character2.txt
  • shell32.dll
  • README.txt
I can accept 3 items
  • knight.bmp
  • dragon.bmp
I can accept 5 items.
  • brick.bmp
  • moss.bmp

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 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } 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>todoList, const todos: string[]todos] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      dragHandle?: string | undefined
A selector for the drag handle. Will search at any depth within the
draggable element.
dragHandle: ".kanban-handle"
    }
  );
  const [const doneList: React.RefObject<HTMLUListElement>doneList, const dones: string[]dones] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      dragHandle?: string | undefined
A selector for the drag handle. Will search at any depth within the
draggable element.
dragHandle: ".kanban-handle"
    }
  );
  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="kanban-board">
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}>
            <JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-handle"></JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
            {todo: stringtodo}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}>
            <JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span React.HTMLAttributes<T>.className?: string | undefinedclassName="kanban-handle"></JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
            {done: stringdone}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
  dragHandle?: string | undefined
A 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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
  dragHandle?: string | undefined
A selector for the drag handle. Will search at any depth within the
draggable element.
dragHandle: ".kanban-handle",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: anyclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const todoList: Ref<HTMLElement | undefined, HTMLElement | undefined>todoList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[], string[]>todos" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const todo: stringtodo" HTMLAttributes.class?: anyclass="kanban-item">
        <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: anyclass="kanban-handle"></span: HTMLAttributes & ReservedPropsspan>
        {{ const todo: stringtodo }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const doneList: Ref<HTMLElement | undefined, HTMLElement | undefined>doneList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[], string[]>dones" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const done: stringdone" HTMLAttributes.class?: anyclass="kanban-item">
        <span: HTMLAttributes & ReservedPropsspan HTMLAttributes.class?: anyclass="kanban-handle"></span: HTMLAttributes & ReservedPropsspan>
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const todoItems: string[]todoItems,
    {
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      dragHandle?: string | undefined
A 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const doneItems: string[]doneItems,
    {
      group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
      dragHandle?: string | undefined
A selector for the drag handle. Will search at any depth within the
draggable element.
dragHandle: ".kanban-handle",
    }
  );

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div JSX.HTMLAttributes<HTMLDivElement>.class?: string | undefinedclass="kanban-board">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const todoList: Setter<HTMLUListElement | null>todoList} JSX.HTMLAttributes<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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const todos: () => string[]todos()}>
          {(todo: stringtodo) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-item">
              <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>span JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-handle"></JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>span>
              {todo: stringtodo}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>
          )}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const doneList: Setter<HTMLUListElement | null>doneList} JSX.HTMLAttributes<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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const dones: () => string[]dones()}>
          {(done: stringdone) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-item">
              <JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>span JSX.HTMLAttributes<T>.class?: string | undefinedclass="kanban-handle"></JSX.HTMLElementTags.span: JSX.HTMLAttributes<HTMLSpanElement>span>
              {done: stringdone}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>
          )}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state = 
reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("todo-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
    dragHandle?: string | undefined
A 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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("done-list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group: "todoList",
    dragHandle?: string | undefined
A selector for the drag handle. Will search at any depth within the
draggable element.
dragHandle: ".kanban-handle",
  },
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div class="kanban-board">
    <ul class="kanban-column" id="todo-list">
      ${() =>
        
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
          const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
            <li class="kanban-item">
              <span class="kanban-handle"></span>
              ${todo: stringtodo}
            </li>
          `.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-column" id="done-list">
      ${
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
          <li class="kanban-item">
            <span class="kanban-handle"></span>
            ${done: stringdone}
          </li>
        `.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

ToDos

  • Schedule perm
  • Rewind VHS tapes
  • Make change for the arcade
  • Get disposable camera developed
  • Learn C++
  • Return Nintendo Power Glove
["Schedule perm","Rewind VHS tapes","Make change for the arcade","Get disposable camera developed","Learn C++","Return Nintendo Power Glove"]

Complete

  • Pickup new mix-tape from Beth
  • Implement drag handles
["Pickup new mix-tape from Beth","Implement drag handles"]

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 
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>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } from "@formkit/drag-and-drop/react";

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement>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>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<
    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 | undefined
A flag to disable dragability of all nodes in the parent.
disabled: !const disabled: booleandisabled });
  };
  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <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
      </JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
A 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 ref?: VNodeRef | undefinedref="const parentRef: Ref<HTMLElement | undefined, HTMLElement | undefined>parentRef">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const values: Ref<string[], string[]>values" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const tape: stringtape" HTMLAttributes.class?: anyclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
  <button: ButtonHTMLAttributes & ReservedPropsbutton HTMLAttributes.id?: string | undefinedid="no-drag" @onClick?: ((payload: MouseEvent) => void) | undefinedclick="function toggleDisabled(): voidtoggleDisabled">
    {{ const disabled: Ref<boolean, boolean>disabled ? "Enable" : "Disable" }} drag and drop
  </button: ButtonHTMLAttributes & ReservedPropsbutton>
</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-signal
createSignal } 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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<
    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-signal
createSignal(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 | undefined
A flag to disable dragability of all nodes in the parent.
disabled: !const disabled: () => booleandisabled() });
  };

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul 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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const values: () => string[]values()}>
          {(tape: stringtape) => (
            <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<HTMLLIElement>.class?: string | undefinedclass="cassette" data-label: stringdata-label={tape: stringtape}>
              {tape: stringtape}
            </JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>
          )}
        </
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.button: JSX.ButtonHTMLAttributes<HTMLButtonElement>button 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>button>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop, function updateConfig<T>(parent: HTMLElement, config: Partial<ParentConfig<T>>): void
Utility function to update parent config.
@paramparent - The parent element.@paramconfig - The config to update.@returnsvoid
updateConfig } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state = 
reactive<{
    tapes: string[];
    disabled: boolean;
}>(data: {
    tapes: string[];
    disabled: boolean;
}, state?: ReactiveProxyState): ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
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: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state.disabled: booleandisabled = !
const state: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state.disabled: booleandisabled;

  updateConfig<unknown>(parent: HTMLElement, config: Partial<ParentConfig<unknown>>): void
Utility function to update parent config.
@paramparent - The parent element.@paramconfig - The config to update.@returnsvoid
updateConfig(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("cassettes")!, {
    disabled?: boolean | undefined
A flag to disable dragability of all nodes in the parent.
disabled: !
const state: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state.disabled: booleandisabled,
  });
}

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <ul id="cassettes">
    ${
const state: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state.tapes: ReactiveProxy<string[]>tapes.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
      const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(tape: stringtape)
    )}
  </ul>
  <button onclick=${function toggleDisabled(): voidtoggleDisabled}>Toggle Disabled</button>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("cassettes")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state.tapes: ReactiveProxy<string[]>tapes,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    tapes: string[];
    disabled: boolean;
}>
state.tapes: ReactiveProxy<string[]>tapes = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
});
FormKit Office Jams
  • Depeche ModeCassette Tape
  • Duran DuranCassette Tape
  • PetCassette Tape
  • KraftwerkCassette Tape
  • Tears for FearsCassette Tape
  • Spandau BalletCassette Tape

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 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [React.RefObject<E>, T[], React.Dispatch<React.SetStateAction<T[]>>, (config: Partial<ParentConfig<...>>) => 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.@returns
useDragAndDrop } 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>parent1, const files1: string[]files1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const mockFileNames: string[]mockFileNames,
    {
      group?: string | undefined
The 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 | undefinedselectedClass: "bg-blue-500 text-white",
    }
  );
  const [const parent2: React.RefObject<HTMLUListElement>parent2, const files2: string[]files2] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => 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.@returns
useDragAndDrop<HTMLUListElement, string>([], {
    group?: string | undefined
The 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 | undefinedselectedClass: "bg-blue-500 text-white",
  });

  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="file-manager">
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows 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>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) => (
          <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}
          </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
        ))}
      </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The 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 | undefinedselectedClass: "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>>> | undefined): [Ref<HTMLElement | undefined, HTMLElement | undefined>, Ref<...>, (config: Partial<...>) => 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 | undefined
The 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 | undefinedselectedClass: "bg-blue-500 text-white",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: anyclass="file-manager">
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="parent1: HTMLElement | undefinedparent1" HTMLAttributes.class?: anyclass="file-list">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in files1: string[]files1" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const item: stringitem" HTMLAttributes.class?: anyclass="file">
        {{ const item: stringitem }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="parent2: HTMLElement | undefinedparent2" HTMLAttributes.class?: anyclass="file-list">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const item: neveritem in files2: never[]files2" key?: PropertyKey | undefined:key?: PropertyKey | undefinedkey="const item: neveritem" HTMLAttributes.class?: anyclass="file">
        {{ const item: neveritem }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</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.Element
Creates 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/for
For } 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.@returns
useDragAndDrop } 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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>(
    const mockFileNames: string[]mockFileNames,
    {
      group?: string | undefined
The 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 | undefinedselectedClass: "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>> | undefined): [Setter<HTMLUListElement | null>, Accessor<...>, SetStoreFunction<...>, (config?: Partial<...> | 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.@returns
useDragAndDrop<HTMLUListElement, string>([], {
    group?: string | undefined
The 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 | undefinedselectedClass: "bg-blue-500 text-white",
  });

  return (
    <JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div JSX.HTMLAttributes<HTMLDivElement>.class?: string | undefinedclass="file-manager">
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent1: Setter<HTMLUListElement | null>parent1} JSX.HTMLAttributes<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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const files1: () => string[]files1()}>{(file: stringfile) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="file">{file: stringfile}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}</
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
      <JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul ref?: HTMLUListElement | ((el: HTMLUListElement) => void) | undefinedref={const parent2: Setter<HTMLUListElement | null>parent2} JSX.HTMLAttributes<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.Element
Creates 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/for
For each: false | string[] | null | undefinedeach={const files2: () => string[]files2()}>{(file: stringfile) => <JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li JSX.HTMLAttributes<T>.class?: string | undefinedclass="file">{file: stringfile}</JSX.HTMLElementTags.li: JSX.LiHTMLAttributes<HTMLLIElement>li>}</
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.Element
Creates 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/for
For>
      </JSX.HTMLElementTags.ul: JSX.HTMLAttributes<HTMLUListElement>ul>
    </JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>div>
  );
}

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState) => ReactiveProxy<T>
reactive is an alias for r
reactive, const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html } from "@arrow-js/core";
import { function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const 
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state = 
reactive<{
    files1: string[];
    files2: string[];
}>(data: {
    files1: string[];
    files2: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
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>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("parent1")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state.files1: ReactiveProxy<string[]>files1,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state.files1: ReactiveProxy<string[]>files1 = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The 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 | undefinedselectedClass: "bg-blue-500 text-white",
  },
});

dragAndDrop<string>({ parent, getValues, setValues, config, }: DragAndDrop<string>): void
Initializes the drag and drop functionality for a given parent.
@paramdragAndDrop - The drag and drop configuration.@returnsvoid
dragAndDrop<string>({
  DragAndDrop<string>.parent: HTMLElement
The parent element that will contain the draggable nodes.
parent: var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("parent2")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => 
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state.files2: ReactiveProxy<string[]>files2,
  DragAndDrop<string>.setValues: (values: string[], parent: HTMLElement) => void
A function that sets the values assigned to the parent.
setValues: (newValues: string[]newValues) => {
    
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state.files2: ReactiveProxy<string[]>files2 = reactive<string[]>(data: string[], state?: ReactiveProxyState): ReactiveProxy<string[]>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive(newValues: string[]newValues);
  },
  DragAndDrop<string>.config?: Partial<ParentConfig<string>> | undefined
An optional configuration object.
config: {
    group?: string | undefined
The 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 | undefinedselectedClass: "bg-blue-500 text-white",
  },
});

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div class="file-manager">
    <ul class="file-list" id="parent1">
      ${() =>
        
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state.files1: ReactiveProxy<string[]>files1.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
          const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html` <li class="file">${file: stringfile}</li> `.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(file: stringfile)
        )}
    </ul>
    <ul class="file-list" id="parent2">
      ${
const state: ReactiveProxy<{
    files1: string[];
    files2: string[];
}>
state.files2: ReactiveProxy<string[]>files2.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
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) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html` <li class="file">${file: stringfile}</li> `.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(file: stringfile)
      )}
    </ul>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);
  • dungeon_master.exe
  • map_1.dat
  • map_2.dat
  • character1.txt
  • character2.txt
  • shell32.dll
  • README.txt