OrganizationChart Drag & Drop shape to another(changing parent Node)

[enova]

Dear Syncfusion

I have found example from javascript version where drop event is trigger when one shape is dropped to another(changing parent node).

https://stackblitz.com/edit/1woeqw-a5dxag

I was need this in my OrganizationChart to allow user to change node parent by drag&drop action.

I have been try to make this work in React examples, but I failed.

Can you provide an example how to implement this feature in React Diagram?

I am using version 17.4.39 can that be an issue?

[Gowtham Gunashekar]

Hi enova, 

 

Please refer to the following sample for how to change the child’s parent by drag and drop . in the sample we have added AllowDrop constraints to all the node’s constraints in node defaults, so whenever we drag a node into another node the drop event will trigger. In the drop event we can change the dropped node as the child of the target node. 

 

           

function nodeDefaults(obj, diagram) { 

  obj.backgroundColor = obj.data.color; 

  obj.style = { fill: 'none', strokeColor: 'none', color: 'white' }; 

  obj.expandIcon = { 

    height: 10, 

    width: 10, 

    shape: 'None', 

    fill: 'lightgray', 

    offset: { x: 0.5, y: 1 } 

  }; 

// add allow drop constraints 

  if (obj.data['Role'] !== 'Assistant General Manager') { 

    obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop; 

  } 

}    drop={args => { 

                if (args.target && args.target instanceof Node) { 

                  var connector = diagramInstance.getObject( 

                    args.element.inEdges[0] 

                  ); 

                  connector.sourceID = args.target.id; 

                  diagramInstance.dataBind(); 

                  diagramInstance.doLayout(); 

                } 

              }} 

 

 

 

Sample link: https://stackblitz.com/edit/react-munzho 

 

If the reported issue still persists, please replicate the reported issue in the shared sample, that will help us to proceed further.  

 

Regards  

Gowtham