JavaScript Cross-Browser-Lösung: Drag & Drop - Event Handling

[Zephyro]

Hallo zusammen,

der Titel sagts eigentlich schon. Ich habe auf meiner Website ein Bereich definiert (<div id="wb_dropzone"></div>), in den ich Bilder per Drag&Drop (vom Desktop aus) hinein laden und anschließend uploaden möchte. Im Firefox funktioniert alles einwandfrei, auch das uploaden etc., aber im IE, Opera, Chrome nicht. Andere habe ich nicht getestet.
Mit den genannten Browsern, wo es nicht geht, erscheint mir das Bild in einem extra Browserfenster. Die EventListener greifen hier nicht und ich weiß absolut nicht warum.

Hier ein Ausschnitt meines Javascript-Codes:

var dropzone = document.getElementById('wb_dropzone');
dropzone.addEventListener("dragover", function (e) { e.preventDefault(); }, false);
dropzone.addEventListener("dragend", function (e) { e.preventDefault(); }, false);
dropzone.addEventListener("drop", function (e) {
  file = e.dataTransfer.files[0];
  uploadFile(file);
  e.preventDefault();
}, false);

Ich sitze schon die letzten Tage vor diesem Problem und habe bisher keine Lösung gefunden. Während meiner bisherigen Suche nach einer Lösung, bin ich auf Folgendes gestoßen:
- Dies habe ich bei mir testweise in den Code eingebaut, aber hat auch nicht geholfen.
- Der Source-Code dieses Beispiels ist recht umfangreich und ist für mich etwas schwierig zu verstehen. Soweit ich das durchschauen konnte, wird dort aber auch die selbe EventListener-Methode, wie oben, verwendet.
- Selbes hier... wobei ich bei diesem Bsp. ein Fehler im Firefox debugger erhalte, dass das canvas-Element in das gedropt wird, nicht definiert sei. Die online-Demo funktioniert aber.

Wer eine Idee hat, wie ich das lösen kann, dann bitte Melden
Ich bin euch um jede Hilfe dankbar!

Viele Grüße,
Zephyro

 

[benneq]

http://www.w3schools.com/html/html5_draganddrop.asp

 

[Daaron]

Du kennst doch sicher den Ausspruch "Auf den Schultern von Riesen stehen"....
Nutze einfach freie Frameworks wie jQuery oder Mootools als Basis. Das spart dir die Crossbrowser-NErvigkeiten.

 

[Nase]

Bei mir funktioniert es mit jQuery und FormData recht gut.

 

[nbzklr]

Also dieses Beispiel funktioniert wunderbar in Chrome sowie in Firefox.

Laut dieser Seite unterstützen alle von dir genannten Browser sowohl drag & drop als auch die File-Api und das fileReader Objekt.

Das Problem liegt also auf deiner Seite und es sollte auch ohne Cross-Browser fixes, polyfills etc. funktionieren.

 

[Zephyro]

Danke für eure Hilfe!
Der Fehler lag an einer anderen Stelle im Code und wurde vom FF wohl übergangen. Von Opera, Chrome & IE nicht.

Viele Grüße,
Zephyro

 

[CapFuture]

Ich würde mich wegen dem reinen Event-Handling um eine 3rd Party Lib wie Hammer JS bemühen. So kannst du dich um dein eigentliches Problem kümmern und lässt die Lib die Wogen glätten.

 

[ice-breaker]

nur dass hammer.js etwas komplett anderes ist