# Dragula — Drag and Drop So Simple It Hurts

> A framework-agnostic JavaScript library that provides simple, no-configuration drag-and-drop for DOM elements.

## Install

Save in your project root:

# Dragula — Drag and Drop So Simple It Hurts

## Quick Use
```bash
npm install dragula
```
```js
import dragula from 'dragula';
import 'dragula/dist/dragula.css';
dragula([document.getElementById('left'), document.getElementById('right')]);
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-7d81ac9d
Author: AI Open Source