JavaScript — Introduktion genom exempel

6.2 Drop zones

Då man drar ett element över en drop zone, kan man förändra dess stil, för att visa att det är en aktiv drop zone. När man sedan släpper ett element på en drop zon, kan man också förändra drop zone, t.ex. lägga in något innehåll. Beroende på om det dragna elementet ska kunna dras igen eller ej, kan man också behöva göra förändringar av det. Detta exempel består utav tre delar:

1. Visuell effekt på en drop zone, då muspekaren befinner sig över den.
2. Åtgärder vid händelsen drop. Exempel på vad som kan göras både på elementet för drop zone och det element som dragits.
3. Urval av vilka element som man får släppa på. Exemplet visar några olika sätt att hantera detta.

Sammanfattning

• I detta exempel används samma funktion för alla fyra händelserna dragover, dragenter, dragleave och drop. Först i funktionen ligger gemensam kod och sedan skiljer man på de olika händelserna i en switch-sats. Händelsen dragover är dock inte med där, eftersom det endast är den inledande koden (egentligen endast - e.preventDefault() - som ska utföras för denna händelse.
• I funktionen kan man antingen använda this eller e.currentTarget, som referens till det element som är aktuell drop zone.
• På dragenter görs en förändring av elementets stil. Denna förändring får sedan tas bort på dragleave, men den måste även tas bort på drop, eftersom dragleave inte inträffar, om man släpper det som dras och drop inträffar.
• För att i koden för drop även kunna förändra det element som dragits, måste man spara en referens till det, då det börjar dras. Det görs i den inledande koden för dragstart, där this (eller e.currentTarget) sparas i en variabel.
• Om det inte är tillåtet att släppa på alla drop zones, kan man i början av funktionen för drop zone kontrollera om det är en tillåten drop zone. Om det inte är det, lämnar man funktionen med return.
• Ett alternativ till ovanstående är att i funktionen för dragstart kontrollera vilka drop zones som är tillåtna och endast lägga på händelserna dragover, etc. på dem. Det urvalet kan t.ex. ske med en klass i elementen för drop zones.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• I HTML-koden finns ett antal img-taggar med frukter som ska kunna dras och släppas i rutorna till höger (div-elementen). Kopiera funktionen dragStart (inklusive underfunktioner) från script-b.js och gör sedan ändringar i den koden.
• I init-funktionen lägger du till kod, så att bilderna med frukterna blir dragbara och anropar funktionen dragStart på händelsen dragstart.
• I funktionen dragStart ska det läggas på händelsehanterare för dragover, etc. på alla rutor, dvs alla div-element inom det med id="dropZones".
• Vid händelsen drop ska det läggas in en img-tagg i det div-element som man släppt på.
  • I elementets innerHTML ska du alltså lägga in en textsträng för en img-tagg, där src ska vara den adress som finns i src-attributet i den img-tagg som dragits.
• Ändra också stilen för det dragna elementet (sätt t.ex. opacity till 0.5) och se till att det inte kan dras igen.
• Med ovanstående kod kan man dra frukter till alla rutor, oavsett om den är tom eller om det redan finns en frukt där. Lägg nu till kod, så att man endast kan släppa en frukt på en tom ruta.