Reordering (drag) functionality in Tree component

[nimam-bentley]

Feature

Drawing Production team has come across a need for a sortable Tree component for authoring capabilities to reorder Sheet Index structures. This would be drag and drop of nodes between any level of containers.

Examples

Ive used the antd library (example of draggable) to implement it for our use.

I can share the logic I used to identify the node being dragged and the parent of whats dropped, if that helps.

Heres a sample of my usage

[mayank99]

@nimam-bentley Thanks for opening this issue. Just to confirm, when you say "sortable", you're talking about reordering, right?

Our Tree is fully customizable, so you should be able to use it with a third-party library until we natively support reordering. I would recommend looking at more well-researched solutions like React Aria, rather than Antd.

[nimam-bentley]

@mayank99 yes reordering.

Thanks for the suggestion, if reordering is not natively supported by the time we publish our component I'll consider changing to React Aria.

[Josh-Schifter]

We would like to use drag and drop to support these three workflows:

1. Drag an item from a tree and drop within the same tree to change the order.
2. Drag an item from a different component (ex. a list) and drop in the tree to insert it into the tree.
3. Drag an item from the tree and drop outside to remove it from the tree.

Dragging multiple items at once is a nice-to-have feature, but not required for us.

[mayank99]

@Josh-Schifter Thanks for the added context. Of those three workflows, only 1 is relevant for this particular feature request. 2 and 3 are way out-of-scope, as they require cross-component coordination.

I would also like to reiterate that the iTwinUI Tree is designed to be flexible and pluggable into many different kinds of setups. Drag-and-drop is no small undertaking, and we highly recommend using a dedicated library for it.

Would it help if we create an example demonstrating how to use iTwinUI Tree with an external drag-and-drop solution (like from React Aria, which was suggested above)?

[Josh-Schifter]

Would the example cover all three of the workflows? If so, that would be fine.

[Josh-Schifter]

To accomplish our goals, I don't think we need a full-blown general drag and drop solution. That said, I'm not opposed to any approach that enables what we need. Hopefully the attached image helps to convey the three workflows we want to deliver. Restated here:

1. Drag an item from a tree and drop within the same tree to change the order.
2. Drag an item from a different component (ex. a list) and drop in the tree to insert it into the tree.
3. Drag an item from the tree and drop outside to remove it from the tree.

Perhaps this can all be done with a single tree? However, it is important that the 'uncategorized' section be visually distinct from the main tree... it can't look like just another folder.