description: Framework-agnostic drag-and-drop. Drop zones with MIME filtering, sortable lists with drag handles, and explicit connected scopes — zero dependencies. package: dragit category: ui-interaction keywords: [drag-drop, sortable, file-upload, drop-zone, dnd, reorder] related: [craftit, virtualit, buildit] exports: [createDropZone, createSortable]

@vielzeug/dragit

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

Package: @vielzeug/dragit  ·  Category: Ui-interaction

Key exports: createDropZone, createSortable

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

Related: @vielzeug/craftit · @vielzeug/virtualit · @vielzeug/buildit

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

Installation

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

Quick Start

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

// Drop zone — file drag-and-drop with accept filtering
using zone = createDropZone({
  element: document.getElementById('dropzone')!,
  accept: ['image/*', '.pdf'],
  onDrop: (files) => {
    console.log('Accepted:', files);
  },
  onDropRejected: (files) => {
    console.log('Rejected:', files);
  },
  onHoverChange: (hovered) => {
    document.getElementById('dropzone')!.classList.toggle('drag-over', hovered);
  },
});

// Sortable list — reorder items via drag
using sortable = createSortable({
  element: document.getElementById('list')!,
  keyboard: true,
  autoScroll: { edgeThreshold: 40, speed: 24 },
  dragImage: (id, item) => item,
  onReorder: (ids) => {
    saveOrder(ids);
  },
});

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.