Reset a drag/drop node on diagram

[Chad Carey]

I'm trying to figure out how to reset a nodes placement if you try and drag it over another node that is set to not allow you to drag/drop on to it.

We have nodes setup that don't allow other items to be dragged and dropped. If I drag an item over one of these it just kind of sits there and doesn't reset its placement back to where it was.

Do I need to just reload the entire chart to do this?

We are using MVC with javascript to build the chart.

[Aravind Ravi]

Hi Chad, 

We have created a sample to node reset its position, when drop on other node. To perform the drag and drop of nodes on other 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 below code example for how to set node constraints in the node defaults method.  

function getNodeDefaults(obj, diagram) { 

            if (obj.width === undefined) { 

                obj.width = 145; 

            } else { 

                var ratio = 100 / obj.width; 

                obj.width = 100; 

                obj.height *= ratio; 

            } 

            obj.style = { fill: '#357BD2', strokeColor: 'white' }; 

            //Set ports 

            obj.ports = getPorts(obj); 

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

            return obj; 

        } 

When we drag the nodes from one place to another place , positionChange event gets triggered. PositionChange evets gets triggered for three states,  Start, Inprogress, Completed. When we start to drag the node, event gets triggered for start state. In that state, store the node offsetX and offsetY values. When we drag the node and mouse hover on another node red color highlighter shows. After the node gets dropped drop event gets trigger, if we enable AllowDrop constraints to the node. In that event reset the node offset’s position. So that node reset back to its original position. Please refer to the below code snippet 

var x; var y; 

         

        function drop(args) { 

// If node drops on another node, reset the node offset position. 

            var diagram = document.getElementById('diagram').ej2_instances[0]; 

            args.element.offsetX = x; 

            args.element.offsetY = y; 

            diagram.dataBind(); 

        } 

      

        function positionChange(args) { 

            if (args.state === "Start") { 

//Store the node offset values 

                 x = args.source.offsetX; 

                 y = args.source.offsetY; 

            } 

        } 

We have attached a video demonstration of how node reset back to its original position. Please find the video in the below link 

Video: https://www.syncfusion.com/downloads/support/forum/165560/ze/Drag-Drop-video882207521 

We have attached a sample for your reference. Please find the sample in the below link 

Sample: https://www.syncfusion.com/downloads/support/forum/165560/ze/Drag-Drop920380772 

Regards 

Aravind Ravi