JavaScript — ex6-4

6.4 Muspekarens position

Muspekarens position kan man avläsa ur event-objektet för alla mushändelser. Det finns ett antal olika uppsättningar koordinater relativa elementet, dokumentet eller fönstret. Exemplet består av två delar:

Demo av olika värden för X och Y som finns i event-objektet.
Ett exempel där drop zone är ett element som omger flera andra element. De inre elementen kan dras och flyttas till nya positioner inom det yttre elementet (drop zone).

10 min.

Sammanfattning

Koordinaterna finns i event-objektet för musen och kan avläsas för alla händelser för musen, t.ex. click, mousedown, dragstart, dragover och drop.
Med e.offsetX och e.offsetY får man koordinater inom det element som händelsen är kopplad till. I funktionen för dragstart är det alltså inom det element som dras och i funktionen för drop zone är det inom det element som man kan släppa på.
Koordinaterna i event-objektet är endast läsbara. Vill man förändra ett elements position, får man lägga in nya värden i elem.style.left och elem.style.top. Det är viktigt att då inte glömma att också lägga på enheten px.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför nedanstående. Resultatet ska bli ett program där du kan dra djur från "knapparna" och placera dem på valfri plats på den stora ytan.

I init-funktionen går du igenom alla img-taggar inom elementet med id="animalBtns" och ser till att de är dragbara samt lägger på händelsehanterare så att funktionen dragStart anropas på händelsen dragstart.
I funktionen dropZone ska du för händelsen drop lägga till en ny img-tagg med det djur som dragits.
- Lägg alltså till i innerHTML med += en textsträng med en ny img-tagg, där src är hämtat från det element som dragits.
Ta sedan fram en referens till den img-tagg som lagts in.
- Du kan utgå från dropElem och använda querySelector med "img:last-of-type".
Lägg slutligen in x och y som nya värden på left och top för img-taggen. Glöm inte enheten "px".