TL; DR – HTML5 Drag and Drop API låter dig ta ett HTML-objekt med markören och dra det till en annan plats.
Vad kan du dra och släppa i HTML5?
HTML5 låter dig göra alla element dragbara, så att du kan plocka upp det med markören och dra det till en annan plats som definieras som ett droppbart element. I exemplet nedan kan du försöka dra en bild till en kvadrat:
Denna funktion förenklar användarupplevelsen och tillåter till och med att skapa enkla onlinespel (t.ex. du kan dra och släppa virtuella schackpjäser). När du drar ett element flyttas dess transparenta replika tillsammans med markören tills du släpper det genom att släppa musknappen.
Tekniskt sett är Dra och släpp ett JavaScript-API som läggs till HTML5. Därför är det viktigt att ha åtminstone grundläggande kunskaper om skript för att kunna arbeta med denna funktion.
Händelser för HTML5 Dra och släpp
I tabellen nedan ser du alla händelser som är relevanta för dra och släpp-funktionen:
| Händelse | Förklaring |
|---|---|
| dra | Markören rör sig medan du drar ett element |
| drop | Dragprocessen är klar |
| dragstart | Markören plockar upp elementet och börjar dra |
| dragend | Musknappen släpps och släpper elementet |
| dragenter | Markören går in i målelementet |
| dragblad | Markören lämnar målelementet |
| dragover | Markören rör sig över målelementet |
Steg för steg Förklaring av dra och släpp
HTML5 dra och släpp-kodning verkar ganska komplicerat vid första anblicken eftersom det inkluderar skript i JS. Låt oss dock studera varje del av processen för att göra det lättare att förstå.
Dragbara element
Först måste du se till att elementet du vill dra har en HTML5 draggable attribut tillämpat och dess värde inställt på true:
Dra
Definiera sedan vad som ska hända när du drar ett objekt. Du kan göra det genom att ringa en händelsehanterare för en dragstart -händelse och definierar en funktion som ska köras.
Värdet och datatypen för den släpade datan måste ställas in av dataTransfer.setData() metod:
Släppning
HTML5-dragbar data specificeras genom att en händelsehanterare bifogas till dragover -händelsen.
Element och data kan inte tappade i andra element som standard. Det betyder att du måste stoppa elementet standardbeteende med event.preventDefault() -metoden:
En drop händelse inträffar när HTML5-släpbara data släpps. Det kallas av ondrop händelsehanteraren:
Den slutliga koden: ett exempel
I grund och botten behöver du din kod för att kunna utför fyra steg:
- Förhindra webbläsarens standardåtgärd relaterad till data genom att ringa
preventDefault() - Få data med
dataTransfer.getData()-metoden - Fäst det dragna elementet på släppelementet
Låt oss se hur det fungerar i exempel nedan:
HTML5 Dra och släpp: användbara tips
- Du kan dra olika typer av element, inklusive men inte begränsat till filer, länkar, bilder och text.
- Du kan också dra flera element samtidigt. Det rekommenderas dock att ha dem alla i samma format för konsistens.
- Formelement som accepterar användarinmatning kan vara släppbara områden som standard.