Angular8 Drag and drop without any external plugin - drag-and-drop

Question

I need suggestion. Currently working on [ angular 8 ] project.
I have to develop drag and drop widgets without using any external plugin ex
gridster etc..
How to achieve it ?
And how to store drag and drop of widgets preferences in database, so that i can see my widgets accordingly after log-in.

Answer 1

You will need to bind the data to the widgets in order to get them to retain the data after moving them around, resizing them, and/or closing out of the app and re-opening.
Angular, .Net, .Aspx are where you need to start.
Binding data without these type technologies is not possible.
You can do it with local storage using other technologies like jQuery Mobile, JavaScript, etc., but that data is lost.

Answer 2

I tried to write custom drag and drop along with clickable file upload using Angular without Plugin or any 3rd party Libraries.
Please feel free to reach me if any doubts.
The solution is as below:
1.Component.html
<div [ngClass]="{'col-md-12':!droppedFlag,'col-md-6':droppedFlag}" ngxDraganddrop (filesDropped)="handleDrop($event)">
<label class="custom-label w-100">Attach Files</label>
<div class="attach-file text-center">
<div class="row">
<label for="invoice_file_upload" style="margin-left: auto;margin-right: auto;">
<img src="./../../../../assets/images/file-download.png" height="36px" weight="27px" alt="">
</label>
<input type="file" style="display: none;" id="invoice_file_upload" #fileUpload
accept=".doc,.docx,.msg.csv,.pdf,.jpg,.png,.jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
placeholder="Select the type" (change)="onFileselected($event)" multiple>
</div>
<small class="custom-label" style="font-size: 12px;">Max. upload size 3 MB for each file <br> (Only
.png, .jpg, .jpeg, .csv, .xlsx, .xls, .pdf, .doc, .docx, .msg)</small>
</div>
<label class="pt-2" id="errorstatus"></label>
</div>
<div class="col-md-6 file_list_display">
<li *ngFor="let temp of temporarySelectedFile;let index = index" class="filename"><i
class="fa fa-check-circle text-success mr-2 col-md-1"></i>
<label class="col-md-10 padding_none">{{temp.name}}</label>
<i class="fa fa-trash text-danger ml-3 col-md-1" (click)="removeSelectedFile(index)"></i>
</li>
</div>
2.Create a Directive
import { Directive,EventEmitter,HostListener, Output } from '#angular/core';
#Directive({
selector: '[ngxDraganddrop]'
})
export class DraganddropDirective {
#Output() filesDropped=new EventEmitter<Event>()
// #Output() fileshovered=new EventEmitter
constructor() { }
#HostListener('drop',['$event'])onDrop($event: any){
$event.preventDefault();
let transfer=$event.dataTransfer;
this.filesDropped.emit(transfer.files);
//alert(transfer)
// this.fileshovered.emit(false);
}
#HostListener('dragover',['$event'])onDragOver($event: any){
$event.preventDefault();
// this.fileshovered.emit(true);
}
#HostListener('dragleave',['$event'])onDragLeave($event: any){
$event.preventDefault();
// this.fileshovered.emit(false);
}
}
3.component.ts
onFileselected(event) {
this.droppedFlag=1;
let allowedExtensions = /(\.jpg|\.jpeg|\.png|\.csv|\.xls|\.xlsx|\.pdf|\.doc|\.docx|\.msg)$/i;
if (this.allowedUploadFile == 0) {
event.target.value = "";
this.api.toastAlert('warning', 'Max 5 files allowed to upload');
this.droppedFlag=0;
return false;
} else if (this.allowedUploadFile < event.target.files.length) {
event.target.value = "";
this.api.toastAlert('warning', 'Max 5 files allowed to upload, You can select ' + this.allowedUploadFile + ' files or lesser.');
this.droppedFlag=0;
return false;
}
for (var i = 0; i < event.target.files.length; i++) {
if (!allowedExtensions.exec(event.target.files[i].name)) {
this.api.toastAlert('warning', 'Invalid file type');
return false;
} else {
this.selectedFile.push(event.target.files[i]);
this.temporarySelectedFile.push(event.target.files[i]);
this.allowedUploadFile -= 1;
}
}
}
handleDrop(event){
this.droppedFlag=1;
let allowedExtensions = /(\.jpg|\.jpeg|\.png|\.csv|\.xls|\.xlsx|\.pdf|\.doc|\.docx|\.msg)$/i;
for (var i = 0; i < event.length; i++) {
if (!allowedExtensions.exec(event[i].name)) {
this.api.toastAlert('warning', 'Invalid file type');
return false;
} else {
this.selectedFile.push(event[i]);
this.temporarySelectedFile.push(event[i]);
this.allowedUploadFile -= 1;
}
}
}
4.Before Upload
5.After Upload