@vielzeug/dnd

Framework-agnostic drag-and-drop. Drop zones with MIME filtering, sortable lists with drag handles, and explicit connected scopes — zero dependencies.

Package: @vielzeug/dnd  ·  Category: UI Interaction

Key exports: createDropZone, createSortable, createSortableScope, createTouchDragShim, applyReorder, matchesAccept

When to use: File drop zones with MIME filtering and async validation, or sortable lists with keyboard, FLIP animation, and optimistic-update support — zero dependencies.

Related: @vielzeug/ore · @vielzeug/scroll · @vielzeug/refine

@vielzeug/dnd is part of Vielzeug and ships as a zero-dependency TypeScript package with ESM+CJS output.

Installation

pnpm add @vielzeug/dnd
npm install @vielzeug/dnd
yarn add @vielzeug/dnd

Quick Start

import { createDropZone, createSortable } from '@vielzeug/dnd';

// Drop zone — with async validation and clipboard paste support
using zone = createDropZone({
  element: document.getElementById('dropzone')!,
  accept: ['image/*', '.pdf'],
  paste: true,
  onValidate: async (files) => checkServerQuota(files),
  onDrop: (files) => uploadFiles(files),
  onDropRejected: (files) => {
    showError(`${files.length} file(s) not accepted`);
  },
  onHoverChange: (hovered) => {
    document.getElementById('dropzone')!.classList.toggle('drag-over', hovered);
  },
});

// Sortable list — with FLIP hook and revert support
using sortable = createSortable({
  element: document.getElementById('list')!,
  keyboard: true,
  autoScroll: { edgeThreshold: 40, speed: 24 },
  onBeforeReorder: (from, to) => {
    // snapshot element positions here for FLIP animations
  },
  onReorder: (ids) => {
    const prev = currentOrder;
    setOrder(ids);
    return () => setOrder(prev); // enable sortable.revert() on server error
  },
});

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.