Könnyebb valamit elvinni és elhelyezni, mint leírni, hogy mit kell vinni és hova kell tenni. Természetesen egér, vagy hasonló eszköz nélkül nem lehet semmit sem kiválasztani, sem megadni, de a dolgok jelenlegi állásában is nagyon természetes és kényelmes a drag and drop ötlet használata.

Az ötlet hatóköre nem csak webáruházak, digitális könyvtárak, kereső ill Információs rendszerek, hanem az alkalmazott terület is. Az ötlet nagyon jól alkalmazható az interaktívan, programozó közreműködése nélkül létrehozott és karbantartott oldalak és elemeik fejlesztésében.

Az ötlet leírása

Válassza ki, mozgassa és helyezze el - az ötlet természetes és kényelmes. Egyszerűen elképesztő, hogy nem akkor született, amikor az egér a számítógép nélkülözhetetlen kellékévé vált.

A legkézenfekvőbb példa a termék kiválasztása egy webáruházban. Válassza ki a kívánt terméket az egérrel, és húzza a kosárba – egyszerűen, természetesen és kényelmesen. Fájlfeltöltés: Szintén praktikus ötlet egy dokumentumot a böngészőablakon kívülre vinni és oldalelemre helyezni, ezzel kezdeményezve a dokumentum átvitelét a szerverre.

A fejlesztő számára a "húzás" ötlete az oldalelemek manipulálása a címkék koordinátáinak és méretének manuális újraszámítása nélkül, több elem kiválasztásának és igazításának lehetősége, valamint a blokkcímkék oldalainak mozgatása.

HTML és CSS - nagyszerű nyelvek a címkék és azok tervezési stílusainak leírása, de ha a fejlesztőnek lehetősége van interaktívan manipulálni az oldalelemeket anélkül, hogy manuálisan újraszámolná a koordinátákat és a méreteket, ez kényelmesebbé és hatékonyabbá teszi a munkát.

Könnyű fájlátvitel

"Húzd és vidd": a fordítás angolról oroszra szó szerint úgy hangzik, mint "húzd és vidd". A gyakorlatban jobban hangzik és működik: választott, áthelyezett és elengedett – egyszerűen és természetesen.

Nagyon egyszerű a fájlátvitel végrehajtása egy oldalon egy oldalra, egy szerverre vagy más célra.

Ebben a példában az asztalon több fájlt jelöltünk ki az egérrel (bal oldali ábra). A kiválasztásnál a bal egérgombot nyomtuk meg és a kiválasztott „ment” a kosárba. A böngésző maga mutatta meg, hogyan történik ez, írt egy „másolási” tippet, és létrehozta az áthelyezett fájlok körvonalait.

Amikor az egér a kosár fölött volt, a látogató elengedte a bal egérgombot, megtörtént a drag and drop esemény, és a webhely oldalán (alsó képen) a JavaScript kód képes volt fogadni és feldolgozni a látogató által megadott összes fájlt. az oldalra (oldalra).

Megvalósítás leírása

Az eljárást végrehajtó kód nagyon egyszerű. Még egy kezdő fejlesztő is meg tudja ismételni ezt bármilyen felhasználási esetben.

Itt a felhasználói felületet két címke képviseli: scPlaceFile (ez maga a kosár, ahová a fájlokat el szeretné helyezni) és az scPlaceFiles (ez a fájlok feldolgozásának eredménye, jelen esetben ezek listája).

Az oldal logikája a következő. Amikor az oldal betöltődik a böngészőbe, az "ondrop" eseménykezelő hozzá van rendelve a kosárhoz - vagyis a többi esemény blokkolva van, és nem kerül felhasználásra.

Az oldal normálisan működik, de amint a látogató kiválasztja a fájl(oka)t és áthúzza a kosár képére, vagyis az scPlaceFile címkére, a „fájlok megérkeztek” esemény feldolgozásra kerül.

Ez a kezelő egyszerűen megjeleníti a fájlok listáját. Számuk az event.dataTransfer.files.length, az egyes fájlok információi pedig az event.dataTransfer.files[i].name fájlban találhatók. A kapott adatokkal való teendőket a fejlesztő határozza meg, ebben az esetben egyszerűen létrejön a fogadott fájlok listája.

A feldolgozás után az esemény blokkolva lesz, és nem terjed tovább. Erre azért van szükség, hogy a böngésző ne vegyen részt amatőr tevékenységben, és ne zavarja a kapott információk feldolgozását.

DnD és külső adatok

Ebben a technológiában bevett gyakorlat a képek „fogd és vidd” módszerrel történő feltöltése a szerverre. A fejlesztő általában létrehoz egy fájlfeltöltési űrlapot (1), amely a szokásos módon működik (2). A látogató megteheti normál mód válassza ki a fájlokat és töltse fel őket.

Ha azonban a látogató az űrlap egy bizonyos helyére húz és ejti, akkor a fájlnév mező (fájlok) automatikusan kitöltésre kerül.

Ez jó döntés. Természetesen nagyon nehéz beismerni, hogy nincs egér a számítógépen. De jobb a felhasználói felületet a megszokott módon és DnD implementációban fejleszteni.

DnD és belső adatok

A látogató érdekeinek figyelembe vétele mindig fontos, de a fejlesztő szempontjai is számítanak. A „húzással” nem csak szabványos eszközökkel, hanem az oldalelemeken lévő egéresemények kezelésével is megvalósítható.

