Treeview and Diagram Drag and drop

[nqaba nleya]

Good day,

I am having an issue with regards to the use of the Treeview component and the diagram drag and drop.

On Drag enter from the treeview, i create a node with custom HTML then add it to the diagram. The node gets created but not under the cursor as the user would expect it to happen. Just like in the link below.

https://stackblitz.com/run?file=src%2Fapp.component.html,src%2Fapp.component.ts

Attached is an image to illustrate 

What are the properties that are associated with control the positioning during dragenter

[Vivisa Ganesan]

Hi,

We have modified the sample to meet your requirements. In this version, we have bound the mouse cursor position to the offsetX and offsetY properties of the node in the dragEnter event. The mouse position is accessed using the Angular mousemove event. Refer to the sample and code snippet below:

 

  public dragEnter(args: any) {

    let lable = '';

    if (args.dragData) {

      lable = args.dragData.text;

    }

    let node = {

      id: 'node' + this.index,

      data: { Name: lable, Id: 'node' + this.index },

      annotations: [{ content: lable }],

      offsetX: mouseX,

      offsetY: mouseY,

    };

    args.dragItem = node;

  }

Sample:

6zk3au (forked) - StackBlitz

Regards,

Vivisa

[nqaba nleya]

This works. Thank you!

[Vivisa Ganesan]

Hi,

You're welcome! Please let us know if you have any further queries on this. We will be happy to assist.

 

Regards,

Vivisa