A weboldalakon – jellemzően kvíz- vagy vizsgakérdések esetén – gyakran előfordul, hogy elemek egy halmazát át kell helyezni különböző csoportokba, például egész számokat kell szétválogatni aszerint, hogy prímszámok-e vagy sem. 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 áthelyezé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 1. gyakorlati példájában a Francia kártyákat kell a megfelelő csoportba helyezni és a csoportokon belül sorba rendezni. A 2. gyakorlati példában pedig a kiinduló csoportból kell az elemeket a kategóriájuknak megfelelő célcsoportokba áthelyezni.
A Fogd és vidd
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 be van jelö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 kétféle helyre lehet átvinni:
Az algoritmus mindkét esetben 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 egy eltérő azonosítójú másik nagy csoportba átvinni! Az említett esetekben az algoritmus visszaáll alaphelyzetbe.
A képernyőolvasó programot és csak billentyűzetet használó felhasználók esetén a fent említett jelölőnégyzetet be kell jelölni. Ebben az esetben a 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.