Dragger
ariestar29k downloadsDrag and drop any block (paragraphs, headings, lists, etc.) to rearrange content like Notion.
- Overview
- Scorecard
- Updates13
Dragger
Drag and drop any block to rearrange content in Obsidian — just like Notion.
Features
- 🧱 Block-level drag & drop — paragraphs, headings, lists, tasks, blockquotes, callouts, tables, code blocks, math blocks
- 📐 Nested drag — horizontal position controls indent level; vertical position controls insertion row
- 🔗 Multi-line selection drag — long-press or click to select a range, then drag as a group
- 🎨 Customizable handles — 4 icon styles (dot / grip-dots / grip-lines / square), adjustable size, color, and horizontal offset
- 📍 Visual drop indicator — glowing line shows exactly where the block will land
- 📱 Mobile support — works on Android (tested)
Installation
Community Plugins
Open Settings → Community plugins → Browse, search Dragger, and install.
BRAT (Beta)
- Install the BRAT plugin
- In BRAT settings, click Add Beta Plugin and enter:
Ariestar/obsidian-dragger - Enable the plugin in Settings → Community plugins
Manual
Download main.js, manifest.json, and styles.css from the latest release, then copy them into:
<your-vault>/.obsidian/plugins/dragger/
Restart Obsidian and enable the plugin.
Usage
- Hover on the left edge of any block to reveal the drag handle
- Drag the handle to the target position — a glowing indicator shows where the block will be inserted
- Release to drop the block into place
Nested lists & blockquotes: move the cursor horizontally while dragging to control indent level.
Multi-line selection: long-press (touch) or click multiple handles to select a range, then drag the entire selection.
Mobile text long-press drag: when enabled, long-press a text line or rendered block content to drag a single block directly without reaching for the left handle.
💡 Tip: Enable line numbers in Obsidian settings for a better experience — the handle appears right at the line-number gutter.
Settings
| Setting | Description | Default |
|---|---|---|
| Handle color | Follow theme accent or pick a custom color | Theme |
| Handle visibility | Hover / Always visible / Hidden | Hover |
| Handle icon | ● Dot / ⠿ Grip-dots / ☰ Grip-lines / ■ Square | Dot |
| Handle size | 12 – 28 px | 16 px |
| Handle horizontal offset | Shift handle left (−80) or right (+80) px | 0 px |
| Indicator color | Follow theme accent or pick a custom color | Theme |
| Multi-line selection | Enable range-select-then-drag workflow | On |
| Mobile text long-press drag | On mobile, long-press a text line or rendered block content to drag a single block directly | On |
| Cross-file drag | Allow dragging blocks into another open file editor | Off |
| Drag source visual style | Shared style set used by drag-source and list-drop highlights (Outline only / Subtle highlight / Filled highlight) | Subtle highlight |
| Drag source highlight | Toggle highlight for the block being dragged | On |
| List drop highlight | Toggle highlight for list drop target area | On |
Compatibility
- Obsidian ≥ 1.0.0
- Desktop (Windows, macOS, Linux) + Mobile (Android tested)
Development
npm install
npm run dev # watch mode with hot reload
npm run build # production build
npm run test # run Vitest suite (116 tests)
npm run typecheck # TypeScript type checking
Pre-review checks
Run these checks before pushing to ensure local results match AutoReview:
npm install
npm run lint:review
npm run typecheck
npm run test
lint:review is configured with --max-warnings=0, so CI/AutoReview blocker rules are enforced locally.
License
Contributing
PRs and issues are welcome!
If this plugin helps you, a ⭐ on GitHub would mean a lot.