Dragger

by ariestar
5
4
3
2
1
Score: 41/100

Description

This plugin has not been manually reviewed by Obsidian staff. Drag and drop any block (paragraphs, headings, lists, etc.) to rearrange content like Notion.

Reviews

No reviews yet.

Stats

stars
41,710
downloads
0
forks
24
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

README file from

Github

English 中文

Dragger

Drag and drop any block to rearrange content in Obsidian — just like Notion.

Obsidian License Release Downloads Stars Ask DeepWiki

gif

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 — click or long-press to select a range, then drag as a group; native checkboxes mark selected blocks on desktop
  • 🎨 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 — long-press drag mode, bottom toolbar block type conversion, edge auto-scroll during drag
  • ⌨️ Keyboard shortcuts — press Escape to exit multi-select mode on desktop
  • 🗑️ Block type menu with delete — convert block types or delete the current block from the context menu

Installation

Community Plugins

Open Settings → Community plugins → Browse, search Dragger, and install.

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

  1. Hover on the left edge of any block to reveal the drag handle
  2. Drag the handle to the target position — a glowing indicator shows where the block will be inserted
  3. 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. Press Escape to exit multi-select.

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.

Block type conversion: right-click a handle (desktop) or use the bottom toolbar (mobile) to convert block types or delete the current block.

💡 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 Grip-dots
Handle size 12 – 28 px 20 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)

Roadmap

  • Multi-column layout — drag blocks into side-by-side columns
  • More style customization — handle icons, colors, themes
  • Interaction refinements — better visual feedback, smoother gestures
  • Cross-document drag — move blocks between different notes

Development

npm install
npm run dev       # watch mode with hot reload
npm run build     # production build
npm run test      # run Vitest suite (229 tests)
npm run typecheck # TypeScript type checking
npm run lint -- --max-warnings=0

License

MIT

Contributing

PRs and issues are welcome!

If this plugin helps you, a ⭐ on GitHub would mean a lot.

Community

QQ Group WeChat Donate
QQ Group WeChat