Drag Queens

Die massgebenden Events für "Drag and Drop"

Diese Seite ist eine Vorbereitung auf ein File Upload Formular, das es erlaubt, die hochzuladenen Dokumente auf eine "Drop Zone" zu ziehen. Ziel der Testumgebung auf dieser Seite ist es, die massgebenden Drag-Events "zu spüren" und kennenzulernen.

Event	Beschreibung
`dragenter`	Das gezogene Dokument "betritt" die "Drop Zone".
`dragleave`	Das gezogene Dokument wird aus der "Drop Zone" herausgezogen.
`dragover`	Das gezogene Dokument befindet sich über der "Drop Zone". Dieses Event wird unerlässlich "abgefeuert".
`drop`	Das gezogene Dokument wird über der "Drop Zone" fallen gelassen (d.h. der User lässt die Maustaste los).

Es gibt noch weitere Drag-Events, die hier jedoch keine Rolle spielen: drag, dragend und dragexit.

⇩ Öffne die Entwickler-Konsole und ziehe ein Dokument über die "Drop Zone" ⇩

"Drop Zone", ziehe ein Dokument auf mich!
Ich bin nichts anders als ein <div>.

Bei solchen "Drop Zones" wird von den meisten Entwickler:innen so wie hier ein dashed Border eingesetzt.
Mache das auch so, die User werden es einfacher haben, deine "Drop Zone" als solche zu erkennen.

w3 schools: CSS Borders