Blueprint: Tree drag-drop reordering

[AdamGaskins]

Is there some way I can reorder the items in my tree using drag-drop?

[llorca]

Not out-of-the-box, but React DnD should help you achieve it: https://github.com/gaearon/react-dnd

[G710]

Notice that the label can be a JSX object. I'm currently also implementing this and use the label to drag and drop the nodes.

[giladgray]

@G710's suggestion is very clever! Like a little iOS "edit" handle. That's how I'd implement this.

This will not find its way into core as react-dnd is a significant dependency that we don't want to take on. However, we'd be happy to make some changes to make "after-market" DnD easier so please echo back if you have any challenges!

[irshadnilam]

@G710
Did you manage to implement it?

[G710]

I'm pretty sure I already got it working when I wrote this comment. If you want to I can dig up the repo and see if I can create a short gist for this.

[irshadnilam]

@G710
Please do that. I'd really appreciate if you could, even point me the repo you implemented it on (if it is public).
Thanks

[G710]

Hey, sorry to let you wait. As it turned out we changed our concept entirely so we don't use react-dnd in this part anymore. But I setup a gist and a codesandbox with a small example for you. That should give you an idea on how to implement the rest:
https://gist.github.com/G710/6f85869b73ff08ce95ca93e31ed510f8
https://codesandbox.io/s/7z9m3ppx91

For more info checkout the awesome blueprint and react-dnd documentation.

[irshadnilam]

@G710
Lovely, Thanks for the gist. I'll check em out.

[jtheisen]

@G710 The sandbox doesn't seem to work anymore - dragging a row does nothing.

[G710]

That's strange, maybe some changed something? Anyway, try copy pasting the gist, it contains the original code that worked for me.
I can't help you much more, as I am away from my computer for the next few weeks.

---

Von: Jens Theisen [e-mail]
Gesendet: Donnerstag, 6. September 2018 14:04:28
An: palantir/blueprint
Cc: G710; Mention
Betreff: Re: [palantir/blueprint] Tree drag-drop reordering (#392)

@G710https://github.com/G710 The sandbox doesn't seem to work anymore - dragging a row does nothing.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/palantir/blueprint/issues/392#issuecomment-419068538, or mute the threadhttps://github.com/notifications/unsubscribe-auth/APvwjYCjuky7Os8IRJtqXjqGlM65Alfzks5uYQ9MgaJpZM4LXKEN.

[t3db0t]

Did anyone get this to work? I'd love to do this too

[G710]

Hello again. I have created another codesandbox. This time using the new hooks for react-dnd which makes this function really easy and tidy to implement.

https://codesandbox.io/s/great-napier-nd6dy

In this example, if you drop the first item on the second item the drop function is triggered and will log the dropped object to the console. Make sure to drag on the label. :-)

[t3db0t]

@G710 Amazing, thank you!

[N8th8n8el]

Is there a way to make the whole node (row) draggable (not just the label area)?

[G710]

Well, yes but it would be a bit more involved.

• First you have to extend from the TreeNode class and create your own TreeNode. There you can add all dnd functionality. See here for all required props: https://blueprintjs.com/docs/#core/components/tree.tree-node
  I'm not sure if you can extend a class and use hook functions, so prepare yourself to use the classic dnd functions.
• Secondly you build a tree using the TreeNodes and their respective childNodes props.
• Last but not least you set your nested TreeNodes as the content of your tree (instead of the array you see in my codebox).

Hope this helps.