JavaScript — Introduktion genom exempel

6.1 Element och händelser för drag-and-drop

I en operation med drag-and-drop har man element som kan dras och andra element som är s.k. "drop zones", där man kan släppa de element som dras. För dessa två typer av element finns olika händelser som inträffar. Detta exempel illustrerar hur elementen hanteras och vilka händelser som inträffar. Exemplet är uppdelat i följande tre delar:

1. Demo av vilka element och händelser som är inblandade under drag-and-drop.
2. Alternativ 1 för struktur av koden för drag-and-drop.
3. Alternativ 2 för struktur av koden för drag-and-drop.

Det finns olika sätt att implementera drag-and-drop och det som tas upp i detta och kommande exempel i denna avdelning är den metod som kom i samband med att HTML5 utvecklades. Därför kallas metoden ibland för "HTML5-metoden", men en mer formell benämning är "HTML drag and drop API". De händelser som inträffar är kopplade till drag-and-drop med musen, så det fungerar endast på en dator med mus. Andra metoder och hur man implementerar det på en touch screen kommer i en senare avdelning i denna exempelsamling.

Sammanfattning

• Elementen som kan dras:
  • För de element som dras finns händelserna dragstart, drag och dragend. Händelserna dragstart och dragend inträffar en gång i början respektive slutet av hela operationen. Händelsen drag inträffar hela tiden medan man drar, men oftast använder man inte denna händelse.
  • För de element som ska kunna dras, sätter man egenskapen draggable till true. För element som har en händelsehanterare för dragstart, men som man inte vill ska kunna dras, sätter man draggable till false.
  • En markerad text har som standard att den kan dras. Vill man förhindra att text kan markeras, kan man i CSS-koden använda user-select: none.
• Drop zones, dvs elementen där man ska kunna släppa:
  • För de element som är "drop zones" finns händelserna dragover, dragenter, dragleave och drop.
  • Händelsen dragover inträffar hela tiden medan man drar över en drop zone. Har man även en händelsehanterare för drag, inträffar både dragover och drag omväxlande.
  • Man måste ha med en händelsehanterare för dragover, där man använder e.preventDefault(). I annat fall kommer inte händelsen drop inträffa.
• Om vi utesluter drag är ordningen för händelserna dragstart - dragenter - dragover - ... - dragover - (dragleave eller drop) - dragend. Släpper man elementet på en drop zone, inträffar drop, men inte dragleave. Om man istället drar bort elementet från drop zone, innan man släpper det, inträffar dragleave, men inte drop.
• Event-objektet i händelsehanterarna för dragstart, drag och dragend innehåller information om det element som dras, medan det i händelsehanterarna för dragover, dragenter, dragleave och drop innehåller information om det element som man släppt på.

Egna övningar

Övningar på detta kommer i nästa exempel.