On drop of a node onto a group - is it possible to detect which child of the group has been dropped to?

[Geoff]

Hi, 

1. I have a group similar to the image below.   
2. When I drop another node onto a given child of that group I'd like to be able to take an action specific to that child
3. At the moment, I can only get a reference to the group (parent) and can't figure out how to determine the child that I have dropped onto

Here is a stackblitz of what I have got so far https://stackblitz.com/edit/angular-qskpvo

[Gowtham Gunashekar]

Hi Geoff 

 

Please refer to the following sample for how to find the child under the mouse pointer when drop event triggered. In the sample we have added code to iterate the node collection and took the mouse position form the position argument of the drop event and check whether any node under the point using the  containsPoint API and add another validation to the found nodes under the point is not the selected node and not the parent node. We have added change in the shared sample and added below for your references.  

 

Code snippet: 

  public drop(e: IDropEventArgs) { 

    console.log('droped parent', e.target.id); 

    var node = this.diagram.nodes.filter( 

      node => 

        node.wrapper.outerBounds.containsPoint(e.position) && 

        node.id !== e.element.id && 

        !node.children 

    )[0]; 

    console.log('droped child', node.id); 

 

  } 

 

 

Sample link: https://stackblitz.com/edit/angular-xhu33t 

 

Regards, 

Gowtham. 

[Geoff]

Thanks very much Gowtham.  

[Gowtham Gunashekar]

Hi Geoff, 

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

 

Regards  

Gowtham