[Question] Move multiple items at once (similar to CRTL + Click) about react-sortable-tree HOT 8 OPEN

Are there any plans to add this feature?

from react-sortable-tree.

In startDrag, remove all selected nodes from the tree, not just the one. This method produces the tree with all the dragged nodes removed, which will serve as a base when adding the nodes in at different spots during hover.

In dragHover, we insert the node at the appropriate location in the tree. Currently the insertNode tree util function only handles one node insert at a time, so you might want to modify the method to handle node array inserts as well as single node inserts. This applies to the moveNode method as well (move node is the one that finally sets the data in place after dropping the element).

Also inside the dragHover method, we do some row swapping so we can show the tree with the dragged nodes cut in like so:

See, this tree structure doesn't naturally occur when it shows exactly where the nodes end up. They end up going where the blue arrow points, but keeping the nodes in places results in a smoother dragging experience. To make this possible, I do row swapping, so every visible child of the dragged node gets moved right below the main dragged node. To make this work with multiple nodes, you'll need to calculate the number of visible children for each node, and probably do each swap independently. Something like:

+-O--AA
|
+-O--BB
| |
| +-O--CC
| | |
| | +-O--DD
| |
| +-O--EE
|
+-O--FF

Here, if you wanted to move CC and FF to the root level by
clicking both and dragging to the left at the height of CC,
you would end up with something like:

+-O--AA
|
+-O--BB
| |
##########
+-O--CC
| |
| +-O--DD
|
+-O--FF
##########
  |
  +-O--EE


(area between the pound signs is the dragged content)

I know this is a lot... if you're feeling at all discouraged, know I'm thankful for you just reading this far ;)

The next big area is inside drag-and-drop-utils.js. You'll need to change the methods in here to handle multiple dragged nodes. An easy way to spot relevant areas is to look for draggedNode. You'll need to alter the node prop in react-sortable-tree.js to change the reference from the single node to the multiple selected nodes.

You'll need to consider all the dragged nodes in the calculations against maxDepth.

Finally (as far as I can tell), in node-renderer-default.js, you'll need to check all of the dragged nodes to see if the node rendered is a child of one of them. This info is used to make child nodes semitransparent while dragging.

from react-sortable-tree.

Making the drag-and-drop ghost (/hovering thing) look like your image would be quite challenging, if not impossible, with the native drag-and-drop API. However, the other parts are feasible, like the movement of multiple things. The UI would probably need some tweaking to make it more obvious that such an action is possible (or currently happening).

I can understand the reasoning behind this feature, and if someone wants to make it I would support them and point them towards the relevant areas of the code.

from react-sortable-tree.

I'm no expert- but I'd like to contribute by giving it a try. Point me in the right direction

from react-sortable-tree.

@fritz-c wow! I did read all that, a few times over. I've had a poke around and didn't get very far with success. I am very new to react but my attempts were using this.state, and trying to assingn a keystroke to it. But no luck. Will this be a feature planned for later development?

from react-sortable-tree.

I don't have a roadmap drawn up for the development of this component, and will probably just be doing bug fixes in the near future. That being said, I think it's far from being perfect and could use improvements like the one you're talking about here. I'll leave this issue open and add a "Help Wanted" tag, and poll for the demand for this feature for now.

If you're new to React, working on this component might be a good chance to learn, but I wouldn't rush into it too quick. With a bit more time working with React on normal projects, I think you'll get the hang of it and have a much easier time looking through the code here.

from react-sortable-tree.

@steventebrinke I'm currently a little busy with work. Feel free to submit a PR

from react-sortable-tree.

@steventebrinke was a PR submitted for this?

from react-sortable-tree.