HTML -Ondrag- Ereignisattribut

❮ HTML-Ereignisattribute

Beispiel

Führen Sie ein JavaScript aus, wenn ein <p>-Element gezogen wird:

<p draggable="true" ondrag="myFunction(event)">Drag me!</p>

Definition und Verwendung

Das ondrag-Attribut wird ausgelöst, wenn ein Element oder eine Textauswahl gezogen 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

Hinweis: Beim Ziehen eines Elements wird das Ereignis ondrag alle 350 Millisekunden ausgelöst.


Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignisattribut vollständig unterstützt.

Event Attribute
ondrag 4.0 9.0 3.5 6.0 12.0

Syntax

<element ondrag="script">

Attributwerte

Value Description
script The script to be run on ondrag

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: ondrag-Ereignis


❮ HTML-Ereignisattribute