Folyamatosan felmerül a címkekoordináta-értékek és méretük kiszámításának feladata. A kézi számítás jó gyakorlat, de az interaktív lehetőség kényelmesebb. Minden címke mindig téglalap alakú, és az elemek oldalain lévő egéresemények figyelésével megteremtheti annak lehetőségét, hogy az elemeket automatikusan a megfelelő helyre mozgassa az oldalon, vagy módosítsa azokat.

Az egérgomb kattintási eseményének kezelése - a kattintás helyének koordinátáinak emlékezése, például az elem egyik oldala. Mozgassa az egeret - az oldal a kívánt irányba mozog. Az egérgomb elengedése - az oldal megáll és a koordinátái megváltoznak. Így megváltoztathatja az elem helyzetét vagy méretét.

Formálisan nem drag and drop, de a hatás hasonló és praktikus. Bármely oldalelemhez univerzális kezelők készítésével jó interaktív eredményt érhet el, felgyorsíthatja a fejlesztést és egyszerűsítheti a kódot.

Vizuális és kézi programozás

Az egér a számítógépen és az ujjak az okostelefonon teljesen más megközelítések a felhasználói felület megvalósításához (látogató, fejlesztő). Ez teljesen természetes és modern követelmény a böngészők közötti kompatibilitáshoz.

Mindez együtt megnehezíti az oldalak létrehozását, de a drag and drop ötlet alkalmazása alapforma, eseményeinek felhasználásával, kombinálva ezt az ötletet az elemeken szokásos eseményekkel, megvalósíthat egy olyan mechanizmust, amelyben az oldal létrehozása vizuálisan megtörténik.

Most nézzük meg egy elem vagy elemek kiválasztását. Kijelölés ténye - helyi menü megjelenése, például a cél a kiválasztott igazítása (balra, jobbra, középre), vagy az elemek függőleges vagy vízszintes elosztása ugyanazzal a lépéssel, vagy méretük megváltoztatása (minimális, maximum).

A koordináták és méretek automatikus újraszámítása előnyösebb, mint a kézi. Kevesebb hiba – gyorsabban elérhető a cél. Ezenkívül egy böngészőben oldalt készíthet, elmentheti az elemek helyzetét és méretét. Ezt az oldalt okostelefonon megnyitva kijavíthatja a koordinátákat és méreteket, és megjegyezheti őket konkrét modell okostelefon vagy böngésző verziója.

Így ugyanazon az oldalon a böngészők közötti kompatibilitási követelménynek való kézi megfelelés nélkül különböző adatok jelennek meg különféle eszközökés különböző böngészőkben.

Ha lehetővé teszi a látogató számára, hogy ezeket az eljárásokat önállóan végezze el, valamint a fejlesztő által biztosítottak közül kiválasztja a szükséges oldalelemeket, akkor a felhasználó véleményének figyelembevételével biztosíthatja a böngészők közötti kompatibilitást és az oldal szükséges funkcionalitását. .

A Drag and Drop funkció segíthet az iPad teljesítményének növelésében. Így használhatja.

Így áthelyezhet egy fájlt az egyik felhőalapú tárolási szolgáltatásból a másikba, szöveget másolhat a Safariból egy szövegszerkesztő alkalmazásba, és árajánlatot adhat hozzá, vagy biztonsági mentés bizonyos fényképeket a fájltároló alkalmazásban.

Fényképek, fájlok és szövegek áthúzása

1. Érintse meg és tartsa lenyomva azt a fényképet, fájlt vagy kiemelt szöveget, amelyet át szeretne húzni egy másik alkalmazásba.

2. Húzza az elemet a kívánt helyre ez az alkalmazás vagy egy másik, amelyet a Slide Over vagy Split View módban nyitott meg, és engedje el.

Több fénykép vagy fájl áthúzása egyszerre

1. Érintse meg és tartsa lenyomva az egyik áthúzni kívánt fényképet vagy fájlt.

2. Az aktuális elem húzása közben koppintson egy másik fényképre vagy fájlra, amelyet szintén át szeretne húzni. Ismételje meg annyi elemmel, amennyit el szeretne helyezni.

3. Húzza az összes kijelölt objektumot a kijelölt helyre egy másik alkalmazásban, amelyet a Slide Over vagy Split View módban nyitott meg, és engedje el őket.

Szöveg áthúzása egyik alkalmazásból a másikba

1. Érintse meg és tartsa lenyomva a szöveg azon részét, amelyet húzni szeretne a kijelöléséhez.

2. A kijelölési pontokkal jelölje ki a húzni kívánt szöveg többi részét.

3. Nyomja meg és tartsa lenyomva a kiválasztott szöveget.

4. Húzza a szöveget az alkalmazásba, ahová el szeretné helyezni, és engedje el.

Hogyan változtassuk meg egyszerre több alkalmazás ikonjának helyzetét a "Drag and Drop" segítségével

Míg a legtöbb iOS drag and drop funkció csak az iPaden működik, ez a trükk valójában iPhone és iPad készüléken is működik. Ez lehetővé teszi az alkalmazások helyének rendszerezését a kezdőképernyőn a segítségével « Húzza és vidd", ahelyett, hogy egyenként mozgatná őket.

1. Érintse meg és tartsa lenyomva az áthelyezni kívánt alkalmazás ikonját a kezdőképernyőn.

2. Koppintson azokra a további alkalmazásokra, amelyeket szintén át szeretne helyezni.

3. Húzza ezeket az alkalmazásokat arra az oldalra vagy mappába, ahová szeretné őket helyezni, és dobja el őket.

182

Ebben a példában kiválasztunk egy div elemet, és meghívásával mozgathatóvá tesszük draggable() metódus. Ahogy az alábbi ábrán is látható, a megnyitott dokumentumban az elem a megszokott pozícióját veszi fel, de ezt követően az egérmutatóval a böngészőablakban tetszőleges helyre mozgatható:

