1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. How to set properly position and dimension when drag and drop elements to another in the Diagram Control

How to set properly position and dimension when drag and drop elements to another in the Diagram Control

Hi everyone!

I have an issue when drag and drop elements to another in Diagram Control

I created a Diagram Shape(object A) into Diagram Control then I drag and drop another Diagram Shape(object B) into object A, the first I convert object A as a container to contain object B, I use children of Node property.

I assign as below

NodeA.Children = a array include id of the object A,B,C... but I cannot set right position of the object B inside object A, although I used some properties offset of the object B, but I cannot set properly position

This is my code

diagramData.nodes[counti].width=100;

diagramData.nodes[counti].height=100;

diagramData.nodes[counti].offsetX=0;

diagramData.nodes[counti].offsetY=0;

croj.push(diagramData.nodes[counti].id);

diagramData.nodes[i].children=croj;


diagramData.nodes[counti] as object B

diagramData.nodes[i]. as object A

croj this is array of the id for node B

these properties Width, Height, OffsetX, OffsetY to set dimension and position for object B

but the object B is not properly dimension and position

This is issue image


Please help me to resolve this one.

Thanks!


18 Replies
AR Aravind Ravi Syncfusion Team May 9, 2022 12:36 PM UTC

Hi Pham,

On analyzing the provided code snippet , we suspect that you need to add dropped node as a children to the diagram node. By using the drop event we can able to achieve your requirement. To perform the drag and drop of nodes in the diagram, enable the AllowDrop constraints to the nodes. At the time of every node render node defaults call back method gets trigger. In the node defaults method set node constraints as AllowDrop. So, for every node constraint is set as AllowDrop. Please refer to the below code example for how to set node constraints in the node defaults method.


getNodeDefaults: function (node) {

    var obj = {};

    if (!obj.children) {

      obj.constraints =

        ej.diagrams.NodeConstraints.Default |

        ej.diagrams.NodeConstraints.AllowDrop;

    }

    return obj;

  },


By using drop event we can drag and drop a certain node to a different. When we drag the node and mouse hover on another node highlighter shows. After the node gets dropped drop event gets trigger. In that event get the dropped node from element arguments and get the node which is under dropped node using the target args. Through group public API method we can able to group the nodes in the diagram. Once there is a group node in the diagram, we can able to get that group node and add the dropped node as a child to the group node through the addChildToGroup method. Please refer to below code snippet and sample


function drop(args) {

  var node = args.element;

  var parentNode = args.target;

  setTimeout(() => {

    if (!node.children && node.id !== parentNode.id) {

      if (args.target.parentId) {

        var group = diagram.getObject(args.target.parentId);

        diagram.addChildToGroup(group, node);

      } else {

        diagram.selectAll();

        diagram.group();

      }

    }

  }, 0);

}


Sample: https://stackblitz.com/edit/1haue1?file=index.js


We have attached a video demonstration of how drag and drop get worked in the diagram. Please find the attached video in below link


Video: https://www.syncfusion.com/downloads/support/forum/174894/ze/Video2051877111


Regards

Aravind Ravi


PV Pham Van Sy May 11, 2022 03:09 PM UTC

Thank for your feedback, I will try it

Thanks!


AR Aravind Ravi Syncfusion Team May 12, 2022 12:55 PM UTC

Hi Pham,


Most welcome.


Regards

Aravind Ravi


PV Pham Van Sy June 10, 2022 02:31 PM UTC

Hi Ravi

I have tried the your solution above, but it still not working.

I added AllowDrop property, but nothing is changed

I created children by group but it not working

I want transmission the children node in the Diagram, not from out side into the Diagram, even transmission from out side to the Diagram as above sample, when I move children node on the parent node then the parent node is broken.

this is my code:

function endDrag() 

