HTML ondrag gebeurteniskenmerk

❮ HTML-gebeurteniskenmerken

Voorbeeld

Voer een JavaScript uit wanneer een <p>-element wordt gesleept:

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

Definitie en gebruik

Het attribuut ondrag wordt geactiveerd wanneer een element of tekstselectie wordt gesleept.

Slepen en neerzetten is een veel voorkomende functie in HTML5. Het is wanneer u een object "pakt" en naar een andere locatie sleept. Zie onze HTML-zelfstudie over HTML5 slepen en neerzetten voor meer informatie .

Opmerking: om een ​​element versleepbaar te maken, gebruikt u het algemene HTML5 - attribuut voor verslepen.

Tip: Links en afbeeldingen zijn standaard versleepbaar en hebben het kenmerk verslepen niet nodig.

Er zijn veel gebeurtenisattributen die worden gebruikt, en kunnen optreden, in de verschillende stadia van een slepen-en-neerzetten-bewerking:

  • Gebeurtenissen die zijn afgevuurd op het versleepbare doel (het bronelement) :
    • ondragstart - wordt geactiveerd wanneer de gebruiker een element begint te slepen
    • ondrag - wordt geactiveerd wanneer een element wordt gesleept
    • ondragend - wordt geactiveerd wanneer de gebruiker klaar is met het slepen van het element

  • Gebeurtenissen die zijn afgevuurd op het neerzetdoel:
    • ondragenter - wordt geactiveerd wanneer het gesleepte element het neerzetdoel binnenkomt
    • ondragover - wordt geactiveerd wanneer het versleepte element zich boven het neerzetdoel bevindt
    • ondragleave - wordt geactiveerd wanneer het gesleepte element het neerzetdoel verlaat
    • ondrop - wordt geactiveerd wanneer het gesleepte element op het neerzetdoel wordt neergezet

Opmerking: tijdens het slepen van een element wordt de gebeurtenis ondrag elke 350 milliseconden geactiveerd.


Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die het gebeurteniskenmerk volledig ondersteunt.

Event Attribute
ondrag 4.0 9.0 3.5 6.0 12.0

Syntaxis

<element ondrag="script">

Attribuutwaarden

Value Description
script The script to be run on ondrag

Technische details

Ondersteunde HTML-tags: ALLE HTML-elementen

Gerelateerde pagina's

HTML-zelfstudie: HTML5 slepen en neerzetten

HTML-referentie: HTML-versleepbaar kenmerk

HTML DOM-referentie: ondrag-gebeurtenis


❮ HTML-gebeurteniskenmerken