question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[QUESTION] Is it possible to do a nested/tree-type draggable list?

See original GitHub issue

Awesome library!

I was wondering if there is an example or documentation on how to do nested lists, for example a list like:

  1. Item
  2. Item
    1. Item
      1. Item
    2. Item
  3. Item

Could you drag and item, say 2.i.a to the root level and/or drag as a sub item of something, say 3?

Thanks for any direction you can give!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
isaacHagoelcommented, Oct 24, 2020

It’s in the readme. Its title is ā€œcrazy nestingā€ 😃

On Sat, Oct 24, 2020, 14:13 Dana Woodman notifications@github.com wrote:

@isaacHagoel https://github.com/isaacHagoel yes! That’s great! Maybe it could be in the readme or did I miss it? Thanks šŸ»

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/168#issuecomment-715664359, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCYZMUGTOGINY45GGX3SMJA6RANCNFSM4S3RLFIQ .

0reactions
kimaldiscommented, Mar 23, 2021

I’m working on something similar. Crazy nesting almost does it for me, I’d like to be able to drag, say, node 3 onto node 2, making it a sub node of 2. Or item 9 onto item 5, making 9 a child of 5 in addition to inserting it after 5. SOme way of distinguishing between drag onto and drag after

Generalising, I’d like to be able to drag any leaf or branch onto any other leaf or branch, rearranging the tree in any way possible.

I’m halfway into a solution using vanilla draggable. It turns out to be a little tricksy. kyp.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Nested list (tree) - how to nest elements by dragging to the right?
1 Answer 1 ... You can get the mouse position given in the start event under event.originalEvent and in the onMove event using...
Read more >
vue-draggable-nested-tree - npm package - Snyk
A node is default draggable and droppable. You can set draggable and droppable property of a node. The another way is listen event...
Read more >
Simplifying Drag and Drop (Lists and Nested Lists)
I made two demos for this article. In the first, I create Drag and Drop components that simplify usage with the react-beautiful-dnd library....
Read more >
Angular Material Nested Tree - Step-by-Step Example
... try restarting your device. Your browser can 't play this video. ... Angular Material Nested Tree - Step-by-Step Example.
Read more >
How To Create Drag and Drop Elements with Vanilla ...
Dragging-and-dropping is a common user interaction that you can find in many graphical user interfaces. There are pre-existing JavaScriptĀ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found