beim Ziehen von Stylesheets für alle Dropzones (Datei-Upload)

8

Ich habe mehrere Dropzones zum Hochladen von Dateien auf einer Webseite

Wie werden alle Dropzone-Elemente hervorgehoben, sobald eine Datei in den Browser gezogen wird, damit der Benutzer weiß, wo er die Datei ablegen soll? Und wenn eine Datei über einen der dropzones gezogen wird, muss ich eine zusätzliche Klasse hinzufügen, um anzuzeigen, dass der Benutzer die Datei freigeben kann

aktualisieren

kurideja wies mich in die richtige Richtung nach Dragster

Ссылка

Jetzt funktioniert es fast:)

  • Wenn Sie über eine Dropzone ziehen und zurückziehen, ohne die Datei freizugeben, sind alle Dropzones verborgen

Ссылка

html

%Vor%

Javascript

%Vor%

css

%Vor%     
clarkk 01.01.2015, 15:48
quelle

6 Antworten

4

Das Hauptproblem war: Nachdem der Dropzone-Bereich verlassen wurde, löste Dragster leave zweimal aus, sowohl in .dropzone als auch in window . Einfach hinzufügen e.stopPropagation () löst das Problem. Es gibt auch einige weitere Korrekturen (entfernt show () und hide () innerhalb von Dropzone Dragster). Dein Code auf Fiddle und auch unten:

%Vor%     
skobaljic 27.01.2015, 09:52
quelle
2

Sie können e.originalEvent.pageX und e.originalEvent.pageY beim Verschieben verwenden und prüfen, ob es sich in einem Bereich der Box befindet. Für dieses Beispiel habe ich die Dropzone kopiert und ich kenne die Breite und Höhe des Divs, so dass ich die Bedingung fest codieren konnte. Sie müssen einen Weg finden, um die Position (oben und links) der Dropzone-Bereiche zu speichern und zum Vergleich zu verwenden.

%Vor%

Demo-Geige

    
anpsmn 04.01.2015 13:29
quelle
1

Einige Zieherereignisse werden auf JEDES Element ausgelöst. Es gibt also im Prinzip keinen kontinuierlichen Ziehvorgang, sondern eine Folge von Ziehungen über alle Elemente unter der Maus.

Benutze einfach dieses Plugin: Ссылка

    
kurideja 08.01.2015 06:55
quelle
0

Sie können das target Mitglied des Ereignisses verwenden, um das richtige Element zu erhalten:

%Vor%

Geige: Ссылка

    
dbcb 08.01.2015 06:50
quelle
0

Meine Lösung wäre Ihrer Vorgehensweise sehr ähnlich. Wenn eine Datei in das Fenster geladen wird, fügen Sie eine css-Klasse zu dem Element hinzu, das alle Drop-Zonen enthält (falls nötig, body). Dann kannst du deine Drop-Zonen beim Ziehen entsprechend stylen:

%Vor%

Das CSS wäre:

%Vor%

Wenn das nicht das ist, was Sie wollten, bitte, sagen Sie es mir in einem Kommentar;)

BEARBEITEN Natürlich müssen Sie die Klasse entfernen, wenn die Datei gelöscht wird

%Vor%     
Fuzzyma 10.01.2015 19:13
quelle
-1
  1. IE11 Fehler verursacht durch dt.types.indexOf , e.originalEvent.dataTransfer.types ist ein DOMStringList Objekt in ie. Also solltest du dt.types.contains anstelle von dt.types.indexOf verwenden.

Folgendes funktioniert:

%Vor% %Vor% %Vor%
    
Fancyoung 04.01.2015 02:06
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset angularjs ng-wenn Unterschied zwischen Wert und Funktion