TL; DR – HTML5 Drag and Drop API lar deg ta et HTML-objekt med markøren og dra det til et annet sted.
Hva kan du dra og slippe i HTML5?
HTML5 lar deg gjøre hvilket som helst element dragsbart, slik at du kan plukke det opp med markøren og dra det til et annet sted som er definert som et droppbart element. I eksemplet nedenfor kan du prøve å dra et bilde til et kvadrat:
Denne funksjonaliteten forenkler brukeropplevelsen og tillater til og med å lage enkle online spill (for eksempel kan du dra og slippe virtuelle sjakkbrikker). Når du drar et element, flytter den gjennomsiktige replikken sammen med markøren til du slipper det ved å slippe museknappen.
Teknisk sett er Dra og slipp et JavaScript-API lagt til HTML5. Derfor er det viktig å ha minst grunnleggende skriptekunnskap for å kunne jobbe med denne funksjonaliteten.
Hendelser for HTML5 Dra og slipp
I tabellen nedenfor vil du se alle hendelsene som er relevante for Dra og slipp-funksjonaliteten:
| Hendelse | Forklaring |
|---|---|
| dra | Markøren beveger seg mens du drar et element |
| drop | Dra prosessen er ferdig |
| dragstart | Markøren henter elementet og begynner å dra |
| dragend | Museknappen slippes og slipper elementet |
| dragenter | Markøren kommer inn i målelementet |
| draglea | Markøren forlater målelementet |
| dragover | Markøren beveger seg over målelementet |
Trinn for trinn Forklaring av dra og slipp
HTML5 dra og slipp-koding virker ganske komplisert ved første øyekast da det inkluderer skripting i JS. La oss imidlertid studere hver del av prosessen for å gjøre det lettere å forstå.
Dragbare elementer
Først må du sørge for at elementet du ønsker å dra har en HTML5 draggable attributt brukt og verdien satt til true:
Dra
Definer deretter hva som skal skje når du drar et objekt. Du kan gjøre det ved å ringe en hendelsesbehandler for en dragstart hendelse og definerer en funksjon som skal utføres.
Verdien og datatypen til de trukkede dataene må settes av dataTransfer.setData() metode:
Slippe
HTML5-dragbare data spesifiseres ved å feste en hendelsesbehandler til dragover -hendelsen.
Element og data kan ikke falt i andre elementer som standard. Dette betyr at du må stoppe elementene standard oppførsel ved hjelp av event.preventDefault() -metoden:
En drop -hendelse oppstår når HTML5-drabare data slippes. Det kalles av ondrop hendelsesbehandler:
Den endelige koden: et eksempel
I utgangspunktet trenger du koden din for å kunne utfør fire trinn:
- Forhindre nettleserens standardhandling relatert til dataene ved å ringe
preventDefault() - Få dataene med
dataTransfer.getData()-metoden - Fest det drage elementet på slippelementet
La oss se hvordan det fungerer i eksempel nedenfor:
HTML5 Dra og slipp: Nyttige tips
- Du kan dra forskjellige typer elementer, inkludert men ikke begrenset til filer, lenker, bilder og tekst.
- Du kan også dra flere elementer samtidig. Det anbefales imidlertid å ha dem alle i samme format for å sikre konsistens.
- Skjemaelementer som godtar brukerinndata, kan være utelukkbare områder som standard.