Beépített drag and drop funkció HTML5 - a HTML5
Sok éven át az általunk használt egyszerűsítésére komplex UI elemeket, mint animációk, lekerekített sarkok, és húzza a JQuery és Dojo könyvtárakban. Kétségtelen, hogy a vizuális fontos, hogy minőségi weboldalak, de miért egy könyvtár közös feladatok, hogy minden fejlesztő használja?
észlelési funkciók
Sok használó alkalmazások drag and drop, nem tud nélküle. Képzeljük el, mi akkor kellett volna gondolni a sakkban, hogy nem tudja mozgatni a darabokat. Annak ellenére, hogy teljes mértékben támogatja a böngésző annak megállapítására, hogy végrehajtják a drag and drop (vagy más HTML5 funkciókat, hogy ugyanazt a feladatot), akkor van szükség, hogy olyan megoldást, amely csökkentheti a teljesítmény minőségét. Ha drag and drop funkció nem áll rendelkezésre, az alkalmazás működését valósítható csatlakoztatásával a könyvtárban.
Ha szüksége van egy API helyett meghatározó paraméter User-Agent böngésző szolgáltatás segítségével felderítése. Az egyik a jobb könyvtárak jellemző kimutatási hívják Modernizr. Minden ellenőrzött Modernizr függvény beállítja egy logikai érték. Az eredmény egy nagyon rövid kód ellenőrzése jelenlétére drag and drop:
Létrehozása húzható tartalom
Hogy egy tárgy mozgatható nagyon egyszerű: használja attribútum húzható = true. Húzása is: majdnem minden eleme t. H. képeket, linkeket, fájlokat, és még egy DOM node.
Példaként, hozzon létre egy átrendezhetőbb oszlopokat. Basic tag a következőképpen nézhet ki:
Meg kell jegyezni, hogy a legtöbb böngészőben, szöveges választás, képek és elemeit a kötéseket a href attribútum támogatott alapból. Például van egy szellem kép, ha húzza az emblémát google.com honlapján:
Használata CSS3 jelölést is képviselteti formájában oszlopok. Azzal a kiegészítéssel, az attribútum kurzor mozog a felhasználó kap egy vizuális kijelző eleme a mobilitás:
Eredmény (húzható, de nem csinál semmit):
A fenti példában, a legtöbb böngésző létrehoz egy szellem kép az húzta tartalmat. Egyéb (különösen FF) alatt egy húzási művelet igényel az adatok küldését. A következő részben fogunk tenni oszlop például sokkal érdekesebb hozzáadásával hallgatók, hogy feldolgozza a drag esemény modell.
Hallgassa meg húzás események
Az eljárás ellenőrzésére, akkor drag and drop a rendezvénysorozat:
1. indítása drag
Meghatározása után a tartalmat tulajdonítanak húzható = „true”. add rakodók dragstart eseményeket. ami fut sorozatát drag and drop minden oszlop.
Amint a felhasználó elkezdi húzza az oszlop, akkor a kód csökkenti a homály, hogy 40%:
Mivel a dragstart esemény a forrás elem beállítási értékeit this.style.opacity 40% tulajdonság lehetővé teszi a felhasználónak, hogy a mozgás a kiválasztott elem. Csak meg kell adnia 100 százalékos fényelnyelés oszlop után húzva. Hogy oldja meg ezt a problémát, a dragend esemény. Részletek fogjuk vizsgálni később.
2. dragenter, dragover és dragleave
Hogy további vizuális során a drag and drop rakodók használhatja dragenter eseményeket. dragover és dragleave. Például, ha a húzott objektum felett van az oszlopon, az utolsó határ is szaggatottá válik. Ez megmutatja a felhasználókat, hogy az oszlopok is lehet a cél egy húzás.
Ezt a kódot, érdemes megjegyezni néhány pontot.
3. lezárása a drag
A oszlopban például nem fog nélkül eseményeket csepp. de először meg kell valamit módosítani, eltávolítani a „túlzott” osztály minden oszlopon események dragend:
Ha figyelmesen nézte egy darabig, akkor veszi észre, hogy a drag and drop oszlopok még mindig nem működik a mi példánkban, ahogy kellene. Bemutatjuk Adatátvitel objektumot.
Adatátvitel objektum
Adatátvitel tulajdon - ez az a hely, ahol a drag megvalósul. Ez tartalmazza az adatok egy részét küldött e lépés alatt. Object Adatátvitel állítva dragstart esemény. és olvasni és feldolgozni esetén csepp. Amikor egy funkció e.dataTransfer.setData (méret, adat) tartalmát az objektum rendelve MIME-típus és a hasznos adatokat továbbítanak érveket.
Példánkban a hasznos hajtja végre a tényleges HTML-kód forrása oszlopban:
Előnyös, ha a tárgy Adatátvitel van is egy függvény getData (formátum). amely lehetővé teszi, hogy szállít az adatokat, hogy húzta a MIME-típus. Itt van egy módosított eljárás elhúzódott az oszlop:
Az egyszerűség kedvéért, amikor a mozgó oszlopok tettem hozzá egy globális változót dragSrcEl. A handleDragStart () függvény elem abban tárolt innerHTML forrás oszlopot. Ezt követően beolvassa handleDrop (). megváltoztatja a HTML-kódot a forrás és a cél oszlopok.
tulajdonságok húzás
Adatátvitel objektum tulajdonságai létre vizuális nyom során a felhasználó egy húzás. Azt is fel lehet használni, hogy ellenőrizzék a reakció minden egyes csepp célpontot egy olyan specifikus adatok típusát.
Eredmény (Google embléma jeleníthető húzás közben ezeket az oszlopokat):
Drag and drop fájlokat
Az API segítségével drag and drop drag and drop fájlokat az asztalról a webes alkalmazás, nyissa meg a böngésző ablakot. Ezen felül, a Google Chrome lehetővé teszi, hogy drag and drop tárgyakat a fájl böngésző ablak az asztalra.
Drag and drop az asztalról a böngészőbe
fájlok áthúzása az asztalról keresztül történik drag and drop események, valamint más típusú tartalmat. A fő különbség az eseménykezelő csepp. Ahelyett, hogy a tárgy dataTransfer.getData () hogy az adatfájlokat helyezünk dataTransfer.files tulajdonság:
Drag and drop a böngésző az asztalra
Teljes útmutató a húzással a fájlokat a böngésző az asztalra, lásd a cikk Húzza át a fájlokat, mint a Gmail a CSS Ninja honlapján.
Itt látható a végleges változat jobb megjelenést és a mozgások a számláló:
Ebben a példában az oszlopok érdekessége, hogy mindegyikük a forrás tárgya és célja húzással. A legtöbb esetben a forrás és a cél elemek különbözőek. Lásd egy példa: html5demos.com/drag.
következtetés
HTML5 húzás modell bonyolultabb, mint más megoldások, mint például a JQuery interfész. Azonban, ha lehetősége van arra, hogy egy beépített böngésző API, meg kell használni. A végén, ez a lényege a HTML5: szabványosítása és elérhetővé teszi a teljes körű önállósulást böngészőt. Reméljük, hogy az idő múlásával, népkönyvtárat használó drag and drop funkció alapértelmezés szerint engedélyezve van, támogatja a HTML5 és a lehetőséget a különböző módon testre JS-határozatot.
Élvezték ezt a cikket? Ragadja meg az RSS feed és tartózkodás up-to-date.
Hacsak másként nem jelöljük. Az oldal tartalma licenc alatt a Creative Commons Nevezd meg! 3.0 licenc. és kódmintákat licenc alatt az Apache 2.0 licenc.