A fogd és vidd funkció önmagában is hasznos, de még hasznosabb, ha a következő leírásban ismertetett Dropppable interakcióval együtt használjuk.

A húzható interakció kizárólag meghatározott HTML-jelölések és CSS-stílusok használatával valósul meg. Ez azt jelenti, hogy ez a funkció szinte minden böngészőben működik, de az ezzel felruházott elemek nem fognak tudni működni hasonló natív fogd és vidd lehetőségekkel. operációs rendszer.

A HTML5 specifikáció által meghatározott fogd és vidd műveleteket általában a natív operációs rendszer mechanizmusaival valósítják meg. Ha a jQuery UI fogd és vidd mechanizmust használja, a legjobb, ha letiltja a HTML5 megfelelőit az ütközések elkerülése érdekében. Ehhez állítsa false értékre a dokumentum törzselemének draggable attribútumot.

Húzható interakció testreszabása

Számos testreszabási lehetőség létezik a húzható interakcióhoz. A következő szakaszokban tárgyalt legfontosabb tulajdonságokat az alábbi táblázat foglalja össze:

Húzható interakciós tulajdonságok

Ingatlan	Leírás
tengely	A mozgást bizonyos irányokra korlátozza. Az alapértelmezett érték false, ami azt jelenti, hogy nincs korlátozás, de megadhatja az "x" értéket (csak az x tengely mentén mozog) vagy az "y" értéket (csak az y tengely mentén mozog)
visszatartás	A lebegő elem helyét a képernyő egy meghatározott területére korlátozza. A támogatott értéktípusok leírása az alábbi táblázatban található a megfelelő példával együtt. Az alapértelmezett érték false, ez azt jelenti, hogy nincs korlátozás
késleltetés	Meghatározza, hogy egy elemet mennyi ideig kell húzni, mielőtt elmozdulna. Az alapértelmezett érték 0, ami azt jelenti, hogy nincs késleltetés
távolság	Meghatározza azt a távolságot, amelyet a felhasználónak el kell húznia egy elemet a kiindulási helyétől, mielőtt ténylegesen elmozdulna. Az alapértelmezett érték 1 pixel
rács	Kényszeríti az áthelyezett elem kötődését a rácscellákhoz. Az alapértelmezett érték false, ami azt jelenti, hogy nincs kötés

A mozgási irányok korlátozása

Számos módon korlátozhatja egy elem mozgását bizonyos irányokra. Ezek közül az első az tengely opció használata, amely lehetővé teszi a mozgás irányának az X vagy Y tengelyre történő korlátozását. Egy példa az alábbiakban látható:

...

Példa futtatása

Ebben a példában két div elemet definiálunk, és jelöljük ki őket a gombbal jQueryés hívja meg a draggable() metódust. Ez a metódus egy olyan objektumot ad át, amely eleinte korlátozza mindkét div x irányú mozgását. Ezután a jQuery filter() metódus alkalmazásával kiválaszthatjuk a dragV elemet anélkül, hogy a jQuery újra megkeresné a teljes dokumentumot, és beállíthatjuk egy másik engedélyezett mozgásra. irány - az Y tengely mentén.Így olyan dokumentumot kapunk, amelyben az egyik div elem csak függőleges irányban, a másik pedig csak vízszintes irányban húzható. Az eredmény az ábrán látható:

Egy elem mozgatásához megengedett terület korlátozása

Korlátozhatja a képernyő azon területét is, ahol egy elemet húzhat. Ehhez az elszigetelés opciót használják. Az ebben az opcióban megadható értékformátumok leírása az alábbi táblázatban található:

Az alábbiakban látható egy példa az elszigetelési opció használatára:

...

Példa futtatása

Ebben a példában mindkét elemet úgy kell mozgatni, hogy csak befelé lehessen húzni szülő elem, amely egy fix méretű div elem. Az egyik mozgatható divhez, amelyben az tengely opció be van írva további megkötés, ami azt jelenti, hogy csak vízszintesen mozoghat a szülőelemen belül. Az eredményt az ábra szemlélteti:

Egy elem rácscellákra való áthelyezhetőségének korlátozása

A rács opció lehetővé teszi az áthelyezett elem rácscellákhoz való kötését. Ez az opció egy két elemből álló tömböt fogad el, amely meghatározza a rácscellák szélességét és magasságát képpontokban. Az alábbiakban látható egy példa a rácsopció használatára:

...

Példa futtatása

Ebben a példában a rács 100 képpont szélesre és 50 képpont magasra van beállítva. Amikor egy elemet húz, az egyik (láthatatlan) cellából a másikba "ugrik". A csattanó effektus remekül használható az interakciós funkciókhoz, de ezt nehéz átadni képernyőképekkel.

A szabad mozgás tengelyének 1-re állításával csak egy irányba hozhat létre rasztereffektust. Ha például a rács opciót értékre állítja, az elem vízszintes mozgáskor 100 képpont széles rácscellákra fog illeszkedni, függőlegesen viszont szabadon mozog. .

Utazási késés

Két lehetőség van, amelyek lehetővé teszik egy lebegő elem húzásának késleltetését. A késleltetés opcióval beállíthatja ezredmásodpercben azt az időt, ameddig a felhasználónak el kell húznia az egérmutatót, mielőtt az elemet ténylegesen áthelyezné. Egy másik késleltetési módot biztosít a távolság opció, amely azt a távolságot adja meg pixelben, ameddig a felhasználónak el kell húznia az egérmutatót, mielőtt egy elem követné.