{

    isLeftDrag = false;

    isRightDrag = false;

    setCursor('auto');

if (vcheck === 2)

{

      if 

      (

         diagram.selectedItems.nodes.length)

        {

           if (diagram.selectedItems.nodes[0].properties.addInfo[0].menuId === "groupPeople") 

           {

               GroupOfPeopleDialog();

}

Please help me to check it,

Thanks!




Attachment: index_536ff54f.zip

SG Shyam G Syncfusion Team June 13, 2022 03:20 PM UTC

Hi Pham,

We will validate your requirement and update you with more details on June 15, 2022.

Regards,

Shyam G


PV Pham Van Sy June 16, 2022 01:35 AM UTC

Do you have any update more detail for this one?


AR Aravind Ravi Syncfusion Team June 16, 2022 10:43 AM UTC

Hi Pham,


We have checked that when we drag and drop the node from palette to diagram, the node in the diagram has been grouped. We are unable to reproduce the reported issue at our end.


Sample: https://stackblitz.com/edit/1haue1?file=index.js


So could you please share more details of your requirement that how are you trying to group the nodes in the diagram or video demonstration of the issue or modify the above sample replicating the issue. This would help us to serve you better.


Regards

Aravind Ravi



PV Pham Van Sy June 16, 2022 02:54 PM UTC

Thank for your feedback!

In this case, I insert a item into the Diagram then, when I drag and drop another item into the first item, I convert the first one to container and append the second one into container, as you can see on this video, I cannot change dimension of the container, also as set properly position of the children item. and you can see end of the video, It work fine when I use similarity function on other system. I want to do it with syncfusion library like as when I implement it with devexpress library
Do you have any solution for this one?
Thanks!

SY


Attachment: videoDemo_88a01c24.zip

AR Aravind Ravi Syncfusion Team June 17, 2022 12:26 PM UTC

Hi Pham,


We have created a sample to update the node position after dropped into group node. After drop the nodes into group node, drop event gets triggered. In that drop event , you can get the position of last children and change the offset for newly added node by using the node’s offsetX and offsetY properties. As per your requirement, you can change the offset for the newly added node using the offset properties of node. Please refer to the below code snippet


function drop(args) {

  var node = args.element;

  var parentNode = args.target;

  setTimeout(() => {

    if (diagram.nodes.length > 1) {

      if (!node.children && node.id !== parentNode.id) {

        if (args.target.parentId) {

          var group = diagram.getObject(args.target.parentId);

          diagram.addChildToGroup(group, node);

// Get the newly added node from diagram using getObject method

          let newNode = diagram.getObject(

            diagram.nodes[diagram.nodes.length - 1].id

          );

// Get the last children node from group

          let childNode = diagram.getObject(

            group.children[group.children.length - 2]

          );

          let firstChild = diagram.getObject(group.children[0]);

// Change the newly added node position

          newNode.offsetX = childNode.offsetX + 100;

          newNode.offsetY = childNode.offsetY;

          diagram.dataBind();

// According to child nodes update the top level child position and size

          firstChild.width = group.width;

          firstChild.offsetX = group.offsetX;

          firstChild.offsetY = group.offsetY;

          diagram.dataBind();

          diagram.refresh();

        } else {

          diagram.selectAll();

          diagram.group();

          let newNode = diagram.getObject(

            diagram.nodes[diagram.nodes.length - 1].id

          );

          if (newNode.children && newNode.children.length > 1) {

            newNode.style.strokeColor = 'black';

            newNode.style.strokeWidth = 1;

          }

        }

      }

    }

  }, 0);

}


Sample: https://stackblitz.com/edit/1haue1-tp6zba?file=index.js


We have attached a video demonstration of child nodes get rearranged in the group. Please find the video in below link


Video: https://www.syncfusion.com/downloads/support/forum/174894/ze/Video-197069351


Regards

Aravind Ravi


PV Pham Van Sy June 24, 2022 03:35 PM UTC

Thank You! I will try and let you know if I have any questions


AR Aravind Ravi Syncfusion Team June 27, 2022 05:41 AM UTC

Hi Pham,


Most welcome. We will wait until hear from you.


Regards

Aravind Ravi


PV Pham Van Sy June 29, 2022 09:15 AM UTC

Hi  Aravind , I have tried your code in my project but it not working as I expect.

This is my source code, please help me to check it


Attachment: SLPSoft_43645436.zip

AR Aravind Ravi Syncfusion Team June 30, 2022 12:14 PM UTC

Hi Pham,


We will validate and update you with more details on July 4th 2022


Regards

Aravind Ravi


AR Aravind Ravi Syncfusion Team July 6, 2022 04:22 AM UTC

Hi Pham,


We are still validating and update you with more details on July 7th 2022.


Regards

Aravind Ravi


PV Pham Van Sy July 6, 2022 03:35 PM UTC

Yes, Thank You!


AR Aravind Ravi Syncfusion Team July 8, 2022 03:00 AM UTC

Hi Pham,

On analyzing the provided sample, you have used the native node, so that reported issue occurs. Please use the basic shape (Rectangle) for the drag and drop operation. For rectangle type node also you can able to add text using the node’s annotation property. Annotation is a block of text that can be displayed over a node or connector. Annotation is used to textually represent an object with a string that can be edited at runtime. Multiple annotations can be added to a node/connector. For more information about how to add label to text, please refer below UG link


UG Link: https://ej2.syncfusion.com/javascript/documentation/diagram/labels/


Also, please use the latest version of ej2.min file to resolve the exception issue while drag and drop the nodes in diagram.


Regards

Aravind Ravi


PV Pham Van Sy July 14, 2022 03:11 AM UTC

Thank You!


AR Aravind Ravi Syncfusion Team July 15, 2022 05:05 AM UTC

Hi Pham,

Most Welcome.


Regards

Aravind Ravi


Loader.
Up arrow icon