Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Overview

Demo

Demo

Features

  • Drag-n-drop for list items in the same pane and between different panes
  • 3 modes: move block, copy block, embed block
  • Automatic reference link generation for dragged block
  • Live editor support
  • Multi-line list items support
  • Visual guidance during dragging

Roadmap

  • Support for arbitrary block dragging - paragraphs, headings etc

How to use

You can see a drag-n-drop handler in the gutter. You can drag it and drop at line you want.

For now you can drag only list items, so handler will appear only near lines that belongs to list

Defaults

  • Drag and drop from one pane to another without modifiers will create embed link for the block. Id for block will be automatically created.
  • Drag and drop in the same pane without modifiers will move the block.
  • Drag and drop with "Shift" modifier will copy the block.

You can change behavior for settings in the plugin settings tab.

How to install

From within Obsidian

NOT YET AVAILABLE

You can activate this plugin within Obsidian by doing the following:

  • Open Settings > Third-party plugin
  • Make sure Safe mode is off
  • Click Browse community plugins
  • Search for "Drag-n-Drop"
  • Click Install
  • Once installed, close the community plugins window and activate the newly installed plugin

BRAT

  • Install BRAT plugin
  • Add repository artem-barmin/obsidian-block-drag-n-drop
  • Enable it

Manual installation

Download main.js, manifest.json, styles.css from the latest release and put them into /.obsidian/plugins/obsidian-outliner folder.

Comments
  • FR: Make moving more visually intuitive

    FR: Make moving more visually intuitive

    1. Smart move : As moving one type of block to the other is extremely rare, removing the lines and only allowing moves between the same types of block will keep the user from making mistakes :
      • when moving list, show line between other list item only, not between paragraph or headings ;
      • when moving headings, show line between headings only, not between paragraph or lists items ;
      • when moving paragraphs, show line between paragraphs and heading, but not between list items.
    2. Indentation help : When moving list items between indentation levels, make the line length adapt to the destination to show the user at which level he is putting the list items ;
    3. Disable cursor : Keep only the line destination and disable the cursor when moving block as we only need to move between blocks, not before, in the middle or after blocks (in the same line) ;
    4. Visual help : When dragging the dots in the left, display the content you're moving in a box, to help the user understand what is included in the move.
    enhancement 
    opened by imeed166 19
  • Can't get it to work

    Can't get it to work

    I did not find it in the Community collection so I installed it via BRAT. I enabled it, refreshed, quit/relaunched Obsidian, all to no avail.

    I am on MacOS, Obs 0.14.6, installer version 0.14.5.

    opened by DutchPete 13
  • Work with CM6?

    Work with CM6?

    The plugin doesn't seem to work with CM6 (on Obsidian 0.16.2). It seems the at least the package names have changes (@codemirror/gutter and @codemirror/rangeset are deprecated), but quickly changing/updating those in the base could doesn't work unfortunately. Is there a way to get this plugin to work with CM6?

    opened by mdbraber 11
  • Replace use of six dot handle with the builtin fold mark handle.

    Replace use of six dot handle with the builtin fold mark handle.

    I LOVE this plugin but found it hard to keep using since the six dot handles one each line are quite distracting for general usage.

    I have no idea if the existing Obsidian source code allows easy extension of the drag and drop capability for the built-in folding marker used in obsidian. My sense is this plugin will only achieve large scale usage once, the six dot handles are removed and the built-in folding handle is used instead. (but of course I have no idea if this is even possible given the underlying code)

    wontfix 
    opened by oblinger 4
  • FR: Show drag handle only on hover

    FR: Show drag handle only on hover

    Just like in notion, show drag handle only when hovering over a line.

    https://user-images.githubusercontent.com/38974541/163826861-e4570157-b24d-4328-8521-ac6a7e8dcc78.mov

    enhancement 
    opened by imeed166 4
  • Bug: undo doesn't work until after clicking on text

    Bug: undo doesn't work until after clicking on text

    I have to select text before undoing the move. Is it possible to make it work right after moving without having to click on text ?

    https://user-images.githubusercontent.com/38974541/163835664-d5142366-6e6e-4a59-a74b-07a111ec341f.mov

    opened by imeed166 3
  • why it does not shade any block?

    why it does not shade any block?

    excuse me nice plugin and i was looking for smth like Notion > im a notion user thank you very much but while im dragging a block the shading does not appear for some reason,
    I mean the blue color that indicates where you dragging the thing it does apear with you instantly like Notion but with me it does not work at all I can drag an drop but I need an indication , its very hard to do it by intuition

    opened by notionlike 1
  • Changing color of gutter handle

    Changing color of gutter handle

    What is the right way to override color of gutter marker? I tried adding CSS snippet:

    .dnd-gutter-marker {
        color: yellow
    }
    

    but that doesn't work.

    opened by sergei-dyshel 1
  • Request: move headers like bullets

    Request: move headers like bullets

    I like to use headers to better outline my notes so it would be nice if the header with its sub content could be moved just like with bullets/task boxes!

    opened by pikacho13 1
  • Drag and drop blocks without indentation

    Drag and drop blocks without indentation

    Currently dragging and dropping a block indents it under the block it has been dropped. Sometimes, you want just to reorder a block without indentation by dragging and dropping it.

    I would request you to consider adding this feature.

    Cheers

    opened by bpriyum 1
  • This Plugin doesn't work with the Minimal Theme

    This Plugin doesn't work with the Minimal Theme

    I have installed the plugin through the community plugin and launched it, but it doesn't work. The version of Obsidian and the plugin is following.Ob is V0.15.9,and the plugin is 1.1.0. image image image image

    opened by iFryRice 0
  • FR - Is it possible to drag and drop from the search panel?

    FR - Is it possible to drag and drop from the search panel?

    • Hi i'm not sure i understand the plugin well, but i thought it would be possible to drag and drop blocks embeds from the search panel (or from backlinks) by holding shift or alt, by i can only drag drop file links. Is there something that i'm missing or is it not a feature (and in that case it would a FR) ? Thanks!
    opened by nicolasmarc1 0
  • Can't drag to reorder top level items

    Can't drag to reorder top level items

    Is it possible to reorder the top level items in a single level list? I can drag items from the top level to the level below and reorder items in the second nested level, but dragging items within the top level doesn't work. I updated to the latest version of the plugin today and tried disabling all other plugins. I'm using the default theme and Obsidian 1.0.

    DragDrop

    opened by BryanWall 2
  • Can't collapse headers

    Can't collapse headers

    This isn't a huge deal since it's easy to turn the plugin off and on again, but it seems like with it turned on I cannot collapse headers. I also have Outliner and Zoom installed, but turning them off and leaving this on didn't resolve the issue.

    I'm an experienced software engineer but not familiar with coding for Obsidian at all yet and have to learn JS/TS. If someone could give me some guidance, I might be able to spend some time digging in.

    opened by micseydel 0
  • Failed to load ... out of range for changeset of length ...

    Failed to load ... out of range for changeset of length ...

    I've encountered the issue discussed at https://forum.obsidian.md/t/error-out-of-range-for-changeset/41783/6 and discovered that disabling Drag-n-Drop for blocks also makes the failed to load situation go away.

    opened by unlockpossibility 1
  • Moving block to target file and link or embed it to origin file

    Moving block to target file and link or embed it to origin file

    Firstly, this operation could replace the core plugin Note composer's function that extracts selected text to a new file and then embed or link it to the origin file, but more smoothly.

    Secondly, when we organize the content, for example, someone tries to move the topic Cooking's content from Daily Pages 2022-08-01.md to Cooking.md. After finishing it, retaining the association between the two files so that reviewing them, it's a high frequency.

    Thanks to the author, you have created a superb piece!

    opened by hqweay 0
