Programming the World Wide Web

Fejezet

6

6.11. Elemek átrendezése „fogd és dobd” (drag and drop) módszerrel

Az eseménykezelés segítségével megvalósítható egyik leghatékonyabb effektus a felhasználónak az a lehetősége, hogy a böngészőablakban megjelenített elemeket megfoghatja, és arrébb helyezheti a kijelzőn. A mouseup, mousedown illetve mouseover események segítségével implementálható ez a lehetőség. Amint azt a korábbi fejezetekben láthattuk, ha egy elem top, illetve left tulajdonságait módosítjuk, ez az elem elmozdulását vonja maga után. A „fogd és dobd” (drag and drop) módszer szemléltetésére egy XHTML dokumentumot és egy hozzá tartozó JavaScript állományt hoztunk létre, melyek egy négysoros vers „mágnestáblára” írását teszik lehetővé. Az első két sor statikus módon adott, míg az utolsó két sor a szavaknak egy mozgatható szavakból álló gyűjteményből történő kiválasztásával, és a megfelelő sorrendben való egymás mellé helyezésével rakható ki.

Ez a példa DOM 0 és DOM 2 eseménymodellt kombinálja. A mousedown esemény esetén a DOM 0 modellt használjuk az eseménykezelő függvény meghívására. A folyamat többi részében a DOM 2 modellt használtuk. A mousedown eseménykezelője, a grabber, az Event objektumot kapja paraméterként. A mozgatni kívánt elemet az Event objektum currentTarget tulajdonságából veszi, és lementi azt egy globális változóba, hogy az a többi handler számára is elérhető legyen. Ezt követően meghatározza a mozgatni kívánt elem aktuális pozíciójának koordinátáit, kiszámítja minden egyes koordináta esetén az egérkurzor pozíciójához viszonyított különbséget. Ez a két különbség, amelyet a mousemove eseménykezelője arra használ, hogy ténylegesen elmozdítsa az elemet, szintén globális változóba lesz elmentve. Ezen kívül a grabber nevű eseménykezelő figyelőként (event listener) regisztrálja a mousemove és mouseup eseménykezelőit. Ezt a két kezelőt mover-nek és dropper-nek neveztük el. A dropper kezelő szétkapcsolja az egér mozgását az elemmozgató folyamattól, a mover és dropper eseménykezelők regisztrációjának visszavonásával. Az alábbiakban található a dragNdrop.html nevű dokumentum, mely a példát leírja. Utána következik a hozzá tartozó JavaScript állomány.

<?xml version="1.0" enconding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Drag and drop </title> <script type="text/javascript" src="dragNDrop.js"> </script> </head> <body style="font-size:20;"> hátamon a zsákom zsákomban a mákom elszaladt rákom mákom mákomban a a  kirágta zsákom rákom kihullott a a </body> </html> // dragNDrop.js var diffX, diffY, theElement; function grabber(event) { theElement = event.currentTarget; var posX = parseInt(theElement.style.left); var posY = parseInt(theElement.style.top); diffX = event.clientX - posX; diffY = event.clientY - posY; document.addEventListener("mousemove", mover, true); document.addEventListener("mouseup", dropper, true); event.stopPropagation(); event.preventDefault(); } function mover(event) { theElement.style.left = (event.clientX - diffX) + "px"; theElement.style.top = (event.clientY - diffY) + "px"; event.stopPropagation(); } function dropper(event) { document.removeEventListener("mouseup", dropper, true); document.removeEventListener("mousemove", mover, true); event.stopPropagation(); }

A 6.13. ábra a dragNDrop.html dokumentumot jeleníti meg

Megjegyzés: A „fogd és dobd” folyamatot a DOM 0 eseménymodellel is le lehet írni. Hordozhatóvá azonban csak úgy tehető, ha a szkript-állomány megvizsgálja, hogy melyik böngészőt használják, és különböző kódot használ más-más böngésző esetére. Ehelyett a „nem egészen tisztának” nevezhető megoldás helyett mi a DOM 2 eseménymodellt választottuk, remlélve, hogy az újabb böngészők egyre inkább az újabb standardokhoz igazodnak és előbb-utóbb minden böngésző implementálja a DOM 2 modellt.

Ugrás az oldal tetejére