Az alábbiakban látható egy példa mindkét beállítás használatára:

...

Példa futtatása

Ebben a példában két lebegő elem van, amelyek közül az egyik a késleltetés, a másik pedig a távolság opcióval van beállítva.

A késleltetési beállítás által megadott késleltetés esetén a felhasználónak a megadott ideig húznia kell, mielőtt ténylegesen mozgatná az elemet. Ebben a példában ennek a hézagnak az időtartama 1000 ms. Ezalatt az egeret nem kell mozgatni, de az egérgombot a teljes késleltetési idő alatt lenyomva kell tartani, ezután az egér mozgatásával mozgatható az elem. A késleltetési idő letelte után az áthelyezett elem az egérmutató pozíciójába kerül, a korábban tárgyalt rács-, régió- és tengelyopciók által támasztott megkötések függvényében.

A távolság opció is hasonló hatású, de ebben az esetben a felhasználónak az egérmutatót legalább a megadott számú pixelt kell húznia bármely irányba az elem kiindulási helyétől. Az áthelyezett elem ezután a mutató aktuális helyére ugrik.

Ha mindkét beállítást ugyanarra az elemre alkalmazza, akkor az áthelyezett elem mindaddig nem mozdul el, amíg mindkét késleltetési feltétel nem teljesül, pl. amíg az elem elhúzási kísérlete a megadott ideig tart, és amíg az egérmutató el nem mozgatja a megadott számú képpontot.

Húzható interakciós módszerek használata

A húzható interakcióhoz definiált összes metódus része a widgetekben már látott alapvető metódusok halmazának. A húzható interakcióra jellemző módszerek nem állnak rendelkezésre, ezért nem foglalkozunk velük részletesen. Az elérhető módszerek listája az alábbi táblázatban látható:

Húzható interakciós események használata

A húzható interakció támogatja az események egyszerű halmazát, amelyek értesítik, ha egy elemet húznak. Ezeket az eseményeket az alábbi táblázat írja le:

A widget eseményekhez hasonlóan ezekre az eseményekre is lehet reagálni. Az alábbiakban látható egy példa a start és stop események kezelésére:

...

Példa futtatása

Ez a példa a start és stop eseményeket használja egy elem szövegtartalmának megváltoztatására a húzási folyamat során. Ez az előny abból adódik, hogy a Draggable interakciója teljes egészében HTML és CSS használatával valósul meg: a jQuery segítségével módosíthatja a húzható elem állapotát, még akkor is, amikor az a képernyőn mozog.

A Dropppable interakció használata

Egyes helyzetekben elegendő lehet egy elem húzása önmagában, de ez a leghasznosabb, ha a Dropppable interakcióval együtt használjuk.

Azok az elemek, amelyekre az eldobható interakciót alkalmazták (elemek elfogadása), képesek lesznek elfogadni a húzható interakcióval létrehozott eldobható elemeket.

A fogadó elemek a következővel jönnek létre droppable() metódus, de a hasznos funkciók eléréséhez eseménykezelőket kell létrehoznia az ilyen interakcióhoz meghatározottak közül. Az elérhető eseményeket az alábbi táblázat tartalmazza:

Eldobható interakciós események

Esemény	Leírás
teremt	Akkor fordul elő, ha egy elemre eldobható interakciót alkalmaznak
aktiválja	Akkor fordul elő, amikor a felhasználó elkezd húzni egy lebegő elemet
deaktiválja	Akkor fordul elő, amikor a felhasználó abbahagyja a lebegő elem húzását
felett	Akkor fordul elő, amikor a felhasználó egy lebegő elemet húz a fogadó elem fölé (de feltéve, hogy az egérgombot még nem engedték fel)
ki	Akkor fordul elő, amikor a felhasználó egy lebegő elemet a fogadó elemen kívülre húz
csepp	Akkor fordul elő, amikor a felhasználó lebegő elemet hagy a fogadó elemen

Az alábbiakban látható egy példa egy egyszerű fogadóelem létrehozására, amely egyetlen csepp eseménykezelővel rendelkezik:

...

Példa futtatása

Ebben a példában egy div elemet adunk a dokumentumhoz, amelynek szöveges tartalmát a "Hagyja itt" karakterlánc képviseli. Kijelöljük ezt az elemet a jQuery segítségével, és meghívjuk a droppable() metódust, átadva neki egy beállítási objektumot, amely meghatározza a drop esemény kezelőjét. A válasz erre az eseményre a lebegő elem szövegének megváltoztatása a text() metódussal.

Az ebben a példában létrehozott „húzd és vidd” interaktív élmény a legegyszerűbb, de hasznos kontextust biztosít a lehetőségek ismertetéséhez. közös munka Húzható és eldobható interakciók. Az elemek húzása és ledobása folyamatának különböző szakaszait az ábra szemlélteti:

Mindez nagyon egyszerűnek tűnik. A mozgatandó elemet addig húzzuk, amíg a fogadó elem fölé nem kerül, majd elengedjük. Az elejtett elem ott marad, ahol hagyta, és szövegtartalma megváltozik az eldobási esemény hatására. A következő szakaszok bemutatják, hogyan használhat más eldobható interakciós eseményeket a felhasználói élmény javítására.

Cél fogadó objektum kiemelése

Az aktiválási és deaktiválási események használatával kiemelheti a célfogadó objektumot, amikor a felhasználó elkezdi az elem húzását. Ez az ötlet sok esetben nagyon gyümölcsöző, mert megbízható jelzést ad a felhasználónak arról, hogy mely elemek képezik a drag-and-drop modell részét. A vonatkozó példa az alábbiakban látható:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#húzható").text("Eldobható" ") ), aktiválja: function() ( $("#droppable").css(( keret: "közepes dupla zöld", backgroundColor: "lightGreen" )); ), deaktiválja: function() ( $("#droppable" ").css("border", "").css("háttérszín", ""); ) )); )); ... Futtassa a példát

