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.

Introduction

FormKit’s Drag and Drop is a small library for adding data-first drag and drop sorting and transferring of elements in your app. It’s simple, flexible, framework agnostic, and clocks in at only ~4Kb gzipped. Drag and Drop works with React, Solid, Vue, Svelte, or any JavaScript application.

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. A native JavaScript version of the dragAndDrop function is also available at @formkit/drag-and-drop.

useDragAndDrop

The useDragAndDrop hook is the most convenient way to add Drag and Drop to your app. Call this function with an initial array of values. It returns a tuple containing a a template ref and a reactive array of values. 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.

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

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

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.

// React:
dragAndDrop({
parent: parentRef,
state: [values, setValues]
})

// Vue:
dragAndDrop({
parent: parentRef,
value: valueRef
})

Features

Drag and drop ships out of the box with the ability to sort and transfer individual items between lists. Further customization is also available via first-party plugins, and of course you can always write your own.

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
  • Native 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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.ClassAttributes<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<ParentConfig$1<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>parent, const tapes: Ref<string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>parent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[]>tapes" key?: string | number | symbol | undefined:key?: string | number | symbol | undefinedkey="const tape: stringtape" HTMLAttributes.class?: anyclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const const state: ReactiveProxy<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}, state?: ReactiveProxyState | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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

If there is a direct descendant of the parent that should not become draggable, set the draggable property of the parent config. draggable is a callback function that lets you determine whether or not a given element should be draggable.

Draggable

  • React
  • Vue
  • Native 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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.ClassAttributes<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<ParentConfig$1<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>parent, const tapes: Ref<string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>parent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[]>tapes" key?: string | number | symbol | undefined:key?: string | number | symbol | 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>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";

const const state: ReactiveProxy<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}, state?: ReactiveProxyState | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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

Transferability

If the intention is to transfer values between lists, simply set the group property in the configuration to the same value for each list.

  • React
  • Vue
  • Native 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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.ClassAttributes<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.ClassAttributes<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<ParentConfig$1<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>todoList, const todos: Ref<string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>doneList, const dones: Ref<string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>todoList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[]>todos" key?: string | number | symbol | undefined:key?: string | number | symbol | 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>doneList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[]>dones" key?: string | number | symbol | undefined:key?: string | number | symbol | undefinedkey="const done: stringdone" HTMLAttributes.class?: anyclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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

Complete

  • Pickup new mix-tape from Beth

Disable sort

If you would like to prevent sorting within a given list, but still allow transfer, set the sortable property to false in the configuration.

  • React
  • Vue
  • Native 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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.ClassAttributes<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.ClassAttributes<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<ParentConfig$1<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>todoList, const todos: Ref<string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>doneList, const dones: Ref<string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>todoList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[]>todos" key?: string | number | symbol | undefined:key?: string | number | symbol | 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>doneList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[]>dones" key?: string | number | symbol | undefined:key?: string | number | symbol | undefinedkey="const done: stringdone" HTMLAttributes.class?: anyclass="kanban-item">
        {{ const done: stringdone }}
      </li: LiHTMLAttributes & ReservedPropsli>
    </ul: HTMLAttributes & ReservedPropsul>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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

Complete

  • 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
  • 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>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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.ClassAttributes<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.ClassAttributes<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.ClassAttributes<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<ParentConfig$1<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>source, const items1: Ref<string[]>items1] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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>target2.Ref<HTMLElement | undefined>.value: HTMLElement | undefinedvalue) {
    return false;
  }
  return const items2: Ref<string[]>items2.Ref<string[]>.value: string[]value.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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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>target1.Ref<HTMLElement | undefined>.value: HTMLElement | undefinedvalue) {
    return false;
  }
  return const items3: Ref<string[]>items3.Ref<string[]>.value: string[]value.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: Ref<HTMLElement | undefined>target1, const items2: Ref<string[]>items2] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>target2, const items3: Ref<string[]>items3] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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="const source: Ref<HTMLElement | undefined>source">
          <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items1: Ref<string[]>items1" key?: string | number | symbol | undefined:key?: string | number | symbol | 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="const target1: Ref<HTMLElement | undefined>target1" HTMLAttributes.class?: anyclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items2: Ref<string[]>items2" key?: string | number | symbol | undefined:key?: string | number | symbol | 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="const target2: Ref<HTMLElement | undefined>target2" HTMLAttributes.class?: anyclass="border-solid border-2 border-indigo-600">
            <li: LiHTMLAttributes & ReservedPropsli v-for="const item: stringitem in const items3: Ref<string[]>items3" key?: string | number | symbol | undefined:key?: string | number | symbol | 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>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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>, lastParentData: ParentRecord<string>, state: DragState<...> | TouchState<...>) => 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
  • Native 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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 node.
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 node.
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.ClassAttributes<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.ClassAttributes<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<ParentConfig$1<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>todoList, const todos: Ref<string[]>todos] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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 node.
dragHandle: ".kanban-handle",
});
const [const doneList: Ref<HTMLElement | undefined>doneList, const dones: Ref<string[]>dones] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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 node.
dragHandle: ".kanban-handle",
});
</script>

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: anyclass="kanban-board">
    <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const todoList: Ref<HTMLElement | undefined>todoList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const todo: stringtodo in const todos: Ref<string[]>todos" key?: string | number | symbol | undefined:key?: string | number | symbol | 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>doneList" HTMLAttributes.class?: anyclass="kanban-column">
      <li: LiHTMLAttributes & ReservedPropsli v-for="const done: stringdone in const dones: Ref<string[]>dones" key?: string | number | symbol | undefined:key?: string | number | symbol | 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>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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 node.
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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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 node.
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

Complete

  • Pickup new mix-tape from Beth
  • Implement drag handles

Updating config

The parent config can be updated at any time by using the updateConfig method returned from useDragAndDrop. Alternatively, the parent config can be updated by importing updateConfig from @formkit/drag-and-drop.

  • React
  • Vue
  • Native 
