0
388
Vistas¿Cómo obtener archivos del evento angular 2 onDrop?
Lo intenté así, pero el método onDrop no devuelve los archivos de imagen cuando lo coloco...
onDragStart(event, data: any) { event.dataTransfer.setData('data', data); } onDrop(event, data: any) { let dataTransfer = event.dataTransfer.getData('data'); event.preventDefault(); } allowDrop(event) { event.preventDefault(); } <div (drop)="onDrop($event, dropData)" (dragover)="allowDrop($event)"></div> <div (dragstart)="onDragStart($event, dragData)"></div>¿Alguna solución para esto?
3 Respuestas
Responde la pregunta0
El evento onDrop se activa solo cuando onDragOver tiene los métodos preventDefault() y stopPropagation() ejecutados en el evento.
HTML
<div (drop)="onDrop($event)" (dragover)="onDragOver($event)" > Drop target </div>DropComponent.ts
export class DropComponent { onDrop(event) { event.preventDefault(); } onDragOver(event) { event.stopPropagation(); event.preventDefault(); } }ACTUALIZAR
Esto es necesario porque, de forma predeterminada, el navegador evita que suceda algo mientras se coloca en el elemento HTML. Ver más en MDN - Definición de una zona de descenso válida
0
Aquí está el código completo para arrastrar y soltar en Angular 2/4/6:
arrastre.componente.ts:
import { Component } from '@angular/core'; @Component({ selector: 'drag-root', templateUrl: './drag.component.html', styleUrls: ['./drag.component.css'] }) export class AppComponent { allowDrop(ev) { ev.preventDefault(); } drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } }arrastrar.componente.html:
<h2>Drag and Drop</h2> <div id="div1" (drop)="drop($event)" (dragover)="allowDrop($event)"> <img src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350" draggable="true" (dragstart)="drag($event)" id="drag1" width="88" height="31"> </div> <div id="div2" (drop)="drop($event)" (dragover)="allowDrop($event)"> </div>arrastrar.componente.css:
#div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; }Instantáneas:
0
Puede envolver la funcionalidad onDrop en una directiva reutilizable. Como esto:
https://gist.github.com/darrenmothersele/7afda13d858a156ce571510dd78b7624
Aplique esta directiva a un elemento:
<div (appDropZone)="onDrop($event)"></div> El evento se activa con una matriz de JavaScript de los archivos soltados. Entonces, su implementación de onDrop en el componente se parece a esto:
onDrop(files: FileList) { console.log({ files }); }