Amint a felhasználó elkezdi húzni az elemet, a fogadó elemünkhöz kapcsolódó aktiváló esemény elindul, és a kezelő függvény a css() metódussal változtat. CSS tulajdonság határés ennek az elemnek a háttérszíne. Ennek eredményeként a cél fogadó elem kiemelésre kerül, jelezve a felhasználónak, hogy kapcsolat van közte és az áthelyezett elem között.

A deaktiválási esemény a CSS-tulajdonságok értékeinek eltávolítására szolgál a fogadó elemből, és visszaállítja azt, amint a felhasználó elengedi az egérgombot. (Ez az esemény akkor aktiválódik, amikor egy elem húzása leáll, függetlenül attól, hogy a húzott elem a fogadó elemen maradt-e vagy sem.) Ezt a folyamatot az ábra szemlélteti:

Elemek átfedésének kezelése

A drag-and-drop technológia továbbfejleszthető, ha eseménykezelést adunk hozzá. A túllépés akkor következik be, ha az áthelyezett elem 50%-a a fogadó elem bármely része felett van. A kilépési esemény akkor aktiválódik, amikor a korábban átfedő elemek már nem fedik át egymást. Az alábbiakban egy példa ezekre az eseményekre adott válaszreakció látható:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#húzható").text("Droppable") ) , aktiválja: function() ( $("#droppable").css(( keret: "közepes dupla zöld", backgroundColor: "lightGreen" )); ), deaktiválja: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( keret: "közepes dupla piros", backgroundColor : "piros" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Példa futtatása

Itt ugyanazok a kezelő függvények használatosak, mint az előző példában, de ebben az esetben az over and out eseményekhez kapcsolódnak. Ha a lebegő elem legalább 50%-a átfedésben van a fogadóelemmel, akkor bekereteződik, és a háttérszíne megváltozik, ahogy az az ábrán látható:

Ezt az 50%-os határt tűrésküszöbnek nevezzük, amely a fogadó elem létrehozásakor állítható be, ahogy az alábbiakban látható lesz.

Eldobható interakciós beállítás

Az eldobható interakció számos tulajdonsággal rendelkezik, amelyeket módosíthat a viselkedése testreszabása érdekében. Ezeket a tulajdonságokat az alábbi táblázat tartalmazza:

Eldobható interakciós tulajdonságok

Ingatlan	Leírás
Tiltva	Ha ez a beállítás igaz, akkor az eldobható interakciós funkció kezdetben le van tiltva. Az alapértelmezett érték false
elfogad	Szűkíti azokat a lebegő elemeket, amelyekre a fogadó elem reagál. Az alapértelmezett érték a *, bármely elemnek megfelel
activeClass	Meghatároz egy osztályt, amely az aktiválási eseményre válaszul lesz hozzárendelve, és a deaktiválási eseményre válaszul el lesz távolítva
hoverClass	Meghatároz egy osztályt, amely egy túllépésre válaszul lesz hozzárendelve, és egy kimeneti eseményre válaszul eltávolítható.
megértés	Megadja az átfedés minimális mértékét, amelynél a túllépés bekövetkezik

A megengedett lebegő elemek korlátozása

Az elfogadás opció használatával korlátozhatja azon eldobható elemek készletét, amelyeket az eldobható együttműködési funkcióval rendelkező elemek fogadnak el. Az elfogadás opció értékének szelektornak kell lennie. Ennek az eseménynek az eredményeként eldobható interakciók csak akkor fordulnak elő, ha az áthelyezett elem egyezik a megadott választóval. A vonatkozó példa az alábbiakban látható:

...

Példa futtatása

Ebben a példában két lebegő elem található drag1 és drag2 azonosítókkal. Az elfogadó elem létrehozásánál az elfogadás opciót használjuk, amellyel jelezzük, hogy csak a drag1 elem lesz elfogadható lebegő elem.

A drag1 elem húzásakor ugyanazt a hatást fogja látni, mint az előző példákban. Az aktiválási, deaktiválási, túllépési és kilépési események a megfelelő időpontokban aktiválódnak a fogadó elemen. Ugyanakkor, ha olyan drag2 elemet húz, amely nem egyezik az elfogadás paraméterben megadott szelektorral, akkor ezek az események nem indulnak el. Ez az elem szabadon mozgatható, de a fogadó elem nem fogadja el.

Jegyezze meg a változást egy elfogadható lebegő elem kiválasztásában, amelyen a text() metódus meghívható. Ha csak egy lebegő elem volt a dokumentumban, akkor ehhez elég volt az id attribútum:

Drop: function() ( $("#draggable").text("Eldobott") ),

Ebben a példában két lebegő elem van, és az id attribútummal történő kijelölés nem hozza meg a kívánt eredményt, mivel a szöveg ebben az esetben mindig ugyanabban a lebegő elemben változik, függetlenül attól, hogy melyiket fogadja el a fogadó elem.

A megoldás az, hogy a jQuery UI által biztosított felhasználói felület objektumot további argumentumként használjuk minden eseménykezelőhöz. Az ui objektum áthúzható tulajdonsága egy jQuery objektumot ad vissza, amely tartalmazza azt az elemet, amelyet a felhasználó a célelemre húz, vagy megpróbál elejteni, lehetővé téve a kívánt elem kiválasztását az alábbiak szerint:

