Drag-and-drop functionality can significantly enhance the user experience in your Angular applications, allowing for intuitive interactions like reordering items, building lists, and managing file uploads.
Leverage the browser's built-in Drag-and-Drop API for a straightforward implementation. Utilize the dragstart, dragover, and drop events to capture drag interactions and update your application state accordingly.
HTML
<div class="draggable" (dragover)="onDragOver($event)" (drop)="onDrop($event)"> Drag and Drop </div> <ng-container *ngIf="droppedImage"> <img [src]="droppedImage" alt="Dropped Image"/> </ng-container> Typescript
droppedImage: string | null = null; onDragOver(event: DragEvent) { event.preventDefault(); // Allow dropping } onDrop(event: DragEvent) { if (event.dataTransfer) { const files = event.dataTransfer.files; if (files && files.length === 1 && files[0].type.startsWith('image/')) { const reader = new FileReader(); reader.readAsDataURL(files[0]); reader.onload = (e) => { this.droppedImage = e?.target?.result as string; }; } else { alert('Please drop an image file only.'); } } event.preventDefault(); // Not letting the browser to open image in new tab } 
Here's the full working demo: https://stackblitz.com/edit/native-drag-drop-angular-deekshith-raj-basa?file=src%2Fmain.ts
Top comments (2)
well informative content. i hope all newbies will get help from it.
Best Regard
Danish Hafeez | QA Assistant
ICTInnovations
Thanks for the comment, yes this is helpful for all new learners who are learning to build features using the native approach.