Dragging Nodes to Create and Delete Connections

[dsoftware]

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)?

[Aravind Ravi]

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 

KB: https://www.syncfusion.com/kb/5885/how-to-perform-drag-and-drop-operation-in-orgchart 

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 

Drag: https://help.syncfusion.com/api/js/ejdiagram#events:drag 

Remove: https://help.syncfusion.com/api/js/ejdiagram#methods:remove 

Regards 

Aravind Ravi 

[dsoftware]

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

[dsoftware]

attachments

Attachment: DragDropTarget_69ba6c35.zip

[Aravind Ravi]

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  

Sample: https://www.syncfusion.com/downloads/support/forum/158986/ze/Palette-Drag-Drop1934795542 

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

Video: https://www.syncfusion.com/downloads/support/forum/158986/ze/Video-289260515 

Regards 

Aravind Ravi 

[dsoftware]

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

[Aravind Ravi]

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"); 

                  }, 

 

Sample: https://jsplayground.syncfusion.com/xltfvpww 

 

We have attached a video demonstration of how drop event gets work 

 

Video: https://www.syncfusion.com/downloads/support/forum/158986/ze/Drag-Drop-524507459 

 

Regards 

Aravind Ravi