Drop: function(event, ui) ( ui.draggable.text("Dropped") ),

Az átfedési küszöb módosítása

Alapértelmezés szerint az over esemény csak akkor aktiválódik, ha az áthelyezett elem legalább 50%-a átfedi a fogadó elemet. Ennek a küszöbátfedésnek a mértéke a tűrés opcióval módosítható, amely az alábbi táblázatban látható értékeket veheti fel:

Az általam leggyakrabban használt két érték, az illeszkedés és az érintés az, ami a leginkább értelmes a felhasználók számára. Az illesztési értéket akkor használom, amikor a húzott elemnek a fogadó elem azon területén kell maradnia, ahol mozgatták, és az érintési értéket, amikor a húzott elemnek vissza kell térnie az eredeti helyzetébe (példa később lesz). Az alábbiakban látható egy példa az illeszkedési és érintési paraméterek használatára:

A klónérték arra utasítja a jQuery UI-t, hogy készítsen másolatot a lebegő elemről annak teljes tartalmával együtt, és használja az eredményt segédelemként. Az eredmény az ábrán látható:

A segédelem eltávolításra kerül, amikor a felhasználó elengedi az egérgombot a mozgatandó elem felett, így a mozgatandó elem és a fogadó elem az eredeti helyén marad.

Az ábrán látható módon az eredeti lebegő elem a helyén marad, és csak a segédelem mozog a képernyőn az egérmutatót követve. Ha az áthelyezett elem mérete nagy, mint a példánkban, akkor az lefedi a dokumentum többi elemét, így a fogadó elem helyzetét is nehéz lesz követni a felhasználó számára. Ezt a problémát úgy lehet kezelni, hogy a helper opció értékeként egy függvényt adunk meg, amint az az alábbi példában látható:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#kosár").droppable(( activeClass: "aktív", hoverClass: "hover" )); )); ... Futtassa a példát

Amikor a felhasználó elkezd húzni egy elemet, a jQuery UI meghív egy függvényt, paraméter segítőt, és a visszaadott elemet mozgatható objektumként használja. Ebben az esetben a jQuery-t használom az img elem létrehozásához. Az eredmény az ábrán látható:

A kis kép a lebegő elem helyőrzőjeként működik, így sokkal könnyebben nyomon követhető a dokumentum többi eleme.

Az UI objektum, amelyet a jQuery UI átad az eldobható interakciós eseményeknek, egy helper tulajdonságot tartalmaz, és ez a tulajdonság használható a helper elem manipulálására, miközben az áthúzódik. Az alábbiakban egy példa látható ennek a tulajdonságnak az over and out eseményekkel együtt történő használatára:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#kosár").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Itt az over and out események és az ui.helper tulajdonság egy keretet jelenít meg a helper elem körül, amikor az átfedi a host elemet. Az eredmény az ábrán látható:

Illessze az elemek széléhez

Keresztül snap opciók el lehet érni, hogy a mozgatott elem "vonzódjon" azon elemek széleihez, amelyek mellett elhalad. Ez az opció egy szelektort vesz értékeként. A lebegő elem minden olyan elem széléhez illeszkedik, amely megfelel a megadott választónak. Az alábbiakban látható egy példa a snap opció használatára:

Példa futtatása

Amikor egy mozgatható elem megközelíti az egyik illeszkedő elemet, úgy "húzódik" hozzá oly módon, hogy a szomszédos élei összeérnek. Egy ilyen kötéshez bármely elemet kiválaszthat, nem csak a fogadó elemet. Ebben a példában hozzáadtam egy div elemet, és a snap beállítást olyan értékre állítottam, amely kijelöli ezt az elemet a dokumentumban, valamint a fogadó elemet.

Van néhány albeállítás, amelyek segítségével finomhangolhatja az elemek viselkedését a rögzítéssel kapcsolatban. Az egyik az snapMode opciót. A kötés típusának megadására használható. A következő értékek megengedettek: belső(pattintsa az elemek belső széléhez), külső(pattintsa az elemek külső széléhez) és mindkét(minden élhez rögzítés; alapértelmezett).

snapTolerance opció lehetővé teszi annak megadását, hogy a lebegő elemnek milyen messze kell megközelítenie a célelem szélét, mielőtt megtörténik. Az alapértelmezett érték 20, ami 20 pixelt jelent. A példa 50-es értéket használ, ami egy nagyobb távolságban lévő horgonynak felel meg. Nagyon fontos ehhez az opcióhoz a megfelelő értéket választani. Ha a snapTolerance opció értéke túl alacsony, akkor előfordulhat, hogy a felhasználó nem veszi észre a snapping effektust, ha pedig túl magas, akkor az áthelyezett elem váratlanul ugrálni kezd, és a távoli elemekhez pattan.

A VCL-könyvtárhoz a Borland megvalósította a Drag&Drop interfész saját verzióját (lefordítva "drag"-nak). Ez a felület belső - az űrlapon belül bármilyen Delphi-vezérlőt küldhet és fogadhat (kivéve magát az űrlapot). A megfelelő Windows API-funkciók használata nélkül valósul meg - ezeket kell használni, amikor más feladatokkal való kommunikációt húzással szervezik. .

A bal egérgombot a vezérlő fölé nyomva bármely más elemre "húzhatjuk". A programozó szemszögéből ez azt jelenti, hogy a kulcs elhúzásának és elengedésének pillanataiban bizonyos események generálódnak, amelyek minden szükséges információt továbbítanak - egy mutatót a húzott objektumra, az aktuális kurzor koordinátáit stb. Az esemény vevő az elem amelyen a Ebben a pillanatban a kurzor található. Az ilyen esemény kezelőjének meg kell mondania a rendszernek, hogy az adott vezérlő elfogadja-e a "küldést" vagy sem. Ha a gombot elengedjük a vevő vezérlése felett, a vevő készenlététől függően egy vagy két további esemény indul el.

