!License !Release !Downloads !Stars !CI !TypeScript !Issues

!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.

Headless core package

Dragger also publishes a platform-agnostic npm core. It does not import Obsidian, CodeMirror, DOM events, or editor dispatch APIs.

npm install md-dragger

Stable entry points:

import { DraggerRuntime } from 'md-dragger/drag';

For another editor platform, provide only input, document access, line locating, and preview rendering:

new DraggerRuntime({
  input,
  document: { getDoc, applyChanges },
  locate: { sourceLineFromInput, targetLineFromPoint },
  preview,
});

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

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