Releases(1.2.0)
Owner
Co-Founder of @FreshcodeIT Passionate about PKM/Clojure
null
Theme Redone is a custom WordPress theme starter/framework with its own Gutenberg blocks solution and a CLI that speeds up the block creation process.

Theme Redone The Framework for Developing Custom WordPress Themes with its own Gutenberg Blocks creation solution. Theme Redone is a custom WordPress

null 103 Dec 30, 2022
Logseq-craft-theme - Craft Theme for Logseq

Craft for Logseq Almost all creativity requires purposeful play. A Craft insprir

Alexander Rink 33 Oct 26, 2022
Move all the disks from the left hand post to the right hand post, only moving the disks one at a time and a bigger disk can never be placed on a smaller disk.

Hanoi Tower Description The Tower of Hanoi was a famous problem posed by a mathematician in 1883, The "puzzle" is to move all the disks from the left

Dustin J Sellers 1 Feb 5, 2022
Beautiful and easily customizable themes for Roam Research.

Roam Studio Beautiful and easily customizable themes for Roam Research. More themes coming soon! If you want to support my work Become a GitHub Sponso

Alexander Rink 26 Dec 31, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and easy to use it

Digispark_Overmaster Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and

Yehia Elborma 5 Nov 14, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional

Hootsuite 3.6k Dec 14, 2022
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable Sortable is a JavaScript library for reorderable drag-and-drop lists. Demo: http://sortablejs.github.io/Sortable/ Features Supports touch dev

SortableJS 26.1k Jan 5, 2023
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
Drag and drop Argo Workflows tool.

Visual Argo Workflows Live demo The goal of this project is to make it easier for everyone on a team to construct and run their own workflows. Workflo

Artem Golub 38 Dec 22, 2022
Drag-and-drop editor for Docassemble interviews

GraphDoc Introduction GraphDoc is a web-application that has been developed on behalf of the Maastricht Law & Tech Lab, which is part of Maastricht Un

Maastricht Law & Tech Lab 16 Dec 28, 2022
Nested Sort is a JavaScript library which helps you to sort a nested list of items via drag and drop.

Nested Sort Nested Sort is a vanilla JavaScript library, without any dependencies, which helps you to sort a nested list of items via drag and drop. U

Hesam Bahrami 40 Dec 7, 2022
🔖 A drag-and-drop form builder for Bootstrap 4.

Bootstrap v4 Form Builder A drag-and-drop form builder for Bootstrap 4. ❓ Get Help There are few ways to get help: Please post questions on Stack Over

Bloggify 107 Dec 22, 2022
An example Worker for copying Cloudflare Pub/Sub messages to R2 storage

pubsub-to-r2 An example Cloudflare Worker that acts as an on-publish hook for Pub/Sub and copies a subset of messages to R2 object storage. To deploy

Matt Silverlock 4 Jul 1, 2022