Ich füge meiner Seite einen HTML5-Drag & Drop-Uploader hinzu.
Wenn eine Datei in den Upload-Bereich verschoben wird, funktioniert alles einwandfrei.
Wenn ich die Datei jedoch versehentlich außerhalb des Upload-Bereichs ablege, lädt der Browser die lokale Datei so, als wäre es eine neue Seite.
Wie kann ich dieses Verhalten verhindern?
Vielen Dank!
javascript
jquery
html
drag-and-drop
Travis
quelle
quelle
Antworten:
Sie können dem Fenster einen Ereignis-Listener hinzufügen, der
preventDefault()
alle Dragover- und Drop-Ereignisse aufruft.Beispiel:
quelle
dragover
als auchdrop
Handler erforderlich sind, um zu verhindern, dass der Browser die abgelegte Datei lädt. (Chrome spätestens 03.08.2015). Die Lösung funktioniert auch mit FF.<input type="file" />
. Es ist zu überprüfen, obe.target
es sich um eine Dateieingabe handelt, und solche Ereignisse durchzulassen.Nachdem ich viel herumgespielt hatte, fand ich, dass dies die stabilste Lösung ist:
Wenn Sie beide
effectAllow
unddropEffect
bedingungslos im Fenster festlegen, akzeptiert meine Drop-Zone kein dnd mehr, unabhängig davon, ob die Eigenschaften neu festgelegt sind oder nicht.quelle
Für jQuery lautet die richtige Antwort:
Hier
return false
verhält es sich wieevent.preventDefault()
undevent.stopPropagation()
.quelle
Um Drag & Drop nur für einige Elemente zuzulassen, können Sie Folgendes tun:
quelle
Versuche dies:
quelle
Das standardmäßige Verhindern aller Drag & Drop-Vorgänge ist möglicherweise nicht das, was Sie möchten. Zumindest in einigen Browsern kann überprüft werden, ob es sich bei der Drag-Quelle um eine externe Datei handelt. Ich habe eine Funktion zum Überprüfen, ob die Drag-Quelle eine externe Datei ist, in diese StackOverflow-Antwort aufgenommen .
Wenn Sie die Antwort von Digital Plane ändern, können Sie Folgendes tun:
quelle
e || event;
? Wo istevent
definiert? Keine Ursache. Es sieht so aus, als wäre es ein globales Objekt im IE? Ich fand dieses Zitat"In Microsoft Visual Basic Scripting Edition (VBScript), you must access the event object through the window object."
hierNach meiner Erfahrung tritt dieses Problem zuerst auf, wenn Sie einer Seite Funktionen zum Löschen von Dateien hinzufügen. Daher ist meine Meinung, dass die Komponente, die dies hinzufügt, auch dafür verantwortlich sein sollte, ein Abfallen außerhalb der Abwurfzone zu verhindern.
In meiner Lösung ist die Drop-Zone eine Eingabe mit einer Klasse, aber jeder eindeutige Selektor funktioniert.
Die Listener werden automatisch hinzugefügt / entfernt, wenn eine Komponente erstellt / zerstört wird, und andere Komponenten, die dieselbe Strategie auf derselben Seite verwenden, stören sich aufgrund von stopPropagation () nicht gegenseitig.
quelle
Um auf der in einigen anderen Antworten beschriebenen Methode "Ziel überprüfen" aufzubauen, finden Sie hier eine allgemeinere / funktionalere Methode:
Genannt wie:
quelle
function preventDefaultExcept(...predicates){}
. Und dann benutze es wiepreventDefaultExcept(isDropzone, isntParagraph)
Ich habe ein HTML
object
(embed
), das die Breite und Höhe der Seite ausfüllt. Die Antwort von @ digital-plane funktioniert auf normalen Webseiten, jedoch nicht, wenn der Benutzer auf ein eingebettetes Objekt fällt. Also brauchte ich eine andere Lösung.Wenn wir zur Ereigniserfassungsphase wechseln, können wir
true
die Ereignisse abrufen, bevor das eingebettete Objekt sie empfängt (beachten Sie den Wert am Ende des Aufrufs des Ereignis-Listeners):Mit dem folgenden Code (basierend auf der Antwort von @ digital-plane) wird die Seite zu einem Ziehziel. Sie verhindert, dass Objekteinbettungen die Ereignisse erfassen, und lädt dann unsere Bilder:
Getestet auf Firefox auf Mac.
quelle
Ich verwende eine Klassenauswahl für mehrere Upload-Bereiche, daher hat meine Lösung diese weniger reine Form angenommen
Basierend auf der Antwort von Axel Amthor, abhängig von jQuery (Alias auf $)
quelle