HTML5 – Fogd és vidd
A Drag and Drop (DnD) hatékony felhasználói felület koncepció, amely megkönnyíti a másolást, az átrendezést és a törlést elemeket egérkattintások segítségével. Ez lehetővé teszi a felhasználó számára, hogy az egérgombot lenyomva tartsa és lenyomva tartsa egy elem fölött, áthúzza egy másik helyre, és elengedi az egérgombot, hogy az elemet oda dobja.
A hagyományos HTML4 alkalmazással a fogd és vidd funkciót érheti el, a fejlesztőknek vagy komplex JavaScript programozást, vagy más JavaScript keretrendszert kell használniuk, például a jQuery stb.
Most a HTML 5 egy Drag and Drop (DnD) API-val állt elő, amely natív DnD támogatást hoz a böngészőben sokkal könnyebb kódolni.
A HTML 5 DnD-t az összes nagy böngésző támogatja, például a Chrome, a Firefox 3.5 és a Safari 4 stb.
Húzza és dobja az eseményeket
A fogd és vidd művelet különféle szakaszaiban számos esemény lő ki. Ezeket az eseményeket az alábbiakban soroljuk fel –
| Sr.No. | Események & Leírás |
|---|---|
| 1 |
dragstart Akkor gyullad ki, amikor a felhasználó elkezdi húzni az objektumot. |
| 2 |
dragenter Akkor aktiválódik, amikor az egeret először áthelyezik a célelem fölé, miközben húzás történik. Az esemény hallgatójának jeleznie kell, hogy megengedett-e ejtés ezen a helyen. Ha nincsenek hallgatók, vagy a hallgatók nem hajtanak végre műveleteket, akkor alapértelmezés szerint nem engedélyezett a dobás. |
| 3 |
áthúzás Ez az esemény akkor indul el, amikor az egér egy elem fölé kerül, amikor húzás történik. Az idő nagy részében a hallgató közben végrehajtott művelet meg fog egyezni a dragenter eseményével. |
| 4 |
dragleave Ez az esemény akkor indul el, amikor az egér elhúz egy elemet, miközben húzás történik. A hallgatóknak el kell távolítaniuk a visszajelzéshez használt összes kiemelő vagy beszúró jelzőt. |
| 5 |
húzás Minden alkalommal elindul, amikor az egeret mozgatja az objektum húzása közben. |
| 6 |
drop A drop esemény arra az elemre kerül, ahol a drop a drag művelet végén történt. A hallgató feladata a húzott adatok lekérése és a dobás helyére történő beillesztése. |
| 7 |
húzás Akkor gyullad ki, amikor a felhasználó elengedi az egérgombot egy objektum húzása közben. |
Megjegyzés – Vegye figyelembe, hogy csak a drag események indulnak; az egéresemények, például az egérmutató, nem kerülnek elindításra egy húzási művelet során.
Az adatátviteli objektum
Az összes drag and drop esemény eseményfigyelő metódusa elfogadja az Event objektumot, amelynek csak olvasható attribútuma van dataTransfer.
Az event.dataTransfer az alábbiak szerint adja vissza az eseményhez társított DataTransfer objektumot –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
A DataTransfer objektum adatokat tartalmaz a húzásról and drop művelet. Ezeket az adatokat az alábbiakban ismertetett módon lekérhetjük és beállíthatjuk a DataTransfer objektumhoz társított különféle attribútumok alapján –
| Sz. Sz. |
dataTransfer.dropEffect
|
|---|---|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Visszaad egy DOMStringList, amely felsorolja a dragstart eseményben beállított formátumokat. Ezen túlmenően, ha bármilyen fájlt húz, akkor az egyik típus a “Fájlok” karakterlánc lesz. |
| 4 |
dataTransfer.clearData () Eltávolítja a megadott formátumok adatait. Az argumentum kihagyása esetén az összes adatot eltávolítja. |
| 5 |
dataTransfer.setData (formátum, adatok) Hozzáadja a megadott adatokat. |
| 6 |
data = dataTransfer.getData (format) A megadott adatokat adja vissza. Ha nincs ilyen adat, akkor az üres karakterláncot adja vissza. |
| 7 |
dataTransfer.files A húzott fájlok FileListáját adja vissza, ha vannak ilyenek. |
| 8 |
dataTransfer.setDragImage (element, x, y) Az adott elem segítségével frissíti a visszacsatolási visszajelzést, helyettesítve a korábban megadott visszajelzéseket. |
| 9 |
dataTransfer.addElement (elem) Hozzáadja az adott elemet a az elhúzási visszajelzés megadásához használt elemek listája. |
Fogd és vidd folyamat
Az alábbiak a fogd és vidd művelet végrehajtásához végrehajtandó lépések –
1. lépés – Objektum húzhatóvá tétele
Itt a következő lépéseket kell megtenni –
-
Ha elemet akar húzni, akkor a draggable attribútumot igaznak kell állítania az elemhez.
-
Eseményfigyelőt állítson be a dragstarthoz, amely torzítja az áthúzott adatokat.
-
Az eseményfigyelő gyorsindítás beállítja a megengedett effektusokat (másolás, áthelyezés, link vagy valamilyen kombináció).
Az alábbi példa az objektum húzhatóvá tételéhez –
Ez a következő eredményt hozza –
2. lépés – Az objektum eldobása
A csepp elfogadásához a drop targetnek legalább három eseményt meg kell hallgatnia.
-
A dragenter esemény, amely meghatározza, hogy a drop target elfogadja-e a drop-ot vagy sem. . Ha a dobást el akarja fogadni, akkor ezt az eseményt le kell törölni.
-
A dragover esemény, amely meghatározza, hogy milyen visszajelzést kell megjeleníteni a felhasználó számára. Ha az esemény törlődik, akkor a visszacsatolás (általában a kurzor) a dropEffect attribútum értéke alapján frissül.
-
Végül a drop esemény, amely lehetővé teszi a tényleges esést végrehajtandó.
Az alábbiakban bemutatunk egy objektum másik objektumba dobásának példáját –
Ez a következő eredményt eredményezi –