How to Drag and Drop External Div Elements Into Angular Diagram?

Currently, Syncfusion® EJ2 Angular Diagram does not natively support dropping external HTML elements directly into the diagram. However, you can implement this functionality by creating draggable elements and handling the dragend, dragover, and drop events manually. Below is an example of how to achieve this by creating a custom solution that allows external HTML elements to be dragged and dropped as HTML shape nodes into the diagram.

Implementation Steps:

1. Create Draggable Elements
Define external HTML elements (e.g., buttons or divs) with the draggable=“true” attribute to make them draggable.

<button
   draggable="true"
   (dragend)="onDragEnd($event)"
   style="padding: 5px 15px; cursor: pointer;">
   Draggable Button
</button> 

2. Bind the onDragOver Event for diagram container which allows dropping by preventing default behavior.

<div id="diagramContainer" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
       <ejs-diagram #diagram id="diagram" width="100%" height="500px">
       </ejs-diagram>
</div>
 
//Allows dropping by preventing default behavior
onDragOver(event: DragEvent) {
  event.preventDefault();
} 

3. Bind the onDragEnd Event
Attach the onDragEnd event to the draggable elements. This event is triggered when the dragging action ends. Within this handler, check if the drag target is the diagram

onDragEnd(event: DragEvent) {
   console.log("Drag ended", event);
   if(this.target && this.target.classList.contains("e-diagram") && event.target){
     let newNode = {
       id:'newNode'+randomId(),
       height:100,
       width:100,
       offsetX: event.offsetX, offsetY: event.offsetY,
       shape:{
         type:'HTML',
         //set dragged element content to node html content
         content: "<div style='background:#ffd700;height:100%;width:100%;'>"+(event.target as any).outerHTML+"</div>"
       }
     } as NodeModel
     this.diagram.add(newNode)
   }
 } 

4. Handle the onDrop Event
Use the onDrop event to determine the drop location within the diagram container and create a new diagram node with the dragged element’s content.

// Triggered when the element is dropped onto the target 
 onDrop(event: DragEvent) {
   event.preventDefault();
   
   console.log("Dropped on:", event.target);
   //get and set the target element on drop action
   let targetEle: any = closest((event.target as any), '.e-droppable'); 
   targetEle = targetEle ? targetEle : event.target; 
   this.target = targetEle
 } 

5. Add the Node to the Diagram
Extract the content of the dragged element, set it as the HTML content of a new node, and add the node to the diagram using the add method in onDragEnd event, refer code snippet of point 3.

Kindly refer the below sample for implementation guidance.

Sample: Drag external div elements to Angular Diagram

Conclusion

I hope you enjoyed about how to drag and drop external div elements into Angular Diagram.
You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular 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!