MégseHúzás Megszakítja az aktuális fogd és vidd vagy drag and dock műveletet.

Funkció FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

A függvény az alaposztály egy objektumát adja vissza TControl , amely a képernyő pozíciójára vonatkozik a Pos paraméter által megadott koordinátákkal. Ez a funkció a drag and drop vagy drag and dock művelet lehetséges címzettjének meghatározására szolgál. Ha a megadott pozícióhoz nincs ablakvezérlő, akkor a függvény visszatér nulla . Az AllowDisabled paraméter határozza meg, hogy a rendszer figyelembe veszi-e a letiltott objektumokat.

Funkció IsDragObject(Küldő: TObject ): Logikai ;

A függvény határozza meg, hogy a Sender paraméterben megadott objektum az osztály leszármazottja-e TDragObject . Ez a funkció Source paraméterként használható az OnDragOver és OnDockOver eseménykezelőben annak meghatározására, hogy a húzott objektum elfogadásra kerül-e. Szintén funkció IsDragObjectSource paraméterként használható az OnDragDrop és OnDockDrop eseménykezelőben a húzott objektum helyes értelmezése érdekében.

DragMode, DragCursor tulajdonságai, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metódusok, Paraméter elfogadása

Az információk egyik objektumról a másikra egérrel való áthúzásának folyamatát széles körben használják a Widowsban. Áthelyezhet fájlokat a mappák között, áthelyezheti magukat a mappákat stb.

A drag and drop folyamathoz kapcsolódó összes tulajdonság, metódus és esemény a TControl osztályban van definiálva, amely az összes Delphi vizuális összetevő szülője. Ezért minden alkatrészre közösek.

A húzás kezdetét a DragMode tulajdonság határozza meg, amely beállítható tervezési időpontban, vagy programozottan a dmManual vagy a dmAutomatic értékkel egyenlő. A dmAutomatic (automatic) értéke meghatározza a húzási folyamat automatikus elindulását, amikor a felhasználó az egérgombot az összetevőre kattint. Ebben az esetben azonban az egérgomb megnyomásával kapcsolatos OnMouseDown esemény egyáltalán nem következik be ennél az összetevőnél.

A komponensek átvitelére és fogadására szolgáló felület már régen megjelent. Interakciót biztosít két vezérlő között az alkalmazás végrehajtása során. Ebben az esetben minden szükséges művelet elvégezhető. A megvalósítás egyszerűsége és a fejlesztés kora ellenére sok programozó (főleg a kezdők) ezt a mechanizmust homályosnak és egzotikusnak tartja. A Drag-and-Drop használata azonban nagyon hasznos és könnyen megvalósítható lehet. Most ezt ellenőrizzük.

A mechanizmus működéséhez két vezérlőt kell ennek megfelelően konfigurálni. Az egyiknek a forrásnak (Source) kell lennie, a másodiknak a vevőnek (Cél). Ebben az esetben a forrás nem költözik sehova, hanem csak így van regisztrálva a mechanizmusban.

Higgye el, elég könnyű átalakítani X,Y koordináták, amelyet az OnDragOver és OnDragDrop események paraméterei űrlapkoordinátákba adtak át.

Dolgozzon annak az összetevőnek a bal és felső tulajdonságaival, amely felett a kurzor áll. Mondok egy egyszerű példát. Helyezzen el egy Memo komponenst az űrlapon, és állítsa az Align tulajdonságát alTop értékre. Helyezzen egy panelt az űrlapra, állítsa az Align tulajdonságot is alTop értékre, és állítsa a Height tulajdonságot egy kis értékre, mondjuk 6 vagy 7 pixelre. Állítsa a DragMode-ot dmAutomatica-ra, a DragCursor-t pedig crVSplit-re. Helyezzen be egy másik Memo komponenst, és állítsa be az Align to alClient beállítást. Jelölje ki egyszerre mindkét emlékeztetőt, a panelt, és hozzon létre egy közös OnDragOver eseménykezelőt az alábbiak szerint:

Nemrég támadt egy ötletem, hogy fejlesztek egy androidos játékot. Először úgy döntöttem, hogy sakkot írok. A technológiára gondoltam Drag and Drop tökéletes a formák mozgatására szolgáló mechanizmus megvalósításához. Az avatatlanoknak megjegyzem a drag and drop módszer az abban a lehetőségben, hogy egyes grafikus objektumokat ráhúzhassunk másokra, és egy-egy műveletet végrehajtsunk az elengedés után. A legegyszerűbb példa- távolítsa el a parancsikont a számítógép asztaláról a kukába húzva. A címkét a kukába "dobva" közöljük a rendszerrel, hogy ezt a két objektumot kölcsönhatásba akarjuk hozni. A rendszer fogadja a jelünket, és eldönti, hogy mit tegyen. A fogd és vidd funkció széles körben elterjedt az intuitív tisztaság miatt. Ezt a megközelítést a valós világ objektumaival való interakció során szerzett tapasztalataink támasztják alá, és nagyszerűen működik virtuális környezetben. Ami a sakkot illeti, a drag and drop segítségével technológiailag könnyebb meghatározni azt a cellát, ahová a felhasználó húzta a figurát, mivel nem szükséges a cellaszámot a dobási pont koordinátáiból kiszámítani. Ezt a munkát a virtuális gép veszi át.

A Drag n Drop technológia használatának céljai

