Angular-tree-component: Drag and Drop external Element -> Need better example

[JanSchuermannPH]

I am trying to drag and drop external elements into the tree.

I have defined my external element like so:

<span [treeDrag]="{displayName: item.displayName}" [treeDragEnabled]="true">{{item.displayName}}</span>

But I get an error when dropping the element

EXCEPTION: Error in ./CreateTemplateComponent class CreateTemplateComponent - inline template:66:14 caused by: node.getIndexInParent is not a function

The docs suggest to implement a custom handler, but how should this handler look like?

You specify the element that will be reported as 'from' in actionMapping (instead of the node when dragging a tree node).

Does this mean I need to create a new TreeNode, add it to the tree, update the view and then move the node, so the tree kind of handles it like an internal drop (and not external)?
It's extremely confusing for me, can someone clarify?

[adamkleingit]

Hi,

I updated the docs.

You don't need to create a new TreeNode.
You need to update the original nodes structure and then call tree.update() on the tree.

Checkout the new docs: https://angular2-tree.readme.io/v3.3.0/docs/drag-drop

[JanSchuermannPH]

Hi,

I experimented in the meanwhile, and while the "new" docs are still showing the same (which for me isn't a good example, but let's forget about that for a moment).

I am re-assigning the nodes array (which automatically triggers the update) and so far things are going pretty well.

Two issues that I have found and I am not sure if they happen because I still didn't get everything right, or it's an actual bug:

1. If an external element is dragged into the tree to act as a new root (1st level) node, the node disappears and is not shown on the treemodel, although it is shown when debugging and checking the "to" parameter. This may be because of the way I am inserting the new element:

let _from  = Object.assign( from, { nodes: [] } );
this.nodes = this.nodes.concat( _from );
setTimeout( $ => {
    let dragNode: TreeNode = tree.getNodeById( id );
    TREE_ACTIONS.MOVE_NODE( tree, node, $event, { from: dragNode, to } );
} );

This works absolutely fine and the nodes land where they should be, but not if they won't be a child of something.

1. When dropping an external element to be a child of a previously dropped external element, the element is moved correctly, but the element can't be collapsed anymore (the parent can be collapsed, but not the node that received a new child). I tried adding or removing an empty array to the nodes property (as shown above) but that apparently doesn't change anything.

[RajKrishnam]

Facing the same issue while dragging an external element into the tree.
@JanSchuermannPH From your answer above, seems the drag is working for you. Could you please share the code snippet and where to place it exactly for it to work.

I am new to angular. Any help would be appreciated.

Thank you.

[musti2]

The so called 'updated docs' haven't provided any clue as to what needs to happen to drag an external element into the tree.

Can someone please provide a better example?