A weboldalakon – jellemzően kvíz- vagy vizsgakérdések esetén – gyakran előfordul, hogy elemek egy halmazát sorba kell rendezni, például történelmi eseményeket időrend szerint. Az esetek többségében a fejlesztők a fogd és vidd
megoldást alkalmazzák, amely során az elemeket az egér használatával lehet mozgatni.
A fogd és vidd
, húzd és ejtsd le
(angolul drag and drop
) a számítógép grafikus felhasználói felületén használatos funkció, melynek segítségével a képernyőn lévő valamely absztrakt objektumra egérrel kattintva, majd azt egy másik helyre vagy objektum fölé húzva valamilyen feladat végezhető el. A húzás mozdulata nagyobb erőfeszítést igényel, mint az egér mozgatása a gomb nyomva tartása nélkül. Emiatt a felhasználó nem tudja olyan gyorsan és precízen mozgatni az egeret „drag and drop” közben. A csak billentyűzetet, illetve képernyőolvasó programot használó felhasználók számára ez nem megfelelő megoldás, mivel ez a felhasználói csoport nem egérrel kezeli a számítógépet. Ezért szükséges egy olyan megoldás, amely csak a billentyűzet használatával is lehetővé teszi a "fogd és vidd" művelet elvégzését.
Jelen fejezet célja olyan sorbarendezési megoldás bemutatása, amely az egérművelet mellett csak billentyűzet, illetve képernyőolvasó program használata esetén is megfelelően működik. A megoldás gyakorlati példájában a kedvenc virágokat, a magyar zászló színeit, valamint nevezetes évszámokat kell a csoportjukon belül sorba rendezni.
A Sorbarendezés példa kétféle egérkezelési módot támogat. A példa elején található Fogd és vidd
jelölőnégyzettel szabályozható, hogy az elemeket az egérgomb nyomvatartása közben történő egérmozgatással lehessen-e áthelyezni, vagy előbb a forrás-, majd a célelemre való rövid bal egérgomb-kattintással. A jelölőnégyzet alapállapotban be van jelölve.
Fogd és viddjelölőnégyzet be van jelölve, akkor az egérgomb folyamatos nyomvatartása szükséges a megfogott elem átmozgatásához, és a billentyűzettel nem lehet kezelni az elemeket. Ha szükség van a billentyűzetről történő kezelésre, akkor a jelölőnégyzet bejelöltségét meg kell szüntetni.
Fogd és viddjelölőnégyzet nincs bejelölve, akkor az áthelyezendő elemek kijelölhetők és a cél megadható az egér bal gombjának egyszeri kattintásával, illetve a Szóköz billentyű lenyomásával.
Amikor az egérmutató egy mozgatható elem fölött van, az elem háttere halvány sárgára vált. Az egérgomb nyomva tartása közben a mozgatható elem háttere kék színűre változik.
A kijelölt elemet csak a saját csoportján belül lehet átmozgatni egy másik elemre. Ekkor a lehelyezett elem az aktuális pozíción kerül beillesztésre.
Az algoritmus szaggatott vonalas kerettel jelöli meg a lehetséges célpozíciókat az elem lerakásához.
Fontos megjegyezni, hogy a mozgatott elemet nem lehet saját magára, saját csoportjának a nevére, illetve másik csoportba átvinni! Az említett esetekben az algoritmus visszaáll alaphelyzetbe.
A képernyőolvasó programot és a csak billentyűzetet használó felhasználók esetén a fent említett jelölőnégyzet bejelöltségét meg kell szüntetni. Ebben az esetben a csak billentyűzetet használók a Tab billentyűvel lépkedhetnek az elemeken. A képernyőolvasó-felhasználók a nyílbillentyűket is használhatják az elemek közti navigációra, de ez utóbbi mozgást a vizuális billentyűzetfókusz nem minden esetben követi. A kijelöléshez az elemen a Szóköz billentyűt kell lenyomni, ekkor az adott elem háttere kékre vált. Ezután a Tab vagy a nyílbillentyűkkel arra a pozícióra kell navigálni, ahová a kijelölt elemet le szeretnék tenni. (A Tab billentyű használata esetén a lehetséges célpozíciókat szaggatott vonalas keretezés jelzi.