How can we Restrict Dropping Node Dragged in React 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® React 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.

   <DiagramComponent id="diagram" ref={diagram => (diagramInstance = diagram)} width={"100%"} height={"560px"} drop={drop} >
        <Inject services={[UndoRedo]}/>
   </DiagramComponent>

   function drop(args) {
       let obj = args.element;
       if (obj instanceof Node || obj instanceof 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 about how we can restrict dropping node dragged in React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React 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, BoldDesk Support, or feedback portal. We are always happy to assist you!