Introduction

FormKit's Drag and Drop is a small library for adding data-first drag and drop sorting and transferring of lists to your app. It's simple, flexible, framework agnostic, and clocks in at only ~4Kb gzipped.

Data-first means your array is the source of truth: drag an item and your data reorders with it — no DOM spelunking, no sortable-state to sync. It ships with first-class wrappers for React, Vue, and Solid, works in plain JS/TS, and has built-in support for multi-drag, animations, insert indicators, drop zones, drag handles, and list-to-list transfers.

Quick start

npm install @formkit/drag-and-drop

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

export function Tapes() {
  const [ref, tapes] = useDragAndDrop([
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
  ]);

  return (
    <ul ref={ref}>
      {tapes.map((tape) => (
        <li key={tape}>{tape}</li>
      ))}
    </ul>
  );
}

That's a fully sortable list — drag the items and tapes stays in order. The same API is available for Vue, Solid, and vanilla JS/TS.