Möglicher Fehler mit HTML-Drag/Drop und Event-Bubbling

Question

Ich bemerkte, dass, wenn es ein div innerhalb einer div ist, die dragenter/leave -Ereignisse behandelt, das Ziehen über das innere div das äußere div auslöst dragleave. Dies geschieht jedoch nur, wenn das äußere Div position: fixed ist. Andernfalls wird das Kind/innere div richtig übergebläht.

Beispiel: https://jsfiddle.net/ffxsam/L2mvbo2t/

Ziehen Sie eine Datei über den Fensterbereich ausgegeben und Sie werden die Sprungplatz auftauchen sehen. Wenn Sie weiterhin über den Text "Uh oh" ziehen, verschwindet die Dropzone. Kommentieren Sie die Zeile position: fixed, versuchen Sie es erneut und Sie werden sehen, wenn Sie über "Uh oh" ziehen, bleibt die Dropzone.

Ist das ein Fehler? Eigentlich habe ich gerade festgestellt, dass in Firefox die dragleave ausgelöst wird, wenn ich über das innere div, unabhängig von position bewegen. Wie kann ich das umgehen?

Answer 1

Ich löste dies durch drei Schichten:

Die volle Breite position: fixed Kulisse div, die zwei divs enthält:

• Ein div mit z-index: 1, die Text wie „fallen hier zeigt hochladen. "
• Ein anderes div mit z-index: 2 das ist volle Breite/Höhe position: absolute und sitzt oben auf dem vorherigen div für Drag-Ereignisse zu beobachten.