import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<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>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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.ClassAttributes<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<ParentConfig$1<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): Ref<UnwrapRef<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>disabled = ref<boolean>(value: boolean): Ref<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>parentRef, const values: Ref<string[]>values, const updateConfig: (config: Partial<Partial<ParentConfig<string>>>) => voidupdateConfig] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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>disabled.Ref<boolean>.value: booleanvalue = !const disabled: Ref<boolean>disabled.Ref<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>disabled.Ref<boolean>.value: booleanvalue });
}
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const parentRef: Ref<HTMLElement | undefined>parentRef">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const values: Ref<string[]>values" key?: string | number | symbol | undefined:key?: string | number | symbol | 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" @'click': ((payload: MouseEvent) => void) | undefinedclick="function toggleDisabled(): voidtoggleDisabled">
    {{ const disabled: Ref<boolean>disabled ? "Enable" : "Disable" }} drag and drop
  </button: ButtonHTMLAttributes & ReservedPropsbutton>
</template>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@returnsvoid
dragAndDrop, function updateConfig<T>(parent: HTMLElement, config: Partial<ParentConfig<T>>): void
Utility function to update parent config.
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 | undefined): 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.
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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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

Plugins

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

Animations

To add animations to your drag and drop experience, you can use the first-party animations plugin.

  • React
  • Vue
  • Native 
import React from "react";
import { function animations(animationsConfig?: AnimationsConfig): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@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",
    ],
    { plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [function animations(animationsConfig?: AnimationsConfig | undefined): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
  );
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.ClassAttributes<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 animations(animationsConfig?: AnimationsConfig): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<ParentConfig$1<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>parent, const tapes: Ref<string[]>tapes] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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",
  ],
  { plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [function animations(animationsConfig?: AnimationsConfig | undefined): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()] }
);
</script>

<template>
  <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const parent: Ref<HTMLElement | undefined>parent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const tape: stringtape in const tapes: Ref<string[]>tapes" key?: string | number | symbol | undefined:key?: string | number | symbol | undefinedkey="const tape: stringtape" HTMLAttributes.class?: anyclass="cassette">
      {{ const tape: stringtape }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@returnsvoid
dragAndDrop, function animations(animationsConfig?: AnimationsConfig): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations } from "@formkit/drag-and-drop";

const const state: ReactiveProxy<{
    tapes: string[];
}>state = reactive<{
    tapes: string[];
}>(data: {
    tapes: string[];
}, state?: ReactiveProxyState | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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: {
    plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [function animations(animationsConfig?: AnimationsConfig | undefined): (parent: HTMLElement) => {
    setup(): void;
    setupNodeRemap<T>(data: SetupNodeData<T>): void;
} | undefinedanimations()],
  },
});
FormKit Office Jams
  • Depeche ModeCassette Tape
  • Duran DuranCassette Tape
  • Pet Shop BoysCassette Tape
  • KraftwerkCassette Tape
  • Tears for FearsCassette Tape
  • Spandau BalletCassette Tape

Multi Drag

The multi-drag plugin allows you to select multiple items and drag them together.

  • React
  • Vue
  • Native 
import React from "react";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returns
useDragAndDrop } from "@formkit/drag-and-drop/react";
import { function multiDrag<T>(multiDragConfig?: Partial<MultiDragConfig<T>>): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<T_1>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag, function selections<T>(selectionsConfig?: SelectionsConfig<T>): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<T_1>): void;
} | undefinedselections } from "@formkit/drag-and-drop";

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",
      plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
        multiDrag<unknown>(multiDragConfig?: Partial<MultiDragConfig<unknown>> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<...>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag({
          plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
            selections<unknown>(selectionsConfig?: SelectionsConfig<unknown> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<...>): void;
} | undefinedselections({
              SelectionsConfig<T>.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",
    plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
      multiDrag<unknown>(multiDragConfig?: Partial<MultiDragConfig<unknown>> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<...>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag({
        plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
          selections<unknown>(selectionsConfig?: SelectionsConfig<unknown> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<...>): void;
} | undefinedselections({
            SelectionsConfig<T>.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.ClassAttributes<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.ClassAttributes<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<ParentConfig$1<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 multiDrag<T>(multiDragConfig?: Partial<MultiDragConfig<T>>): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<T_1>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag, function selections<T>(selectionsConfig?: SelectionsConfig<T>): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<T_1>): void;
} | undefinedselections } from "@formkit/drag-and-drop";

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>parent1, const files1: Ref<string[]>files1] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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",
  plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
    multiDrag<unknown>(multiDragConfig?: Partial<MultiDragConfig<unknown>> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<...>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag({
      plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
        selections<unknown>(selectionsConfig?: SelectionsConfig<unknown> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<...>): void;
} | undefinedselections({
          SelectionsConfig<T>.selectedClass?: string | undefinedselectedClass: "bg-blue-500 color-white",
        }),
      ],
    }),
  ],
});