A drag and drop technológia segítségével három problémát tudok megoldani kevés vérrel:

1. Mozgásvizualizáció. Amikor a felhasználó megérint egy alakzatot, és elkezdi mozgatni a képernyőn, az alakzatot egy kisebb rajz váltja fel. Így a felhasználó megérti, hogy az ábra rögzítve van.
2. A figura mozgási területét a tábla méreteire korlátoztam.
3. Ha a felhasználó rossz helyen engedi el az alakzatot, vissza kell térnie az eredeti helyzetébe.

A feladatok meghatározottak, kezdjük a megvalósításukat.

Cserélje ki az ImageView-t érintésre

Az összes alakzatom ImageView objektum. Sajnos kiderült, hogy a Drag & Drop implementációja Androidban nem teszi lehetővé, hogy a „dobozból azonnal” lecserélje egy tárgy képét, amikor megérinti. Mindazonáltal ez a feladat meglehetősen megoldható az API segítségével. Számos egyszerű lépést kell végrehajtanunk:

1. Hozzon létre egy DragShadowBuilder objektumot.
2. Hívja meg a startDrag metódust.
3. Az alakzatot megjelenítő ImageView elrejtése a setVisibility metódus View.INVISIBLE paraméterrel történő meghívásával. Ennek eredményeként csak a DragShadowBuilder objektum marad a képernyőn, amely jelzi a felhasználónak, hogy az alakzatot rögzítették.

Ezeket a műveleteket az ImageView objektum OnTouchListner kezelőjében kell végrehajtani. Ehhez felülírjuk az onTouch metódust:

@Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder newBuilderShadow DsilderShadow (nézet) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; return true ; ) else ( return false ; ) )

Minden nagyon egyszerű. Tehát, miután a kép helyettesítését kitaláltuk, térjünk át a következő feladatra.

A húzási terület korlátozása a drag drop funkcióhoz

A húzási terület korlátozása egy problémához kapcsolódik. A helyzet az, hogy ha kiengeded az alakzatot a táblán kívülre, akkor a drop esemény nem fog megtörténni, mert a felhasználó egy üres helyre ejtette az objektumot, és az objektumnak nincs semmi interakciója. Ennek eredményeként a figura nem tér vissza eredeti állapotába, és örökre rejtve marad. Sok időt töltöttem a dokumentáció olvasásával, de nem találtam módot az objektumok húzási területének korlátozására. A kinyilatkoztatás hirtelen jött. Egyáltalán nem kell korlátoznom a területet, tudnom kell, hogy a felhasználó helyesen adta-e ki a figurát vagy sem.

A helyes kiadás meghatározása
Kérdéseimre választ kaptam az Android fejlesztői webhely „Drag End események kezelése” című szakaszában. Íme néhány kulcsfontosságú pont:

1. Amikor a felhasználó befejezi a húzást, az ACTION_DRAG_ENDED esemény elindul a DragListeners kezelőben.
2. A DragListenerben a DragEvent.getResult() metódus meghívásával részletesebb információkat kaphat a húzási műveletről.
3. Ha a DragListener igazat ad vissza egy ACTION_DROP eseményre, akkor a getResult hívás is igazat ad vissza, ellenkező esetben hamis értéket ad vissza.

Tehát el kell fognom az ACTION_DRAG_ENDED eseményt, és meghívnom a getResult metódust. Ha false értéket ad vissza, akkor a felhasználó lehúzta az alakzatot a tábláról, és láthatóvá kell tennem az ImageView-t.

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable)= else false ; if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE)Action= (dragAction)A else ; = Vontatás ) ;)

Most a felhasználó bárhol elengedheti a figurát, és semmi szörnyű nem fog történni.

A megengedett mozgások meghatározása

A cikk utolsó része a felhasználó által végrehajtani kívánt lépés érvényességének ellenőrzésére szolgál. Mielőtt részletesen tárgyalnám ezt a témát, egy kis megjegyzést teszek a pályázatom felépítésére. A sakktábla TableLayout-ként jelenik meg, és minden cella egy LinearLayout leszármazottja, és rendelkezik egy OnDragListener-vel.

Ezenkívül minden OnDragListener egy "közvetítő" objektumra hivatkozik, amely gondoskodik a játékobjektumok interakciójáról, és megjegyzi az aktuális cella pozícióját.

Amikor a felhasználó egy alakzatot húz egy cellára, a következő műveletek lehetségesek:

1. Az ACTION_DRAG_ENTERED esemény használatával a 'containsDraggable' változót igazra állítsa.
2. Az ACTION_DRAG_EXITED esemény használata a 'containsDraggable' változó false értékre állításához.
3. Az ACTION_DROP esemény használata a köztes szoftver lekérdezésére, hogy megengedett-e alakzat elhelyezése ebben a cellában.

Alább látható a leírt logikát megvalósító kód

@Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable)= else false ; if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE)Action= (dragAction)A else ; = DragEvent.ACTION_DROP& amp;& amp; tartalmazzaDragable) ( checkForValidMove((ChessBoardSquareLayoutView) nézet, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Amint láthatja, függetlenül attól, hogy az áthelyezés érvényes-e vagy sem, az ImageView látható állapotba van állítva. Azt akartam, hogy a felhasználó lássa az alakzat mozgását. Korábban említettem, hogy a cella a LayoutView gyermeke. Ez azért történik, hogy megkönnyítse az ImageView mozgatását celláról cellára. Az alábbiakban található a checkForValidMove metódus kódja, amely megmutatja, hogyan kerül áthelyezésre az ImageView.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Remélem, hogy ez a cikk segít Önnek saját projektjei kidolgozásában.