How Can We Restrict Dropping of Node Dragged in JavaScript Diagram?

This article explains how to restrict the dropping of a node onto the diagram when it is dragged from the symbol palette in the Syncfusion® JavaScript Diagram component. Users can typically drag and drop nodes or symbols from the symbol palette onto the diagram. However, there are scenarios where it is necessary to prevent certain nodes or connectors from being dropped onto the diagram.

To achieve this, the drop event of the diagram component is utilized. This event is triggered whenever a symbol or node is dropped onto the diagram. Within the event handler, logic can be implemented to control the drop behavior. By setting the args.cancel property to true in the drop event, the action of dropping a node or connector is effectively canceled. This ensures that the symbol or node is not added to the diagram.

   var diagram = new ej.diagrams.Diagram({
       // sets the height and width of the diagram.
       width: '100%', height: '100%', drop: drop
   });

   function drop(args) {
       let obj = args.element;
       if (obj instanceof ej.diagrams.Node || obj instanceof ej.diagrams.Connector){
           // set the args.cancel to true if the requirements do not meet your conditions
           args.cancel = true;
       }
   } 

This approach is particularly useful in scenarios where it is important to ensure that only valid elements are added to the diagram, thereby maintaining the integrity of its structure.

Conclusion

I hope you enjoyed learning how we can restrict the dropping of a node dragged in JavaScript Diagram.

You can refer to our JavaScript Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our JavaScript Diagram example to understand how to create and manipulate data. For current customers, you can check out our 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 other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!