2016-09-24 1 views
0

Ich füge Drag & Drop-Unterstützung auf einer Website hinzu. Ich habe ein Div, wo Sie Dateien ablegen können und sie hochgeladen werden, aber wenn Sie die Datei nicht innerhalb dieses bestimmten div löschen, wird die Datei in den Browser geladen (das Standardverhalten) Also, die Frage: Gibt es eine Möglichkeit die Datei (en) an irgendeinem Teil der Seite ablegen und das selbe Ereignis an das spezifische div senden/triggern, welches die Datei hochlädt?Wie kann das Zielelement einer abgelegten Datei geändert werden?

Ich habe eine Reaktionskomponente, die das Hochladen der Datei behandelt, wenn Sie alles in ein div ablegen, also dachte ich über etwas wie diesen Code nach Drag and Drop auf der Seite, aber anstatt zu vermeiden, senden Sie einfach das Ereignis zu einem anderen Element sagen, lassen Sie uns ein <div id="dropzone"></div>

window.addEventListener("dragover",function(e){ 
    e = e || event; 
    e.preventDefault(); 
},false); 
window.addEventListener("drop",function(e){ 
    e = e || event; 
    e.preventDefault(); 
},false); 

Antwort

0

Sie drop Ereignis <body> Element anhängen können, Call-Funktion, die Dateien mit event.dataTransfer.files und möglicherweise event, als Parameter verarbeitet.

+0

Ich aktualisierte die Frage, leider habe ich keine einfache Javascript-Funktion, um es zu tun, die ganze Logik ist in einer Dropzone-Komponente, deshalb versuche ich einen Weg zu finden, den Tropfen in ein anderes div .. Ansonsten muss ich vielleicht die HTML-Struktur überdenken, da der Abwurfbereich sehr klein ist. – Polak

+0

@Polak Nicht sicher, was du meinst? Habe 'reactjs' nicht probiert. Warum können Sie keine Funktion aufrufen, die Dateien innerhalb des 'drop'-Ereignisses verarbeitet? – guest271314

Verwandte Themen