TL; DR – Met de HTML5 slepen en neerzetten API kunt u pak een HTML-object met uw cursor en sleep het naar een andere plaats.
Wat kunt u slepen en neerzetten in HTML5?
HTML5 stelt je in staat om elk element versleepbaar te maken, zodat je het met je cursor kunt oppakken en naar een andere locatie kunt slepen die is gedefinieerd als een verwijderbaar element. Probeer in het onderstaande voorbeeld een afbeelding naar een vierkant te slepen:
Deze functionaliteit vereenvoudigt de gebruikerservaring en maakt het zelfs mogelijk om eenvoudige online spellen te maken (je kunt bijvoorbeeld virtuele schaakstukken slepen en neerzetten). Wanneer u een element sleept, beweegt de transparante replica mee met uw cursor totdat u het neerzet door de muisknop los te laten.
Technisch gezien is slepen en neerzetten een JavaScript-API die is toegevoegd aan HTML5. Daarom is het belangrijk om ten minste basiskennis van scripting te hebben om met deze functionaliteit te kunnen werken.
Gebeurtenissen voor HTML5 Drag and Drop
In de onderstaande tabel ziet u alle gebeurtenissen die relevant zijn voor slepen en neerzetten:
| Evenement | Uitleg |
|---|---|
| slepen | De cursor beweegt tijdens het slepen van een element |
| drop | Het slepen is voltooid |
| dragstart | De cursor pikt het element op en begint te slepen |
| dragend | De muisknop wordt losgelaten, het element laat vallen |
| dragenter | De cursor voert het doelelement in |
| dragleave | De cursor verlaat het doelelement |
| sleepover | De cursor beweegt over het doelelement |
Stap voor stap uitleg van slepen en neerzetten
HTML5-codering met slepen en neerzetten lijkt op het eerste gezicht vrij ingewikkeld omdat het scripting in JS omvat. Laten we echter elk onderdeel van het proces bestuderen om het gemakkelijker te begrijpen.
Versleepbare elementen
Eerst moet u ervoor zorgen dat het element dat u wilt slepen een HTML5 draggable kenmerk toegepast en de waarde ervan is ingesteld op true:
Slepen
Definieer vervolgens wat er moet gebeuren nadat u een object hebt gesleept. U kunt dit doen door aan te roepen een gebeurtenishandler voor een dragstart -gebeurtenis en het definiëren van een uit te voeren functie.
De waarde en het gegevenstype van de gesleepte gegevens moeten worden ingesteld door de dataTransfer.setData() methode:
Dropping
De HTML5 versleepbare gegevens worden gespecificeerd door een gebeurtenishandler te koppelen aan de dragover gebeurtenis.
Elementen en gegevens kunnen niet worden standaard in andere elementen geplaatst. Dit betekent dat je de elementen moet stoppen standaardgedrag met behulp van de event.preventDefault() methode:
Een drop -gebeurtenis vindt plaats wanneer de versleepbare HTML5-gegevens worden verwijderd. Het wordt aangeroepen door de ondrop gebeurtenishandler:
De laatste code: een voorbeeld
In principe heb je je code nodig om voer vier stappen uit:
- Voorkom de standaardactie van de webbrowser met betrekking tot de gegevens door
preventDefault() - Haal de gegevens op met de
dataTransfer.getData()methode - Bevestig het gesleepte element op het neerzetelement
Laten we eens kijken hoe het werkt in de voorbeeld hieronder:
HTML5 slepen en neerzetten: handige tips
- U kunt verschillende soorten elementen slepen, inclusief maar niet beperkt tot bestanden, links, afbeeldingen en tekst.
- U kunt ook meerdere elementen tegelijk slepen. Het wordt echter aanbevolen om ze allemaal in hetzelfde formaat te hebben voor consistentie.
- Formulierelementen die gebruikersinvoer accepteren, kunnen standaard verwijderbare gebieden zijn.