Getting Started

Install

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

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

Usage

Drag and drop ships two main functions: dragAndDrop and useDragAndDrop. These can be imported for your framework of choice by using the subpath import @formkit/drag-and-drop/react. 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
})`