How to perform drag and drop operations in Angular Diagram?
Angular Diagram is a visual tool that helps organize information around a central topic using branches that represent related ideas and concepts. It's often used for brainstorming, note-taking, problem-solving, and planning.
How to drag and drop a node from a tree view to a mindmap layout.
Diagrams can be used to create automatic layouts such as mind maps by defining data sources and layout properties. With the help of drag and drop features, new nodes can be dynamically added to the existing mind map diagram.
In the below snippet, we have shown how to drag and drop a node from tree view to the mind map diagram dynamically.
First, enable the allowDrop constraints for all the nodes in the mind map diagram which allows you to drop the new node on the existing node and create parent child. While hovering the new node to the existing node, you can see the highlighter which indicates to indicate that it is a valid drop target. You can do this in the getNodeDefaults() method as shown in the below code snippet.
public getNodeDefaults (node: NodeModel): NodeModel {
let obj: NodeModel = {};
//To enable highlighter while we drag the child node over the parent node.
(obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop),
obj.style = { fill: '#357BD2', strokeColor: 'white' };
return obj;
}
When an item is dragged from the tree view to the diagram, the "dragEnter" event of the diagram will be triggered. Within this event, you can convert the dragged treeview object into diagram NodeModel object and assign it to the "dragItem" property of the event argument. This allows us to retrieve the dragged node and use it in our application. Refer the below code example.
<ejs-diagram #diagram id="diagram" width="80%" // To trigger dragEvent (dragEnter)="dragEnter($event)" // To trigger dropEvent (drop)="drop($event)" height="500px" [dataSourceSettings]="dataSourceSettings" [layout]="layout" [nodes]="nodes" > </ejs-diagram>
//dragEnter event
public dragEnter(args: any): void {
let label = '';
if (args.dragData) {
label = args.dragData.text;
}
//To create new node with tree view lable
let node: NodeModel = {
width: 70,
height: 50,
offsetX: 100,
offsetY: 100,
data: { branch: 'Left' },
annotations: [{ content: label }],
};
//To set dragItem as Node
args.dragItem = node;
}
When a node is dropped onto another node in the diagram, the "drop" event is triggered. Within this event, you can retrieve the dropped node and the target node using the "element" and "target" properties of the event arguments.
After retrieving the dropped node and target node in the "drop" event of the diagram, you can make relationship between them by creating a new ConnectorModel and add them into the diagram connectors collections using the "add" method. Once the nodes are connected, you can call the "doLayout" method to re-arrange the layout of the mind map diagram.
// drop event
public drop(args: IDropEventArgs) {
setTimeout(() => {
//Argument element is used to get the dropped node.
let node: NodeModel = args.element as NodeModel;
let bottomNode: NodeModel = args.target as NodeModel;
//Gets the connector that connected to dropped node
let edges: string[] = this.diagram.getEdges(node);
if (edges && edges.length > 0) {
let connector: ConnectorModel = this.diagram.getObject(edges[0]);
//Argument target is used to get the hovered node
connector.sourceID = (args.target as NodeModel).id;
this.diagram.dataBind();
} else {
let newCon: ConnectorModel = {
id: 'newcon' + randomId(),
sourceID: (args.target as NodeModel).id,
targetID: (args.element as NodeModel).id,
};
this.diagram.dataBind();
this.diagram.add(newCon);
}
this.diagram.doLayout();
}, 100);
}
Sample: Bm5yxe (forked) - StackBlitz
Conclusion
I hope you enjoyed learning about how to perform drag and drop operations in Angular Diagram.
You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular Diagram documentation to understand how to present and manipulate data.
For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our Angular Mind Map and other Angular components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
