Útmutató a technológia használata - drag & drop - jQuery
Drag and drop elemek a kurzort valószínűleg a leginkább intuitív módon reagálnak a felhasználók a webhely vagy alkalmazás. Az emberek gyakran próbálja használni drag and drop az egérmutatót az ilyen műveleteket:
- Mozgó e-mail üzeneteket mappákba.
- Sorrendjének megváltoztatása a listáról tételeket.
- Mozgó tárgyakat játékok, mint a kártyajáték és a feladványokat.
Ebben a leckében megnézzük, hogyan lehet létrehozni egy interfész a technika drag-and-drop, hogy jQuery és épít egy teljes alkalmazás: gyerekjáték az elrendezés térképeket.
Ahhoz, hogy hozzá drag & drop funkció az oldalaihoz kell tartalmaznia jQuery és jQuery UI bővítőkönyvtár. jQuery UI egy fantasztikus kívül jQuery, és magában foglalja a nagyszámú felület kütyü a végrehajtás különböző vizuális hatások és algoritmusok munkát, beleértve a technológiai drag & drop.
A legegyszerűbb módja annak, hogy csatlakoztassa a könyvtár - a Google CDN:
Így húzható elem
Ha hozzáad egy elemet a weboldal (pl div vagy kép), hogy fix egy bizonyos helyzetben. Azonban a segítségével jQuery UI könnyű azt húzható az egérmutatót.
Ahhoz, hogy az elemek mozognak, egyszerűen hívja a mozgatható () metódus rajta. Íme:
Add drag and drop lehetőségek
Módszer húzható () akkor át egy csomó különböző lehetőségeket, hogy testre a viselkedése az elem húzása közben:
Néhány gyakran használt beállítások egy hosszú listát:
elszigetelés alapértelmezés szerint akkor drag and drop elemek az oldalon. De akkor korlátozzák a bizonyos részét. Az opciók használhatók elszigetelés értékek: „szülő” korlátozza a területen elmozdulás szülő elem „dokumentum” korlátozása régió mozgassa a teljes oldal „ablak” korlátozza a területen elmozdulás böngésző ablak kiválasztó korlátozza a területen elmozdulás kiválasztott elem tömb 4 értékek ([x1, y1, x2, y2 ]) korlátozza az elmozdulás régió meghatározott téglalap kurzor megváltoztatása kurzor, amikor mozog. Például be lehet állítani, hogy „mozog”. úgy, hogy az egér kurzor megszerezte formájában keresztező kettős nyíllá, ha húzza a kívánt elemet. Telepítse bepattanó választó (például beépülő: "#snapToMe) elem, amelyhez tapad húzta elemet. Lehetőség van arra is, hogy létrehozza a valódi értéket a húzni tételt ragadt bármely más oldalon húzható elem. verem Ha létrehoz egy csoportot drag and drop tárgyakat, például egy sor kártya, akkor általában az egyiket, általában az utolsó mozgatni az objektumot kell helyezni a tetején a többi csoport elemeit. Állítsa be az opciókat verem értéke, mint egy választó, amely megfelel az elemek egy csoportját, akkor érheti el a viselkedését tárgyakat. jQuery UI kérdezi tulajdonságok z-elemeinek indexe, úgy, hogy a jelenlegi húzni elem tetejére helyezett.
Változtassuk meg a példában használni néhány lehetőség:
Megjegyzés: a változás a viselkedés a húzott objektum: a mozgás korlátozott elem #content. kurzor és vonszolta tétel is betartja a határokat a határoló elem.
Használata járulékos elemmel
A segéd elem helyett az eredeti húzás közben elem. Ez a módszer nagyon hasznos, ha kell hagynia az eredeti tétel a helyén, de ugyanakkor lehetővé teszi a felhasználó számára, hogy drag and drop valamit a helyzetben, hogy egy másik helyre az oldalon. Például, hogy a felhasználó képes drag and drop a színpaletta a mutatót az objektum, amelynek meg szeretné változtatni a színét.
Ahhoz, hogy a kiegészítő elem telepíteni segítő lehetőséget. A rendelkezésre álló értékek ezt az opciót:
Az „eredeti” az alapértelmezett. Ez mozgatja nagyon eredeti elem. „Klón” létrehoz egy másolatot elem mozog. Funkció Ez a funkció lehetővé teszi, hogy hozzon létre egy tetszőleges kiegészítő elem. Ön határozza meg a működést, mely a rendezvény célja, és visszaadja az elrendezés a kiegészítő elem. Ez az elem akkor költözött helyett az eredeti.
Ha az érték „klón”, vagy funkció, a kiegészítő elem után elpusztult húzási művelet. Azonban, akkor megáll esemény. hogy információt kapjon az al-elem (pl annak helyét) előtt áll.
A következő példa a funkciót, hogy hozzon létre egy felhasználói kiegészítő eleme a húzási művelet. Mi módosítani az előző példákban:
Események: reagáló mozgás
Gyakran előfordul, hogy ha a felhasználó magával rántja egy elemet, akkor tudnod kell, ha a húzás kezdetének és végének, és az új helyzetben az elem. Meg lehet rendelni funkciókat kezelni több esemény által keletkezett a húzási művelet:
A rendelkezésre álló események:
Kibocsátott létre húzható elem létrehozásakor függvényhívás húzható (). Kibocsátott Start elején a folyamat húzza elem. drag létre, amikor mozgatni a kurzort, és húzza az elemet. álljt, amikor a felhasználó elengedi az egérgombot után húzva az elemet.
Az eseménykezelő el kell fogadnia a két érv:
- Az esemény objektum (esemény).
- jQuery UI objektum elhúzza tétel (ui).
Object ui 3 rendelkezésre álló lehetőségek, hogy információt kapjunk a mozgatható elem:
helper jQuery objektum, amely képviseli a kiegészítő elem a húzással. A állás, amely tartalmazza a drag tagja relatív helyzetét az eredeti helyzetbe. Az objektum két tulajdonságokkal: bal (X koordinátája a bal peremelem), és a felső (Y koordinátája a felső eleme a határ). offset objektum, amely tartalmazza a helyzet a húzott elem képest a dokumentumot. Mivel az objektum pozícióját. Ő két left és top tulajdonságok.
Mi változik meg, például azért, hogy információt jelenít meg a végleges helyére a húzás elemet a dokumentumban, ha a felhasználó elengedi az egér gombját:
Mi határozza meg a stílust, hogy drag and drop elemek
Néha fontos, hogy más típusú drag and drop tárgyakat. Például meg kell osztania a húzni tételt, vagy adjunk hozzá egy csepp árnyék rá, hogy úgy tűnjön fölé az oldalt.
Ha húzza a jQuery UI elem osztály CSS ui-húzható húzva neki. Beállíthatjuk tulajdonságait ennek az osztálynak, hogy változtatni a stílusát drag and drop tárgyakat.
Változtassuk meg a kódot a példa, hogy a tér megváltoztatja a színét pirosról zöldre ha húzza:
Állítsa cél elemet húzza
Az imént ismertetett, hogyan lehet egy elem mozgatható, és hogyan kell kezelni a húzás esetén.
De van egy másik módja annak, hogy válaszoljon a drag and drop elemek. Akkor létrehozhat egy cél elemet. amely megteszi a csökkent terméket.
Amikor a húzott tétel rohan át a cél elemet, az utóbbi generál egy csepp esemény. Írás egy eseménykezelő függvényt csepp. akkor meg mi elemek által érzékelt cél elemet.
Ön is használja újra és azokat az eseményeket, hogy megállapítsák, mikor a mozgatható elem a cél felett, és amikor elhagyja azt. További információért lásd a dokumentációt a jQuery UI.
Ahhoz, hogy a cél elemet, akkor kell használni droppable () metódust.
Változtassuk meg a kódot a példánkban, hogy hozzon létre egy cél elemet:
Létrehoztunk handleDropEvent () függvény, hogy válaszoljon a csepp esemény. Mivel ez egy drag esetben a funkciót kell két érv: az esemény célja, és ui.
Az objektumnak van egy tulajdonság ui húzható. értéket, amely megfelel a húzott tétel. A függvény az ingatlan együtt jQuery attr () metódus, így az azonosító húzható elemet ( „makeMeDraggable”).
következtetés
Az első részben megnéztük a főbb pontokat, hogy hozzon létre egy alkalmazás, amely használja a technológiát a „drag & drop”. A következő részben fogunk építeni egy teljes egyszerű alkalmazás - gyerekjáték az elrendezés térképeket.
5 óra utolsó oszlopában „jQuery”
Ma szeretnénk, hogy meséljek TypeIt könyvtár - ingyenes jQuery plugin. Ön tudja használni, hogy szimulálja a gépelést. Ha minden megfelelően van beállítva, nagyon realisztikus hatás érhető el.
jQuery plugin létre egy idővonal.
jQuery plugin létre egy Gantt diagram.
Egy példa arra, hogyan hajtsák végre a letöltött fájl segítségével PHP és jQuery ajax.
első) Igen, tényleg leegyszerűsíti az élet JQ ui)
Speciálisan írt kament végrehajtás tisztán js, hogy 1 KB, majd error „magában foglalja egy részét az ismétlődő jel” - minden vágya, hogy segítsen eltűnt
Michael Neger
SonikAbstain
Én a demo a piros négyzet, ahol valami után veszett volt Toszkánában! )))
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML-t, és tovább akar lépni, a következő lépés a CSS-technológia megtanulása.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!