grab cursor

A tinydata-first library
for modern apps

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

    No direct DOM manipulations.

  • Lightweight

    ~4kb min-gzip. No dependencies.

  • Modern

    Leverages modern web APIs.

  • Plugins

    Multi-drag, animations, and more.

  • TypeScript

    First-class TypeScript support.

  • Production-ready

    Used on FormKit Pro inputs.

AI-Generated forms in seconds.

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

Introduction

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

Getting Started

Install

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

Usage

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

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

useDragAndDrop

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

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

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

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

dragAndDrop

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

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

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

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

// Vanilla JS: (import from core, not subpath)
dragAndDrop({
parent: HTMLElement,
getValues: () => {

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

Core Features

Sortability

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

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

export function function myComponent(): React.JSX.ElementmyComponent() {
  const [const parent: React.RefObject<HTMLUListElement>parent, const tapes: string[]tapes] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returns
useDragAndDrop<HTMLUListElement, string>([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ]);
  return (
    <JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul React.RefAttributes<HTMLUListElement>.ref?: React.LegacyRef<HTMLUListElement> | undefined
Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
ref={const parent: React.RefObject<HTMLUListElement>parent}>
      {const tapes: string[]tapes.Array<string>.map<React.JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => React.JSX.Element, thisArg?: any): React.JSX.Element[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((tape: stringtape) => (
        <JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li React.HTMLAttributes<HTMLLIElement>.className?: string | undefinedclassName="cassette" data-label: stringdata-label={tape: stringtape} React.Attributes.key?: React.Key | null | undefinedkey={tape: stringtape}>
          {tape: stringtape}
        </JSX.IntrinsicElements.li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>li>
      ))}
    </JSX.IntrinsicElements.ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>ul>
  );
}

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

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

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

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

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <ul id="cassettes">
    ${() =>
      
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((tape: stringtape) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(tape: stringtape)
      )}
  </ul>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

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

Draggable

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

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

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

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

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

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

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

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

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

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <ul id="cassettes">
    ${() =>
      
const state: ReactiveProxy<{
    tapes: string[];
}>
state.tapes: ReactiveProxy<string[]>tapes.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((tape: stringtape) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="cassette" data-label="${tape: stringtape}">${tape: stringtape}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(tape: stringtape)
      )}
    <div id="no-drag">I am NOT draggable</div>
  </ul>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

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

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

Transferability

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

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

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

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

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

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

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

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

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

const 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state = 
reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
});

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

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

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((todo: stringtodo) =>
          const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((done: stringdone) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

ToDos

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

Complete

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

Disable sort

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

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

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

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

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

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

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

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

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

const 
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state = 
reactive<{
    todos: string[];
    dones: string[];
}>(data: {
    todos: string[];
    dones: string[];
}, state?: ReactiveProxyState): ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
Given a data object, often an object literal, return a proxy of that object
with mutation observers for each property.
@paramdata@returnsReactiveProxy
reactive({
  todos: string[]todos: [
    "Schedule perm",
    "Rewind VHS tapes",
    "Make change for the arcade",
    "Get disposable camera developed",
    "Learn C++",
    "Return Nintendo Power Glove",
  ],
  dones: string[]dones: ["Pickup new mix-tape from Beth"],
});

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

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

const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`
  <div class="kanban-board">
    <ul class="kanban-list" id="todo-list">
      ${() =>
        
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.todos: ReactiveProxy<string[]>todos.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((todo: stringtodo) =>
          const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${todo: stringtodo}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(todo: stringtodo)
        )}
    </ul>
    <ul class="kanban-list" id="done-list">
      ${
const state: ReactiveProxy<{
    todos: string[];
    dones: string[];
}>
state.dones: ReactiveProxy<string[]>dones.Array<string>.map<void>(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
map((done: stringdone) =>
        const html: (strings: TemplateStringsArray, ...expSlots: any[]) => ArrowTemplate
html is an alias for t
html`<li class="kanban-item">${done: stringdone}</li>`.ArrowTemplate.key: (key: ArrowTemplateKey) => void
Adds a key to this template to identify it as a unique instance.
@paramkey - A unique key that identifies this template instance (not index).@returns
key(done: stringdone)
      )}
    </ul>
  </div>
`(var document: Document
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document)
document.Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@paramelementId String that specifies the ID value.
getElementById("app")!);

ToDos

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

Complete

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

Accepts

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

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

export default function function myComponent(): React.JSX.ElementmyComponent() {
  const [const source: React.RefObject<HTMLUListElement>source, const items1: string[]items1] = useDragAndDrop<HTMLUListElement, string>(list: string[], options?: Partial<ParentConfig<string>> | undefined): [React.RefObject<HTMLUListElement>, string[], React.Dispatch<...>, (config: Partial<...>) => void]
Hook for adding drag and drop/sortable support to a list of items.
@paramlist - Initial list of data.@paramoptions - The drag and drop configuration.@returns
useDragAndDrop<HTMLUListElement, string>(
    ["dungeon_master.exe", "map_1.dat", "map_2.dat", "character1.txt", "character2.txt", "shell32.dll", "README.txt",],
    {
      draggable?: ((child: HTMLElement) => boolean) | undefined
A function that returns whether a given node is draggable.
draggable: (el: HTMLElementel) => {
        return el: HTMLElementel.Element.id: string
Returns the value of element's id content attribute. Can be set to change it.

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

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

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

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

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

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