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 30, 2020 05:20 AM UTC

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.
Up arrow icon