EffDND

Declare nodes Draggable

Just like HTMX lets you do AJAX with HTML attributes —
EffDND lets you do Drag & Drop with HTML attributes.

Zero configuration. Zero dependencies. ~5 KB gzipped (JS + CSS).

---

Links

• Docs
• SourceCraft
• GitHub

Quick start

1. Install

npm i effdnd

2. Add attributes to your HTML

<ul data-dnd-scope="todo" data-dnd-reorder="y">
  <li data-dnd-item="1">
    Buy chocolate
    <span data-dnd-trigger></span>
  </li>
  <li data-dnd-item="2">
    Read a book
    <span data-dnd-trigger></span>
  </li>
</ul>

3. Import once

import 'effdnd';
import 'effdnd/style.css';

That's it. No init(), no factory, no wrapper. Just import — and your HTML comes alive. The CSS import is optional but brings sensible default styles for trigger, item, scope and target states.

Features

• Declarative — behavior lives in HTML attributes, not JavaScript
• Framework agnostic — works with React, Vue, Svelte, Alpine, or no framework at all
• SPA-ready — MutationObserver picks up DOM added at runtime automatically
• Reorder & transfer — independent behaviors driven by their own attributes
• Auto-scroll during dragging (data-dnd-scroll)
• Cascaded styling preserved — the moving clone is inserted into the item's own parent, so inherited and parent-selector styles apply to it
• Runtime theming — style the active drag via data-dnd-state (active/passive) with your own CSS
• Event system — onDrop, onReorder, etc. with a typed detail
• Tiny footprint — ~5 KB gzipped (JS + CSS), zero dependencies
• SSR & TypeScript — full support

License

Apache 2.0