1. Home
  2. Forum
  3. ASP.NET MVC
  4. Dragging Nodes to Create and Delete Connections

Dragging Nodes to Create and Delete Connections

Is there a way to create a connection between two nodes if a node a dragged over and released on top of another node? 

Similarly, is it possible to delete a connection from between two nodes if one node is dragged far enough away from the connected node(s)?

6 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team October 22, 2020 07:48 AM UTC

Hi Dsoftware, 

To perform the drag and drop operation in the diagram, set node constraints as AllowDrop.  By using drop event we can drag and drop a certain node to a different parent which establish the parent-child relationship between them. 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. After gets the node, get the connector that connected to the diagram using inEdges. Now change the source ID of the connector and call layout() method. Now layout gets rearranges and dropped node arrange as a child to the hovered node. We have already prepared a KB for the How to perform Drag and drop operation in OrgChart. Please find the KB in below link 


When we move the diagram node, drag event gets triggered. In that event check if the dragged element offset if far away from the other node. If offset is far away means then by using the remove method, we can able to remove that connector from diagram.  

For more information about drag event and remove method, please refer to the below UG documentation link 



Regards 
Aravind Ravi 



Marked as answer
DS dsoftware November 16, 2020 07:30 PM UTC

Thanks Ravi.

I was able to get my drag to remove working but I cannot get drag to connect working.  Something to not is that I am not using a layout.  For whatever reason, when I drag and drop a node over top of another node (as seen in the screenshots below:
  1. There is no highlighting
  2. My JS drop function is not being called (only getting called when I drag a symbol from the palette)
  3. There are no properties in the drag function args that seem like they have what I need.  
I need to know what node the dragged and dropped node is being dropped on.  I assumed this would be found in args.target but I cannot find anything relating to the node that I am dropping the dragged node onto.  My args.target just looks like diagram properties and html, nothing to do with the node I have just dropped another node on (screenshot attached).

Please let me know if there is another method of determining the node I am dropping onto or if I am doing something wrong.  Thank you.


Attachment: argsTarget_1e417918.zip

DS dsoftware November 16, 2020 07:32 PM UTC

attachments

Attachment: DragDropTarget_69ba6c35.zip

AR Aravind Ravi Syncfusion Team November 17, 2020 12:17 PM UTC

Hi Dsoftware,  

We have created a sample for your requirement. To perform the drag and drop of nodes in the diagram, enable the AllowDrop constraints to the nodes. Please refer to below code example for how to set node constraints for node.  

node.Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop; 

By using drop event we can drag and drop a certain node to a different parent which establish the parent-child relationship between them. 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 node below dropped node from target arguments. So now create a new connection between the dropped node and below node.  If node does not drop on other node means then in args.target comes as diagram model. So by using that you can check whether node is dropped on node or not.  
 Please refer to below code snippet  

function Drop(args) { 
        if (args.elementType === "node" && args.target.inEdges && args.target.inEdges.length > 0) { 
            args.cancel = true;  
            var diagram = $("#DiagramContent").ejDiagram("instance"); 
            var node = args.element; 
            node.offsetX = args.element.offsetX + 100; 
            node.offsetY = args.element.offsetY + 100; 
            node.constraints = ej.datavisualization.Diagram.NodeConstraints.Default | ej.datavisualization.Diagram.NodeConstraints.AllowDrop; 
            // Adds node to the Diagram 
            diagram.add(node); 
            var connector = { 
                name: "connector" + String(diagram.model.connectors.length + 1), 
                width: 100, 
                height: 100, 
                sourceNode: args.target.name, 
                targetNode: node.name 
            }; 
            diagram.add(connector); 
         } 
    } 

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


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


Regards 
Aravind Ravi 


DS dsoftware November 18, 2020 02:24 PM UTC

Thanks Ravi but I'm trying to get the "target" of my drop when I drag and drop and already existing node.  My goal is to find out what node I am dropping the existing node on to.  My args.target is always undefined and a bunch of diagram html rather than a node (image attached).

Please see the video link below as well as my code.
drag: function (args) {
            if (args.dragState === "completed") {
                console.log(args);
                console.log("Target: " + args.target);
            }
        }

Video Example: https://www.screencast.com/t/f7wADNRht

Attachment: dragTarget_b6888ed7.zip

AR Aravind Ravi Syncfusion Team November 20, 2020 04:12 AM UTC

Hi Dsoftware, 
 
By default, in the diagram, drop event gets triggered when we drag and drop on the node on another node if that node has AllowDrop constraints. If we set AllowDrop constraints for the node means , when we drag and drop on other node , red color highlighter gets appeared on node and that node will be set as target node in the drop event arguments. In drag event we does not able to get the target node when we drag and drop on other node. Please refer to the below code snippet 
 
drop: function(args) { 
                    console.log("Target Node: " + args.target.labels[0].text); 
                    console.log("drop event gets triggered"); 
                  }, 
 
 
We have attached a video demonstration of how drop event gets work 
 
 
Regards 
Aravind Ravi 


Loader.
Up arrow icon