const [const parent2: Ref<HTMLElement | undefined>parent2, const files2: Ref<never[]>files2] = useDragAndDrop<never>(initialValues: never[], options?: Partial<ParentConfig<never>> | undefined): [Ref<HTMLElement | undefined>, Ref<never[]>, (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",
  plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
    multiDrag<unknown>(multiDragConfig?: Partial<MultiDragConfig<unknown>> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<...>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag({
      plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
        selections<unknown>(selectionsConfig?: SelectionsConfig<unknown> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<...>): void;
} | undefinedselections({
          SelectionsConfig<T>.selectedClass?: string | undefinedselectedClass: "bg-blue-500 color-white",
        }),
      ],
    }),
  ],
});
</script>

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

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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.@paramdragAndDrop.parent - The parent element.@returnsvoid
dragAndDrop } from "@formkit/drag-and-drop";
import { function multiDrag<T>(multiDragConfig?: Partial<MultiDragConfig<T>>): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<T_1>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag, function selections<T>(selectionsConfig?: SelectionsConfig<T>): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<T_1>): void;
} | undefinedselections } 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 | undefined): 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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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",
    plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
      multiDrag<unknown>(multiDragConfig?: Partial<MultiDragConfig<unknown>> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<...>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag({
        plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
          selections<unknown>(selectionsConfig?: SelectionsConfig<unknown> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<...>): void;
} | undefinedselections({
            SelectionsConfig<T>.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.@paramdragAndDrop.parent - The parent element.@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 | undefined): 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",
    plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
      multiDrag<unknown>(multiDragConfig?: Partial<MultiDragConfig<unknown>> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
    tearDownNode<T_1>(data: TearDownNodeData<...>): void;
    setupNodeRemap<T_2>(data: SetupNodeData<...>): void;
    setupNode<T_3>(data: SetupNodeData<...>): void;
} | undefinedmultiDrag({
        plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [
          selections<unknown>(selectionsConfig?: SelectionsConfig<unknown> | undefined): (parent: HTMLElement) => {
    setup(): void;
    tearDown(): void;
    tearDownNode<T>(data: TearDownNodeData<T>): void;
    setupNode<T_1>(data: SetupNodeData<...>): void;
} | undefinedselections({
            SelectionsConfig<T>.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

Notice in the last example we are passing a separate plugin to the multi-drag plugin. This is the selections plugin, which sets things like click handlers. If you would like to write your own logic (or have already written logic for selecting items), you can pass your own selected values to the selections property.

Custom Plugins

You can create your own plugins to extend the functionality of the library. Here is an example of a custom plugin that adds a drag and drop feature to a list of flavors.

Plugins accept a parent element and return an object with methods that are called internally at different lifecycles:

  • setup and tearDown are called when useDragAndDrop or dragAndDrop is called.
  • setupNode and tearDownNode are also called when parent is initialized and accept data representing a given node (or child).
  • setupNodeRemap and tearDownNodeRemap are called when the value of the parent is changed and the nodes are remapped.
  • React
  • Vue
  • Native 
import React from "react";
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<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 type { type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin } from "@formkit/drag-and-drop";
import { function useDragAndDrop<E extends HTMLElement, T = unknown>(list: T[], options?: Partial<ParentConfig<T>>): [RefObject<E>, T[], Dispatch<SetStateAction<T[]>>, (config: Partial<ParentConfig<T>>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returns
useDragAndDrop } from "@formkit/drag-and-drop/react";
import { const parents: ParentsData<any>parents, function addEvents(el: Document | ShadowRoot | Node | HTMLElement, events: EventHandlers | any): AbortController
Takes a given el and event handlers, assigns them, and returns the used abort
controller.
@paramel - The element to add the event listeners to.@paramevents - The events to add to the element.@returns- The abort controller used for the event listeners.
addEvents } from "@formkit/drag-and-drop";

function function App(): React.JSX.ElementApp() {
  const [const dragStatus: stringdragStatus, const setDragStatus: React.Dispatch<React.SetStateAction<string>>setDragStatus] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState("Not dragging");
  const [const dragCount: numberdragCount, const setDragCount: React.Dispatch<React.SetStateAction<number>>setDragCount] = useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState(0);

  const const dragStatusPlugin: DNDPlugindragStatusPlugin: type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin = (parent: HTMLElementparent) => {
    const const parentData: ParentData<any> | undefinedparentData = const parents: ParentsData<any>parents.WeakMap<HTMLElement, ParentData<any>>.get(key: HTMLElement): ParentData<any> | undefined
@returnsa specified element.
get(parent: HTMLElementparent);
    if (!const parentData: ParentData<any> | undefinedparentData) return;

    function function (local function) dragstart(event: DragEvent): voiddragstart(event: DragEventevent: DragEvent) {
      const const node: HTMLElementnode = event: DragEventevent.Event.target: EventTarget | null
Returns the object to which event is dispatched (its target).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
target as HTMLElement;
      const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus(`Dragging ${const node: HTMLElementnode.Node.textContent: string | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent)
textContent}`);
      const setDragCount: (value: React.SetStateAction<number>) => voidsetDragCount((count: numbercount) => count: numbercount + 1);
    }

    function function (local function) dragend(): voiddragend() {
      const setDragStatus: (value: React.SetStateAction<string>) => voidsetDragStatus("Not dragging");
    }

    return {
      DNDPluginData.setup?: (() => void) | undefined
The function to call when the parent is set up.
setup() {},
      function teardown(): voidteardown() {},
      DNDPluginData.setupNode?: SetupNode | undefined
Called when entry point function is invoked on parent.
setupNode(data: SetupNodeData<T>data) {
        data: SetupNodeData<T>data.SetupNodeData<T>.nodeData: NodeData<T>
The data of the node that is being set up.
nodeData.NodeData<T>.abortControllers: Record<string, AbortController>
The abort controllers for the node.
abortControllers.AbortController
A controller object that allows you to abort one or more DOM requests as and when desired.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/AbortController)
customPlugin = function addEvents(el: HTMLElement | Document | ShadowRoot | Node, events: any): AbortController
Takes a given el and event handlers, assigns them, and returns the used abort
controller.
@paramel - The element to add the event listeners to.@paramevents - The events to add to the element.@returns- The abort controller used for the event listeners.
addEvents(data: SetupNodeData<T>data.SetupNodeData<T>.node: Node
The node that is being set up.
node, {
          dragstart: (event: DragEvent) => voiddragstart: function (local function) dragstart(event: DragEvent): voiddragstart,
          dragend: () => voiddragend: function (local function) dragend(): voiddragend,
        });
      },
      DNDPluginData.tearDownNode?: TearDownNode | undefined
Called when entry point function is invoked on parent.
tearDownNode(data: TearDownNodeData<T>data) {
        if (data: TearDownNodeData<T>data.TearDownNodeData<T>.nodeData?: NodeData<T> | undefined
The data of the node that is being torn down.
nodeData?.NodeData<T>.abortControllers: Record<string, AbortController> | undefined
The abort controllers for the node.
abortControllers?.AbortController | undefinedcustomPlugin) {
          data: TearDownNodeData<T>data.TearDownNodeData<T>.nodeData?: NodeData<T>
The data of the node that is being torn down.
nodeData?.NodeData<T>.abortControllers: Record<string, AbortController>
The abort controllers for the node.
abortControllers?.AbortController
A controller object that allows you to abort one or more DOM requests as and when desired.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/AbortController)
customPlugin.AbortController.abort(reason?: any): void
Invoking this method will set this object's AbortSignal's aborted flag and signal to any observers that the associated activity is to be aborted.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/AbortController/abort)
abort();
        }
      },
      DNDPluginData.setupNodeRemap?: SetupNode | undefined
Called anytime the nodes are mutated
setupNodeRemap() {},
      DNDPluginData.tearDownNodeRemap?: TearDownNode | undefined
Called when the parent is dragged over.
tearDownNodeRemap() {},
    };
  };
  const [const parent: React.RefObject<HTMLUListElement>parent, const items: string[]items] = 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>(
    ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
    { plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [const dragStatusPlugin: DNDPlugindragStatusPlugin] }
  );
  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
      <JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>Rank your favorite flavors</JSX.IntrinsicElements.strong: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>strong>
      <JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const dragStatus: stringdragStatus}</JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <JSX.IntrinsicElements.br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>br />
      <JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>{const dragCount: numberdragCount}</JSX.IntrinsicElements.span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>span>
      <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.ClassAttributes<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 items: string[]items.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((item: stringitem) => {
          return <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>
  );
}

export default function App(): React.JSX.ElementApp;

<script setup lang="ts">
import { function ref<T>(value: T): Ref<UnwrapRef<T>> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}
ref } from "vue";
import type { type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin } from "@formkit/drag-and-drop";
import { function useDragAndDrop<T>(initialValues: T[], options?: Partial<ParentConfig$1<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 { const parents: ParentsData<any>parents } from "@formkit/drag-and-drop";

const const dragStatus: Ref<string>dragStatus = ref<string>(value: string): Ref<string> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}
ref("Not dragging");
const const dragCount: Ref<number>dragCount = ref<number>(value: number): Ref<number> (+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(0);

const const dragStatusPlugin: DNDPlugindragStatusPlugin: type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin = (parent: HTMLElementparent) => {
  const const parentData: ParentData<any> | undefinedparentData = const parents: ParentsData<any>parents.WeakMap<HTMLElement, ParentData<any>>.get(key: HTMLElement): ParentData<any> | undefined
@returnsa specified element.
get(parent: HTMLElementparent);

  if (!const parentData: ParentData<any> | undefinedparentData) return;

  function function (local function) dragstart(event: DragEvent): voiddragstart(event: DragEventevent: DragEvent) {
    const const node: HTMLElementnode = event: DragEventevent.Event.target: EventTarget | null
Returns the object to which event is dispatched (its target).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
target as HTMLElement;
    const dragStatus: Ref<string>dragStatus.Ref<string>.value: stringvalue = `Dragging ${const node: HTMLElementnode.Node.textContent: string | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent)
textContent}`;
    const dragCount: Ref<number>dragCount.Ref<number>.value: numbervalue++;
  }
  function function (local function) dragend(): voiddragend() {
    const dragStatus: Ref<string>dragStatus.Ref<string>.value: stringvalue = "Not dragging";
  }

  return {
    DNDPluginData.setup?: (() => void) | undefined
The function to call when the parent is set up.
setup() {},
    function teardown(): voidteardown() {},
    DNDPluginData.setupNode?: SetupNode | undefined
Called when entry point function is invoked on parent.
setupNode(data: SetupNodeData<T>data) {
      data: SetupNodeData<T>data.SetupNodeData<T>.node: Node
The node that is being set up.
node.HTMLElement.addEventListener<"dragstart">(type: "dragstart", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
addEventListener("dragstart", function (local function) dragstart(event: DragEvent): voiddragstart);
      data: SetupNodeData<T>data.SetupNodeData<T>.node: Node
The node that is being set up.
node.HTMLElement.addEventListener<"dragend">(type: "dragend", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
addEventListener("dragend", function (local function) dragend(): voiddragend);
    },
    DNDPluginData.tearDownNode?: TearDownNode | undefined
Called when entry point function is invoked on parent.
tearDownNode(data: TearDownNodeData<T>data) {
      data: TearDownNodeData<T>data.TearDownNodeData<T>.node: Node
The node that is being torn down.
node.HTMLElement.removeEventListener<"dragstart">(type: "dragstart", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | EventListenerOptions | undefined): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
removeEventListener("dragstart", function (local function) dragstart(event: DragEvent): voiddragstart);
      data: TearDownNodeData<T>data.TearDownNodeData<T>.node: Node
The node that is being torn down.
node.HTMLElement.removeEventListener<"dragend">(type: "dragend", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | EventListenerOptions | undefined): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
removeEventListener("dragend", function (local function) dragend(): voiddragend);
    },
    DNDPluginData.setupNodeRemap?: SetupNode | undefined
Called anytime the nodes are mutated
setupNodeRemap() {},
    DNDPluginData.tearDownNodeRemap?: TearDownNode | undefined
Called when the parent is dragged over.
tearDownNodeRemap() {},
  };
};

const [const parent: Ref<HTMLElement | undefined>parent, const flavors: Ref<string[]>flavors] = useDragAndDrop<string>(initialValues: string[], options?: Partial<ParentConfig<string>> | undefined): [Ref<HTMLElement | undefined>, Ref<string[]>, (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(
  ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  {
    plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [const dragStatusPlugin: DNDPlugindragStatusPlugin],
  }
);
</script>

<template>
  <strong: HTMLAttributes & ReservedPropsstrong>Rank your favorite flavors</strong: HTMLAttributes & ReservedPropsstrong>
  <span: HTMLAttributes & ReservedPropsspan>Drag count: {{ const dragCount: Ref<number>dragCount }}</span: HTMLAttributes & ReservedPropsspan>
  <span: HTMLAttributes & ReservedPropsspan>Drag status: {{ const dragStatus: Ref<string>dragStatus }}</span: HTMLAttributes & ReservedPropsspan>
  <ul: HTMLAttributes & ReservedPropsul ref?: VNodeRef | undefinedref="const parent: Ref<HTMLElement | undefined>parent">
    <li: LiHTMLAttributes & ReservedPropsli v-for="const flavor: stringflavor in const flavors: Ref<string[]>flavors" key?: string | number | symbol | undefined:key?: string | number | symbol | undefinedkey="const flavor: stringflavor">
      {{ const flavor: stringflavor }}
    </li: LiHTMLAttributes & ReservedPropsli>
  </ul: HTMLAttributes & ReservedPropsul>
</template>

import { const reactive: <T extends DataSource>(data: T, state?: ReactiveProxyState | undefined) => 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 type { type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin } from "@formkit/drag-and-drop";
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.@paramdragAndDrop.parent - The parent element.@returnsvoid
dragAndDrop, const parents: ParentsData<any>parents } from "@formkit/drag-and-drop";

const const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state = reactive<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>(data: {
    items: string[];
    dragStatus: string;
    dragCount: number;
}, state?: ReactiveProxyState | undefined): ReactiveProxy<...>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive({
  items: string[]items: ["🍦 vanilla", "🍫 chocolate", "🍓 strawberry"],
  dragStatus: stringdragStatus: "Not dragging",
  dragCount: numberdragCount: 0,
});

const const dragStatusPlugin: DNDPlugindragStatusPlugin: type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin = (parent: HTMLElementparent) => {
  const const parentData: ParentData<any> | undefinedparentData = const parents: ParentsData<any>parents.WeakMap<HTMLElement, ParentData<any>>.get(key: HTMLElement): ParentData<any> | undefined
@returnsa specified element.
get(parent: HTMLElementparent);

  if (!const parentData: ParentData<any> | undefinedparentData) return;

  function function (local function) dragstart(event: DragEvent): voiddragstart(event: DragEventevent: DragEvent) {
    const const node: HTMLElementnode = event: DragEventevent.Event.target: EventTarget | null
Returns the object to which event is dispatched (its target).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
target as HTMLElement;
    const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragStatus: stringdragStatus = `Dragging ${const node: HTMLElementnode.Node.textContent: string | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent)
textContent}`;
    const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragCount: numberdragCount++;
  }
  function function (local function) touchstart(event: TouchEvent): voidtouchstart(event: TouchEventevent: TouchEvent) {
    const const node: HTMLElementnode = event: TouchEventevent.Event.target: EventTarget | null
Returns the object to which event is dispatched (its target).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
target as HTMLElement;
    const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragStatus: stringdragStatus = `Dragging ${const node: HTMLElementnode.Node.textContent: string | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/textContent)
textContent}`;
    const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragCount: numberdragCount++;
  }
  function function (local function) dragend(): voiddragend() {
    const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragStatus: stringdragStatus = "Not dragging";
  }

  return {
    DNDPluginData.setup?: (() => void) | undefined
The function to call when the parent is set up.
setup() {},
    function teardown(): voidteardown() {},
    DNDPluginData.setupNode?: SetupNode | undefined
Called when entry point function is invoked on parent.
setupNode(data: SetupNodeData<T>data) {
      data: SetupNodeData<T>data.SetupNodeData<T>.node: Node
The node that is being set up.
node.HTMLElement.addEventListener<"dragstart">(type: "dragstart", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
addEventListener("dragstart", function (local function) dragstart(event: DragEvent): voiddragstart);
      data: SetupNodeData<T>data.SetupNodeData<T>.node: Node
The node that is being set up.
node.HTMLElement.addEventListener<"touchstart">(type: "touchstart", listener: (this: HTMLElement, ev: TouchEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
addEventListener("touchstart", function (local function) touchstart(event: TouchEvent): voidtouchstart);
      data: SetupNodeData<T>data.SetupNodeData<T>.node: Node
The node that is being set up.
node.HTMLElement.addEventListener<"dragend">(type: "dragend", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)
addEventListener("dragend", function (local function) dragend(): voiddragend);
    },
    DNDPluginData.tearDownNode?: TearDownNode | undefined
Called when entry point function is invoked on parent.
tearDownNode(data: TearDownNodeData<T>data) {
      data: TearDownNodeData<T>data.TearDownNodeData<T>.node: Node
The node that is being torn down.
node.HTMLElement.removeEventListener<"dragstart">(type: "dragstart", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | EventListenerOptions | undefined): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
removeEventListener("dragstart", function (local function) dragstart(event: DragEvent): voiddragstart);
      data: TearDownNodeData<T>data.TearDownNodeData<T>.node: Node
The node that is being torn down.
node.HTMLElement.removeEventListener<"touchstart">(type: "touchstart", listener: (this: HTMLElement, ev: TouchEvent) => any, options?: boolean | EventListenerOptions | undefined): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
removeEventListener("touchstart", function (local function) touchstart(event: TouchEvent): voidtouchstart);
      data: TearDownNodeData<T>data.TearDownNodeData<T>.node: Node
The node that is being torn down.
node.HTMLElement.removeEventListener<"dragend">(type: "dragend", listener: (this: HTMLElement, ev: DragEvent) => any, options?: boolean | EventListenerOptions | undefined): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)
removeEventListener("dragend", function (local function) dragend(): voiddragend);
    },
    DNDPluginData.setupNodeRemap?: SetupNode | undefined
Called anytime the nodes are mutated
setupNodeRemap() {},
    DNDPluginData.tearDownNodeRemap?: TearDownNode | undefined
Called when the parent is dragged over.
tearDownNodeRemap() {},
  };
};

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div>
    <strong>Rank your favorite flavors</strong>
    <span>${const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragStatus: stringdragStatus}</span>
    <span>${const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.dragCount: numberdragCount}</span>
    <ul id="list">
      ${const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.items: ReactiveProxy<string[]>items.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((item: stringitem) => const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li>${item: stringitem}</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(item: stringitem))}
    </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")!);

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.@paramdragAndDrop.parent - The parent element.@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("list")!,
  DragAndDrop<string>.getValues: (parent: HTMLElement) => string[]
A function that returns the values assigned to the parent.
getValues: () => const state: ReactiveProxy<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.items: ReactiveProxy<string[]>items,
  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<{
    items: string[];
    dragStatus: string;
    dragCount: number;
}>state.items: ReactiveProxy<string[]>items = reactive<string[]>(data: string[], state?: ReactiveProxyState | undefined): 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: {
    plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins: [const dragStatusPlugin: DNDPlugindragStatusPlugin],
  },
});
=== Rank your favorite flavors ===
Drag count: 0
Drag status: Not dragging
🍦 vanilla
🍫 chocolate
🍓 strawberry

Configuration

Core

Each list can be passed a configuration object. This object can be used to set options like group, drag handles, and or more dynamic options such as determining which direct descendants of a list are draggable. Invocation of useDragAndDrop or dragAndDrop can be used idempotently to update the configuration for a given list. 

import type {
  interface ParentRecord<T>
The parent record, contains the el and the data in the `parents` weakmap.
ParentRecord,
  interface DragState<T>
The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramlastParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.
DragState,
  interface TouchState<T>
The state of the current drag. TouchState is only created when a touch start
event has occurred.
TouchState,
  interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData,
  interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData,
  interface NodeEventData<T>
The data passed to the node event listener.
NodeEventData,
  type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin,
  interface TouchOverNodeEvent<T>
The payload of the custom event dispatched when a node is "touched" over a
node.
TouchOverNodeEvent,
  interface TouchOverParentEvent<T>
The payload of the custom event dispatched when a node is "touched" over a
parent.
TouchOverParentEvent,
  type SetupNode = <T>(data: SetupNodeData<T>) => voidSetupNode,
  interface ParentEventData<T>
The data passed to the parent event listener.
@parame - The event that was triggered.@paramtargetData - The data of the target parent.
ParentEventData,
  type TearDownNode = <T>(data: TearDownNodeData<T>) => voidTearDownNode,
} from "@formkit/drag-and-drop";

/**
 * The configuration object for a given parent.
 */
export interface interface ParentConfig<T>
The configuration object for a given parent.
ParentConfig<function (type parameter) T in ParentConfig<T>T> {
  [key: stringkey: string]: any;
  /**
   * A function that returns whether a given parent accepts a given node.
   */
  ParentConfig<T>.accepts?: ((targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, lastParentData: ParentRecord<T>, state: DragState<T> | TouchState<T>) => boolean) | undefined
A function that returns whether a given parent accepts a given node.
accepts?: (
    targetParentData: ParentRecord<T>targetParentData: interface ParentRecord<T>
The parent record, contains the el and the data in the `parents` weakmap.
ParentRecord<function (type parameter) T in ParentConfig<T>T>,
    initialParentData: ParentRecord<T>initialParentData: interface ParentRecord<T>
The parent record, contains the el and the data in the `parents` weakmap.
ParentRecord<function (type parameter) T in ParentConfig<T>T>,
    lastParentData: ParentRecord<T>lastParentData: interface ParentRecord<T>
The parent record, contains the el and the data in the `parents` weakmap.
ParentRecord<function (type parameter) T in ParentConfig<T>T>,
    state: DragState<T> | TouchState<T>state: interface DragState<T>
The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramlastParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.
DragState<function (type parameter) T in ParentConfig<T>T> | interface TouchState<T>
The state of the current drag. TouchState is only created when a touch start
event has occurred.
TouchState<function (type parameter) T in ParentConfig<T>T>
  ) => boolean;
  /**
   * A flag to disable dragability of all nodes in the parent.
   */
  ParentConfig<T>.disabled?: boolean | undefined
A flag to disable dragability of all nodes in the parent.
disabled?: boolean;
  /**
   * A selector for the drag handle. Will search at any depth within the node.
   */
  ParentConfig<T>.dragHandle?: string | undefined
A selector for the drag handle. Will search at any depth within the node.
dragHandle?: string;
  /**
   * A function that returns whether a given node is draggable.
   */
  ParentConfig<T>.draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable?: (child: HTMLElementchild: HTMLElement) => boolean;
  /**
   * The class to add to a node when it is being dragged.
   */
  ParentConfig<T>.draggingClass?: string | undefined
The class to add to a node when it is being dragged.
draggingClass?: string;
  /**
   * The class to add to a node when the node is dragged over it.
   */
  ParentConfig<T>.dropZoneClass?: string | undefined
The class to add to a node when the node is dragged over it.
dropZoneClass?: string;
  /**
   * A flag to indicate whether the parent itself is a dropZone.
   */
  ParentConfig<T>.dropZone?: boolean | undefined
A flag to indicate whether the parent itself is a dropZone.
dropZone?: boolean;
  /**
   * The group that the parent belongs to. This is used for allowing multiple
   * parents to transfer nodes between each other.
   */
  ParentConfig<T>.group?: string | undefined
The group that the parent belongs to. This is used for allowing multiple
parents to transfer nodes between each other.
group?: string;
  /**
   * Function that is called when dragend or touchend event occurs.
   */
  ParentConfig<T>.handleEnd: (data: NodeDragEventData<T> | NodeTouchEventData<T>) => void
Function that is called when dragend or touchend event occurs.
handleEnd: (data: NodeDragEventData<T> | NodeTouchEventData<T>data: interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData<function (type parameter) T in ParentConfig<T>T> | interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when dragstart event occurs.
   */
  ParentConfig<T>.handleDragstart: (data: NodeDragEventData<T>) => void
Function that is called when dragstart event occurs.
handleDragstart: (data: NodeDragEventData<T>data: interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when touchstart event occurs.
   */
  ParentConfig<T>.handleTouchstart: (data: NodeTouchEventData<T>) => void
Function that is called when touchstart event occurs.
handleTouchstart: (data: NodeTouchEventData<T>data: interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when a dragover event is triggered on the parent.
   */
  ParentConfig<T>.handleDragoverParent: (data: ParentEventData<T>) => void
Function that is called when a dragover event is triggered on the parent.
handleDragoverParent: (data: ParentEventData<T>data: interface ParentEventData<T>
The data passed to the parent event listener.
@parame - The event that was triggered.@paramtargetData - The data of the target parent.
ParentEventData<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when a dragover event is triggered on a node.
   */
  ParentConfig<T>.handleDragoverNode: (data: NodeDragEventData<T>) => void
Function that is called when a dragover event is triggered on a node.
handleDragoverNode: (data: NodeDragEventData<T>data: interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when a touchmove event is triggered on a node.
   */
  ParentConfig<T>.handleTouchmove: (data: NodeTouchEventData<T>) => void
Function that is called when a touchmove event is triggered on a node.
handleTouchmove: (data: NodeTouchEventData<T>data: interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when a node that is being moved by touchmove event
   * is over a given node (similar to dragover).
   */
  ParentConfig<T>.handleTouchOverNode: (data: TouchOverNodeEvent<T>) => void
Function that is called when a node that is being moved by touchmove event
is over a given node (similar to dragover).
handleTouchOverNode: (data: TouchOverNodeEvent<T>data: interface TouchOverNodeEvent<T>
The payload of the custom event dispatched when a node is "touched" over a
node.
TouchOverNodeEvent<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * Function that is called when a node that is being moved by touchmove event
   * is over the parent (similar to dragover).
   */
  ParentConfig<T>.handleTouchOverParent: (e: TouchOverParentEvent<T>) => void
Function that is called when a node that is being moved by touchmove event
is over the parent (similar to dragover).
handleTouchOverParent: (e: TouchOverParentEvent<T>e: interface TouchOverParentEvent<T>
The payload of the custom event dispatched when a node is "touched" over a
parent.
TouchOverParentEvent<function (type parameter) T in ParentConfig<T>T>) => void;
  /**
   * A flag to indicate whether long touch is enabled.
   */
  ParentConfig<T>.longTouch?: boolean | undefined
A flag to indicate whether long touch is enabled.
longTouch?: boolean;
  /**
   * The class to add to a node when a long touch action is performed.
   */
  ParentConfig<T>.longTouchClass?: string | undefined
The class to add to a node when a long touch action is performed.
longTouchClass?: string;
  /**
   * The time in milliseconds to wait before a long touch is performed.
   */
  ParentConfig<T>.longTouchTimeout?: number | undefined
The time in milliseconds to wait before a long touch is performed.
longTouchTimeout?: number;
  /**
   * The name of the parent (used for accepts function for increased specificity).
   */
  ParentConfig<T>.name?: string | undefined
The name of the parent (used for accepts function for increased specificity).
name?: string;
  /**
   * Function that is called when a sort operation is to be performed.
   */
  ParentConfig<T>.performSort: (state: DragState<T> | TouchState<T>, data: NodeDragEventData<T> | NodeTouchEventData<T>) => void
Function that is called when a sort operation is to be performed.
performSort: (
    state: DragState<T> | TouchState<T>state: interface DragState<T>
The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramlastParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.
DragState<function (type parameter) T in ParentConfig<T>T> | interface TouchState<T>
The state of the current drag. TouchState is only created when a touch start
event has occurred.
TouchState<function (type parameter) T in ParentConfig<T>T>,
    data: NodeDragEventData<T> | NodeTouchEventData<T>data: interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData<function (type parameter) T in ParentConfig<T>T> | interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * Function that is called when a transfer operation is to be performed.
   */
  ParentConfig<T>.performTransfer: (state: DragState<T> | TouchState<T>, data: NodeEventData<T> | ParentEventData<T>) => void
Function that is called when a transfer operation is to be performed.
performTransfer: (
    state: DragState<T> | TouchState<T>state: interface DragState<T>
The state of the current drag. State is only created when a drag start
event is triggered.
@paramactiveNode - The node that was most recently clicked (used optionally).@paramaffectedNodes - The nodes that will be updated by a drag action
(sorted).@paramascendingDirection - Indicates whetehr the dragged node is moving to a
node with a higher index or not.@paramclonedDraggedEls - The cloned elements of the dragged node. This is
used primarily for TouchEvents or multi-drag purposes.@paramdraggedNode - The node that is being dragged.@paramdraggedNodes - The nodes that are being dragged.@paramincomingDirection - The direction that the dragged node is moving into
a dragover node.@paraminitialParent - The parent that the dragged node was initially in.@paramlastParent - The parent that the dragged node was most recently in.@paramlastValue - The last value of the dragged node.@paramoriginalZIndex - The original z-index of the dragged node.@parampreventEnter - A flag to prevent a sort operation from firing until
the mutation observer has had a chance to update the data of the remapped
nodes.@paramswappedNodeValue - The value of the node that was swapped with the
dragged node.@paramtargetIndex - The index of the node that the dragged node is moving
into.
DragState<function (type parameter) T in ParentConfig<T>T> | interface TouchState<T>
The state of the current drag. TouchState is only created when a touch start
event has occurred.
TouchState<function (type parameter) T in ParentConfig<T>T>,
    data: ParentEventData<T> | NodeEventData<T>data: interface NodeEventData<T>
The data passed to the node event listener.
NodeEventData<function (type parameter) T in ParentConfig<T>T> | interface ParentEventData<T>
The data passed to the parent event listener.
@parame - The event that was triggered.@paramtargetData - The data of the target parent.
ParentEventData<function (type parameter) T in ParentConfig<T>T>
  ) => void;
  /**
   * An array of functions to use for a given parent.
   */
  ParentConfig<T>.plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins?: interface Array<T>Array<type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin>;
  /**
   * The root element to use for the parent.
   */
  ParentConfig<T>.root: Document | ShadowRoot
The root element to use for the parent.
root: Document | ShadowRoot;
  /**
   * Function that is called when a node is set up.
   */
  ParentConfig<T>.setupNode: SetupNode
Function that is called when a node is set up.
setupNode: type SetupNode = <T>(data: SetupNodeData<T>) => voidSetupNode;
  /**
   * Flag for whether or not to allow sorting within a given parent.
   */
  ParentConfig<T>.sortable?: boolean | undefined
Flag for whether or not to allow sorting within a given parent.
sortable?: boolean;
  /**
   * Function that is called when a node is torn down.
   */
  ParentConfig<T>.tearDownNode: TearDownNode
Function that is called when a node is torn down.
tearDownNode: type TearDownNode = <T>(data: TearDownNodeData<T>) => voidTearDownNode;
  /**
   * The threshold for a drag to be considered a valid sort
   * operation.
   */
  ParentConfig<T>.threshold: {
    horizontal: number;
    vertical: number;
}
The threshold for a drag to be considered a valid sort
operation.
threshold: {
    horizontal: numberhorizontal: number;
    vertical: numbervertical: number;
  };
  /**
   * The class to add to a node when it is being dragged via touch.
   */
  ParentConfig<T>.touchDraggingClass?: string | undefined
The class to add to a node when it is being dragged via touch.
touchDraggingClass?: string;
  ParentConfig<T>.touchDropZoneClass?: string | undefinedtouchDropZoneClass?: string;
}

Plugins

Multi-drag

import type {
  interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData,
  interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData,
  type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin,
} from "@formkit/drag-and-drop";

export interface interface MultiDragConfig<T>MultiDragConfig<function (type parameter) T in MultiDragConfig<T>T> {
  [key: stringkey: string]: any;
  /**
   * Class added when a node is being dragged.
   */
  MultiDragConfig<T>.draggingClass?: string | undefined
Class added when a node is being dragged.
draggingClass?: string;
  /**
   * Class added when a node is being dragged over a dropZone.
   */
  MultiDragConfig<T>.dropZoneClass?: string | undefined
Class added when a node is being dragged over a dropZone.
dropZoneClass?: string;
  /**
   * Function to set which values of a given parent are "selected". This is
   * called on dragstart or touchstart.
   */
  MultiDragConfig<T>.selections?: ((parentValues: Array<T>, parent: HTMLElement) => Array<T>) | undefined
Function to set which values of a given parent are "selected". This is
called on dragstart or touchstart.
selections?: (parentValues: T[]parentValues: interface Array<T>Array<function (type parameter) T in MultiDragConfig<T>T>, parent: HTMLElementparent: HTMLElement) => interface Array<T>Array<function (type parameter) T in MultiDragConfig<T>T>;
  /**
   * Class added when a node is being (touch) dragged.
   */
  MultiDragConfig<T>.touchDraggingClass?: string | undefined
Class added when a node is being (touch) dragged.
touchDraggingClass?: string;
  /**
   * Class added when a node is being (touch) dragged over a dropZone.
   */
  MultiDragConfig<T>.touchDropZoneClass?: string | undefined
Class added when a node is being (touch) dragged over a dropZone.
touchDropZoneClass?: string;
  /**
   * Function that is called when dragend event occurrs event occurs.
   */
  MultiDragConfig<T>.handleDragend: NodeDragEventData<T> | NodeTouchEventData<T>
Function that is called when dragend event occurrs event occurs.
handleDragend: interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData<function (type parameter) T in MultiDragConfig<T>T> | interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData<function (type parameter) T in MultiDragConfig<T>T>;
  /**
   * Function that is called when dragstart occurs.
   */
  MultiDragConfig<T>.handleDragstart: NodeDragEventData<T>
Function that is called when dragstart occurs.
handleDragstart: interface NodeDragEventData<T>
The data passed to the node event listener when the event is a drag event.
NodeDragEventData<function (type parameter) T in MultiDragConfig<T>T>;
  /**
   * Function that is called when dragstart event occurs.
   */
  MultiDragConfig<T>.handleTouchstart: NodeTouchEventData<T>
Function that is called when dragstart event occurs.
handleTouchstart: interface NodeTouchEventData<T>
The data passed to the node event listener when the event is a touch event.
NodeTouchEventData<function (type parameter) T in MultiDragConfig<T>T>;
  /**
   * An array of functions to use for a given parent.
   */
  MultiDragConfig<T>.plugins?: DNDPlugin[] | undefined
An array of functions to use for a given parent.
plugins?: interface Array<T>Array<type DNDPlugin = (parent: HTMLElement) => DNDPluginData | undefinedDNDPlugin>;
}

Support Us

FormKit Drag and Drop is made with love by the FormKit team — the creators of open-source projects such as:

  • FormKit - The open-source form framework for Vue.
  • AutoAnimate - Add motion to your apps with a single line of code.
  • Tempo - The easiest way to work with dates in JavaScript.
  • ArrowJS - Reactivity without the Framework.

If you find our projects useful and would like to support their ongoing development, please consider sponsoring us on GitHub!

Sponsor on GitHub