Interface to transfer tree nodes from one tree structure to another tree structure

Question

I am looking for an alternative other than drag and drop. Currently i am using kendo ui treeview drag & drop.

TreeView / Drag & drop

Please mention some nice alternative for the same(other than drag and drop).

Answer 1

With enough room, you could use a variation of the UI described in this question.

Replace the lists with trees.

This type of UI supports drag and drop or point and click.

There will be 3 clicks for each move:
* click on node to be moved
* click on target location
* click on > or < button

You will have to decide how the user specifies target location, e.g., parent node, sibling node.

This is what my company has been using for years because we also use the UI described in question referenced above. The similarity in the UIs makes the interaction easy to learn.

Answer 2

I can certainly understand the requirement for an alternative to drag and drop, even if the drag and drop is retained as the preferred method. Dragging and dropping is almost certainly the easiest method for most people but not everyone is physically able to drag and drop. Maintaining keyboard accessibility is important.

One common solution is to include the ability to edit the parent of each item. That would mean adding some sort of 'edit' or 'move' link next to each item, revealing a representation of the tree and the ability to select which tree item is the parent.

Answer 3

Cut and Paste commands are the usual way to do this in the desktop world, of which your users may be already familiar. If the tree is generally editable, then also include Copy (and Paste) so users can more easily make changes within the tree. Bonus points if Cut/Copy and Paste also work with ^X, ^C, ^V so that the menu/keyboard method is almost as fast as dragging and dropping. More bonus points if you can figure out how to use the OS's actual clipboard (e.g., with XML?) so users can paste nodes outside the app (e.g., to serve as an export function or for temporary storage).

If users can also delete and do other things to a tree node, then control the clutter and save real estate by using desktop-style object-selection-action design with centralized Cut, Copy, Paste, Delete, etc. tools/menu items, rather than repeating the controls for each node. Bonus points for supporting multi-selection. With that, your app is well on its way to being as good as 1995.