Drag & drop multiple node

[marekalgoud]

Hello,

I would like to drag and drop multiple leaf. I've activated the multi active tree options, and override the drop function (in the options.actionMapping) as follow :

drop: (tree, node, $event, { from, to }) => {
    const activeNodes = tree.getActiveNodes();
    if (activeNodes.length > 1) {
        activeNodes.forEach(item => {
            tree.moveNode(item, to);
        });
    } else {
        tree.moveNode(from, to);
    }
}

But it raises an arror if we try to move two nodes from the same parent. I found a workaround : in the tree.model.js, in the move function, I've replaced

var fromIndex = node.getIndexInParent();
var fromParent = node.parent;
if (!this._canMoveNode(node, fromIndex, to))
    return;
var fromChildren = fromParent.getField('children');

by

var fromParent = node.parent;
var fromChildren = fromParent.getField('children');
var fromIndex = fromChildren.findIndex(item => item.id == node.id);
if (!this._canMoveNode(node, fromIndex, to))
    return;

Maybe not the best solution, as it will recalculate the node position in his parent each time.

By the way, it would be great to add an "allowMultipleActive" option. It would be useful to avoid to select different kinds of node (for example, I active a leaf, I would like to prevent to activate a node with children)

Thanks for your work !

[ChiaraDipi]

Thank you @elzebu for sharing this solution. I join you in saying that it would be really helpful to add an "allowMultipleActive" option, or at least if your change was actually added in the main repo.

[adamkleingit]

1. @elzebu, the code you wrote is a good solution for these edge-cases
2. I think allowMultipleActive option can be a short-hand syntax for:

  mouse: {
    click: TREE_ACTIONS.TOGGLE_ACTIVE_MULTI
  },

3. Preventing activating using allowActivate function? I think it also makes sense to put a disable-activate class on these nodes so the user can decide to display a different style (like disabled cursor)

Want to make a PR for all of these?

[ulymor]

Does it exist any way to drag and drop several nodes together? I have tried to select two nodes (via pressed Ctrl key) and move them but as a result I have got js error and only one node has been moved. I have used the same approach like @elzebu But changes in code didn't help because on second call of function node.parent equals to null.

To reproduce select at least two nodes via pressed Ctrl key and try to Drag and Drop them. https://stackblitz.com/edit/angular-6ys7sc

[adamkleingit]

@ulymor this feature doesn't exist. Feel free to open a PR for allowing it

[3103arsl]

Can we drop multiple nodes from one tree to another tree? Please guide.

[ebouvi01]

I second what @ulymor said. In the case of multiple calls of move function, source parents are spliced.

A possible workaround is saving the parents before moving and setting them to sources again. Like this:

froms.forEach(from => {
  fromParents.push(from.parent);
});
froms.forEach((from, i) => {
  from.parent = fromParents[i];
  from.treeModel.moveNode(from, { parent: target, index });
});

[DmitriyKomelkov]

@ulymor @ebouvi01 You can implement this feature without error by some change code of @marekalgoud :

drop: (tree, node, $event, { from, to }) =>
        {
          const activeNodes = tree.getActiveNodes();
          if (activeNodes.length > 1) {
            activeNodes.forEach(item => {
              const currentItem = tree.getNodeById(item.id);
              tree.moveNode(currentItem, to);
            });
          } else {
            tree.moveNode(from, to);
          }
        }

Pls pay attention you do not have to change tree.model.js.