HTML -Ondragleave- Ereignisattribut
Beispiel
Führen Sie ein JavaScript aus, wenn ein ziehbares Element aus einem Ablageziel verschoben wird:
<div ondragleave="myFunction(event)"></div>
Definition und Verwendung
Das ondragleave-Attribut wird ausgelöst, wenn ein ziehbares Element oder eine Textauswahl ein gültiges Drop-Ziel verlässt.
Die ondragenter- und ondragleave-Ereignisse können dem Benutzer helfen zu verstehen, dass ein ziehbares Element dabei ist, in ein Drop-Ziel einzutreten oder es zu verlassen. Dies kann beispielsweise durch Festlegen einer Hintergrundfarbe erfolgen, wenn das ziehbare Element in das Ablageziel eintritt, und durch Entfernen der Farbe, wenn das Element aus dem Ziel herausbewegt wird.
Drag & Drop ist eine sehr verbreitete Funktion in HTML5. Es ist, wenn Sie ein Objekt "greifen" und es an eine andere Stelle ziehen. Weitere Informationen finden Sie in unserem HTML-Tutorial zu HTML5 Drag and Drop .
Hinweis: Um ein Element ziehbar zu machen, verwenden Sie das globale HTML5 - Attribut Draggable .
Tipp: Links und Bilder sind standardmäßig ziehbar und benötigen das Attribut ziehbar nicht.
Es gibt viele Ereignisattribute, die in den verschiedenen Phasen eines Drag-and-Drop-Vorgangs verwendet werden und auftreten können:
- Auf dem ziehbaren Ziel (dem Quellelement) ausgelöste Ereignisse :
- ondragstart - wird ausgelöst, wenn der Benutzer beginnt, ein Element zu ziehen
- ondrag - wird ausgelöst, wenn ein Element gezogen wird
- ondragend - wird ausgelöst, wenn der Benutzer das Ziehen des Elements beendet hat
- Auf dem Drop-Target ausgelöste Ereignisse:
- ondragenter - wird ausgelöst, wenn das gezogene Element das Ablageziel erreicht
- ondragover - wird ausgelöst, wenn sich das gezogene Element über dem Ablageziel befindet
- ondragleave - wird ausgelöst, wenn das gezogene Element das Ablageziel verlässt
- ondrop - wird ausgelöst, wenn das gezogene Element auf dem Ablageziel abgelegt wird
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignisattribut vollständig unterstützt.
Event Attribute | |||||
---|---|---|---|---|---|
ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntax
<element ondragleave="script">
Attributwerte
Value | Description |
---|---|
script | The script to be run on ondragleave |
Technische Details
Unterstützte HTML-Tags: | ALLE HTML-Elemente |
---|
Verwandte Seiten
HTML-Tutorial: HTML5-Drag-and-Drop
HTML-Referenz: HTML-Attribut zum Ziehen
HTML-DOM-Referenz: ondragleave-Ereignis
❮ HTML-Ereignisattribute