У меня есть галерея изображений, и я собираюсь перетащить эти изображения в зону перетаскивания.
Я пытался использовать его в двух случаях (используя мышь для перетаскивания изображения и используя перетаскивание cdk, которое также позволяет мне перемещать изображение в область капель).
Есть ли способ получить объект (имя, идентификатор ...) из изображения, которое было переброшено в зону перетаскивания? Я пытаюсь перетащить изображение в зону перетаскивания, и когда я отпускаю его там, я хочу знать, какое изображение было перетащено.
Есть ли способ добиться этого? Кто-нибудь может мне помочь?
Большое спасибо!
.TS
onFileDropped($event) {
this.prepareFilesList($event);
console.log("evt", $event )
}
fileBrowseHandler(files) {
this.prepareFilesList(files);
}
async prepareFilesList(files: Array<any>) {
}
@HostBinding('class.fileover') fileOver: boolean;
@HostBinding('style.background-color') private background = '#f5fcff'
@Output() fileDropped = new EventEmitter<any>();
// Dragover listener
@HostListener('dragover', ['$event']) onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.fileOver = true;
this.background = '#9ecbec';
}
// Dragleave listener
@HostListener('dragleave', ['$event']) public onDragLeave(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#f5fcff'
this.fileOver = false;
}
// Drop listener
@HostListener('drop', ['$event']) public ondrop(evt) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#f5fcff'
this.fileOver = false;
let files = evt.dataTransfer.files;
this.fileDropped.emit(files);
}
Используя изображения (cdkDrag), мне не удалось получить какие-либо события в зоне перетаскивания, которые обнаруживают запись чего-либо.
Используя обычные изображения, я смог выполнить функцию
onFileDropped ($ event) {
this.prepareFilesList ($ event);
console.log ("evt", $ event)
}
но я не получил результатов, как показано на рисунке.
