TL; DR – HTML5 Drag and Drop API giver dig mulighed for at tag et HTML-objekt med din markør og træk det til et andet sted.
Hvad kan du trække og slippe i HTML5?
HTML5 giver dig mulighed for at gøre ethvert element trækkeligt, så du kan hente det med din markør og trække det til en anden placering, der er defineret som et dropbart element. I eksemplet nedenfor skal du prøve at trække et billede til en firkant:
Denne funktionalitet forenkler brugeroplevelsen og tillader endda oprettelse af enkle onlinespil (f.eks. Kan du trække og slippe virtuelle skakbrikker). Når du trækker et element, bevæger dets transparente replika sig sammen med markøren, indtil du slipper det ved at slippe museknappen.
Teknisk set er Træk og slip en JavaScript API tilføjet til HTML5. Derfor er det vigtigt at have mindst grundlæggende scripting-viden for at kunne arbejde med denne funktionalitet.
Begivenheder til HTML5 Træk og slip
I nedenstående tabel kan du se alle begivenheder, der er relevante for træk og slip-funktionalitet:
| Begivenhed | Forklaring |
|---|---|
| træk | Markøren bevæger sig, mens du trækker et element |
| drop | Trækprocessen er afsluttet |
| dragstart | Markøren henter elementet og begynder at trække |
| dragend | Museknappen slippes og slipper elementet |
| dragenter | Markøren går ind i målelementet |
| dragleave | Markøren efterlader målelementet |
| træk | Markøren bevæger sig over målelementet |
Trin for trin Forklaring af træk og slip
HTML5 træk og slip-kodning virker ret kompliceret ved første øjekast, da det inkluderer scripting i JS. Lad os imidlertid studere hver del af processen for at gøre det lettere at forstå.
Trækbare elementer
Først skal du sørge for, at det element, du ønsker at trække, har en HTML5 draggable -attribut anvendt og dens værdi indstillet til true:
Trækning
Definer derefter, hvad der skal ske, når du trækker et objekt. Du kan gøre det ved at ringe en hændelsesbehandler for en dragstart begivenhed og definerer en funktion, der skal udføres.
Værdien og datatypen for de trukkede data skal indstilles af dataTransfer.setData() metode:
Slippe
HTML5-data, der kan trækkes, angives ved at vedhæfte en hændelseshåndterer til dragover -hændelsen.
Elementer og data kan ikke faldt i andre elementer som standard. Det betyder, at du skal stoppe elementets standardadfærd ved hjælp af event.preventDefault() -metoden:
En drop -hændelse opstår, når HTML5-trækbare data slettes. Det kaldes af ondrop begivenhedshåndterer:
Den endelige kode: et eksempel
Dybest set har du brug for din kode for at kunne udfør fire trin:
- Forhindre webbrowserens standardhandling relateret til dataene ved at ringe til
preventDefault() - Få dataene med
dataTransfer.getData()-metoden - Sæt det trukkede element på drop-elementet
Lad os se, hvordan det fungerer i eksempel nedenfor:
HTML5 Træk og slip: Nyttige tip
- Du kan trække forskellige typer elementer, inklusive men ikke begrænset til filer, links, billeder og tekst.
- Du kan også trække flere elementer på én gang. Det anbefales dog at have dem alle i samme format for at sikre konsistens.
- Formularelementer, der accepterer brugerinput, kan som standard være droppbare områder.