We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to reproduce

Hi,

I need to reproduce exactly the same think like :
(the last part with drag and drop)

 but i don't know how can i do that... (angular)

Thanks for your help

1 Reply

SG Shyam G Syncfusion Team January 29, 2020 09:20 PM

Hi Gaylord, 
 
  • We should enable AllowDrop Constraints which shows highlighter when we drag a node and hover it on the another node in diagram.
  • You can drop the node once the highlighter has been displayed. When you drop a node on the another node, the drop event is initiated.
  • In this event, you can establish a connection between the node dropped. Refer to the instance code below and the sample below.
 
Code example: 
<ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]='connDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' (drop)="onDrop($event)"[snapSettings]='snapSettings'>    
 
 //Defines the default node properties 
    public nodeDefaults(obj: NodeModel): NodeModel { 
       
        //AllowDrop Constraints  
        obj.constraints = NodeConstraints.Default | NodeConstraints.AllowDrop;   
  
        return obj; 
    }; 
 
//drop event 
  public onDrop(args: any): void {   
   setTimeout(()=>{    
    let connector: ConnectorModel={}; 
    if (args.element && args.target) { 
      if (args.element) { 
        //get an connector object  
         connector = this.diagram.getObject(args.element.inEdges[0]); 
      } 
      // this block executed when we drag any node in diagram and drop it onto the another node 
      if (connector) { 
        //update connector source and target id  
        connector.sourceID = args.target.id; 
        connector.targetID = args.element.id; 
        this.diagram.dataBind(); 
      } else { 
        // this block executed when we drag  node in palette and drop it onto the node in diagram 
        this.diagram.add({id: 'connector' + randomId(), sourceID: args.target.id, targetID: args.element.id});    
        this.removeElementsByClass('e-diagram-highlighter')  
      }  
      //To update an layout  
      this.diagram.doLayout(); 
    } 
    }, 100);  
  }  
 
 
 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon