Dragula — Drag and Drop So Simple It Hurts

Introduction

Dragula provides drag-and-drop functionality with zero configuration. Pass it an array of container elements, and items inside them become draggable and reorderable across containers immediately. No data attributes, no class names, no complex setup.

What Dragula Does

• Enables drag-and-drop between multiple containers with one function call
• Reorders items within a single container or moves them across containers
• Provides visual feedback with a mirror element that follows the cursor
• Emits events for drag, drop, cancel, remove, and shadow positioning
• Works with any DOM structure without requiring specific markup

Architecture Overview

Dragula listens for mousedown and touchstart events on registered containers. When a drag starts, it creates a mirror element (a visual copy) that tracks the pointer. As the pointer moves over valid containers, Dragula calculates the insertion point using element geometry. On release, the original element is moved in the DOM to the drop position. The entire operation is DOM-based with no virtual model.

Self-Hosting & Configuration

• Install via npm or include the standalone script and CSS
• Call dragula(containers, options) to initialize
• Set moves callback to control which items are draggable
• Set accepts callback to restrict which containers accept drops
• Use copy: true to duplicate items instead of moving them

Key Features

• Zero-configuration default that works out of the box
• Framework-agnostic: works with vanilla JS, React, Vue, Angular, or any DOM
• Touch device support without additional plugins
• Spilling: configurable behavior when items are dropped outside containers
• Lightweight at ~4 KB gzipped with no dependencies

Comparison with Similar Tools

• SortableJS — more features (multi-drag, nested groups, animations) but larger; Dragula favors simplicity
• react-beautiful-dnd — React-specific with accessibility focus; Dragula is framework-agnostic
• dnd-kit — modern React toolkit with sensors and modifiers; heavier abstraction than Dragula
• HTML5 Drag and Drop API — native but inconsistent across browsers and limited on mobile

FAQ

Q: Can I restrict which items are draggable? A: Yes. Pass a moves(el, source, handle, sibling) function that returns true for draggable items.

Q: Does Dragula work with React? A: Yes. Initialize in a useEffect hook, passing ref containers. Clean up with drake.destroy() on unmount.

Q: Can I animate the drop? A: Dragula does not include animation. Apply CSS transitions on the container children for smooth reordering.

Q: How do I handle drop events? A: Listen with drake.on('drop', (el, target, source, sibling) => { ... }) to update your data model.

Sources

• https://github.com/bevacqua/dragula
• https://bevacqua.github.io/dragula/