npm i ngx-drag-drop
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import {DndModule} from 'ngx-drag-drop'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; @NgModule({ imports: [ BrowserModule, FormsModule, DndModule ], declarations: [ AppComponent, HelloComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import { Component } from '@angular/core'; import { DndDropEvent } from 'ngx-drag-drop'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name = 'Angular'; status: string = ''; droppedFiles: Array<{ name: string; size: number; type: string; url: string }> = []; onDragStart(event: DragEvent) { console.log("drag started", JSON.stringify(event, null, 2)); this.status = "Drag started"; } onDragEnd(event: DragEvent) { console.log("drag ended", JSON.stringify(event, null, 2)); this.status = "Drag ended"; } onDragover(event: DragEvent) { console.log("dragover", JSON.stringify(event, null, 2)); this.status = "Dragover"; } onDrop(event: DndDropEvent) { console.log("dropped", JSON.stringify(event, null, 2)); this.status = "Dropped"; // Check if the event includes files const dataTransferFiles = event.event?.dataTransfer?.files; if (dataTransferFiles) { const files = Array.from(dataTransferFiles); files.forEach((file: File) => { if (file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = () => { this.droppedFiles.push({ name: file.name, size: file.size, type: file.type, url: reader.result as string }); }; reader.readAsDataURL(file); } else { console.log('Not an image file:', file.name); } }); } } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="draggable" [dndDraggable]="name" dndEffectAllowed="copy" (dndStart)="onDragStart($event)" (dndEnd)="onDragEnd($event)"> Drag me </div> <br> <!-- Dropzone --> <section class="droppable" dndDropzone dndDragoverClass="droppable--drop" [dndAllowExternal]="true" (dndDragover)="onDragover($event)" (dndDrop)="onDrop($event)"> <p>Drop images here!</p> <div dndPlaceholderRef>Drop here!</div> </section> <br> <div *ngIf="droppedFiles.length > 0"> <h3>Dropped Images:</h3> <div *ngFor="let file of droppedFiles" class="image-preview"> <img [src]="file.url" alt="{{ file.name }}" /> <p>Name: {{ file.name }}</p> <p>Size: {{ file.size | number }} bytes</p> <p>Type: {{ file.type }}</p> </div> </div> <br> <p>Status: {{ status }}</p> |
FULL SOURCE CODE
