Nemrég támadt egy ötletem, hogy fejlesztek egy androidos játékot. Először úgy döntöttem, hogy sakkot írok. Számomra úgy tűnt, hogy a Drag and Drop technológia tökéletes lenne a formák mozgatására szolgáló mechanizmus megvalósításához. Az avatatlanoknak megjegyzem, hogy a módszer drag and drop A drop az egyik grafikus objektum másikra húzásának és egy művelet végrehajtásának képessége 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óban 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.

Felhasználási célok Drag technológiák n Csepp

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

Mozgásvizualizáció. Amikor a felhasználó megérint egy alakzatot, és mozgatni kezdi 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.

A figura mozgási területét a tábla méreteire korlátoztam.

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 eléggé megoldható az API segítségével. Számos egyszerű lépést kell végrehajtanunk:

Hozzon létre egy DragShadowBuilder objektumot.

Hívja meg a startDrag metódust.

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:

@ Public boolean felülbírálása onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder.DragShadowBuilder nézet DragShadowView dsbcder; lipData, 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 mihez kezdenie. Ennek eredményeként a figura nem tér vissza az eredetire eredeti állapoté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 az Android Developers webhely „Drag End események kezelése” szakaszában találtam választ. Íme néhány kulcsfontosságú pont:

Amikor a felhasználó befejezi a húzást, az ACTION_DRAG_ENDED esemény elindul a DragListeners kezelőben.

A DragListenerben többet érhet el részletes információk a húzási műveletről a DragEvent.getResult() metódus meghívásával.

Ha a DragListener igazat ad vissza egy ACTION_DROP eseményre válaszul, 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__DRAG_EXITED) ( includeDragable__DRAG_EXITED) ( includeDragable_)= elsedTIONEragADRction= hamis (DACERAGAction=false ED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction== DragEvent tartalmazza (ACTIONDragAction== DragEvent() sBoardSquareLayoutView) nézet, dragView ) ; dragView.setVisibility(View.VISIBLE) ; ) return true ; ) privát logikai dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent.getResult() ; )

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:

Az ACTION_DRAG_ENTERED eseménnyel a 'containsDraggable' változó igaz értékre állításához.

Az ACTION_DRAG_EXITED esemény használatával a 'containsDraggable' változót false értékre állítja.

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__DRAG_EXITED) ( includeDragable__DRAG_EXITED) ( includeDragable_)= elsedTIONEragADRction= hamis (DACERAGAction=false ED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction== DragEvent tartalmazza (ACTIONDragAction== DragEvent() sBoardSquareLayoutView) 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. addView(dragView) ; view.. addView(dragView) ; nézet. setGravity; handleMove(nézet) ; ) )

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

Ha már a grafikus felhasználói felületről beszélünk, nem szabad megemlíteni a Drag and Drop technológiát (szó szerint: Húzza és dobja).

Ez a technológia drag and drop elemeken alapul GUI forrástól a vevőig. A felület csak egérrel (touchpad, trackball) vagy érintőképernyővel érhető el.

A húzható elemet megragadja és tartja az egérrel, miközben egyidejűleg egy másik helyre húzza. Ha az egér a megfelelő pozícióban van, az egérgombot elengedjük, és ezzel elengedjük az objektumot.

A Drag'n Drop interfészt azonban meg kell különböztetni az interfész vezérlőktől, amelyek metódusaiban vannak olyan metódusok, amelyek az áthelyezésért felelősek, ugyanúgy implementálva. Például egy ablak (űrlap) képes mozogni a képernyőn (a címterület húzásával). A ScrollBox rendelkezik egy görgetőcsúszkával. De mindkét példában a húzás egy belső (az összetevő számára) művelet (esemény), és semmilyen módon nem érinti a rendszer többi objektumát.

A drag and drop felület csak egy objektum tárolóról tárolóra való mozgatására használható, még akkor is, ha a tárolók heterogének. Például egy fájl áthúzása egy mappából egy e-mailbe.

Drag and Drop felület a webes technológiákban

A drag and drop felületek webtechnológiákban való használata áttörést jelentett ben. Vannak offline Drag and Drop szerkesztők (például DreamWeaver) és online (például bármely modern webhelykészítő).

A VCL-könyvtárhoz a Borland megvalósította a Drag&Drop interfész saját verzióját (a fordításban "drag"). 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.

Kattintás bal gomb vigye az egeret a vezérlő fölé, 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ényvevő az 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ő felett, a vevő készenlététől függően még egy vagy két esemény indul el.

CancelDrag 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 egy TControl alaposztályú objektumot ad vissza, 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 nullát ad vissza. 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 meghatározza, hogy a Sender paraméterben megadott objektum a TDragObject osztály leszármazottja-e. 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. Az IsDragObject függvény Source paraméterként is használható az OnDragDrop és OnDockDrop eseménykezelőben a húzott objektum helyes értelmezéséhez.

DragMode, DragCursor tulajdonságok, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metódusok, Accept paraméter

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 meghatározva, 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 indulá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 fordul elő 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.

Hidd 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 azon összetevő bal és felső tulajdonságaival, amely felett a kurzor áll. Mondok egy egyszerű példát. Helyezzen egy Memo komponenst az űrlapra, és állítsa be 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:

A HTML fogd és vidd interfészek lehetővé teszik az alkalmazások számára, hogy a böngészőkben a fogd és vidd funkciókat használják. A felhasználó választhat vonszolható elemeket egérrel, húzza az elemeket a leejthető elemet, és dobja el őket az egérgomb felengedésével. Átlátszó ábrázolása a vonszolható elemek követik a mutatót a húzási művelet során.

Webhelyek, bővítmények és XUL-alkalmazások esetén személyre szabhatja, hogy mely elemek válhatnak belőle vonszolható, a visszajelzés típusa a vonszolható elemek termelnek, és a leejthető elemeket.

Ez a HTML Drag and Drop áttekintése tartalmazza az interfészek leírását, az alkalmazáshoz a drag and drop támogatás hozzáadásának alapvető lépéseit, valamint az interfészek interoperabilitási összefoglalóját.

Húzza az eseményeket Esemény az eseménykezelőben akkor aktiválódik, ha…

húzza	ondrag	…a húzott elem(elem- vagy szövegkijelölés) húzásra kerül.
dragend	ondragend	…a húzási művelet befejeződik (például az egérgomb felengedése vagy az Esc billentyű lenyomása; lásd A húzás befejezése.)
dragenter	ondragent	…a húzott elem érvényes ledobási célt ad meg. (Lát Célok leejtése.)
dragexit	ondragexit	…egy elem már nem a húzási művelet közvetlen kiválasztási célpontja.
dragleave	ondragleave	…a húzott elem érvényes ledobási célt hagy maga után.
dragover	ondragover	…a húzott elemet néhány száz ezredmásodpercenként egy érvényes ledobási cél fölé húzzák.
dragstart	ondragstart	…a felhasználó elkezd húzni egy elemet. (Lát Húzási művelet indítása.)
csepp	csepp	…egy elemet érvényes ledobási célpontra dobtak. (Lát Csepp végrehajtása.)

Megjegyzés: Sem dragstart, sem dragend események nem indulnak el, amikor egy fájlt áthúznak a böngészőbe az operációs rendszerből.

Interfészek Az alapok

Ez a szakasz összefoglalja azokat az alapvető lépéseket, amelyekkel a fogd és vidd funkciót hozzáadhatja egy alkalmazáshoz.

azonosítani, mi az vonszolható

Elem készítése vonszolható hozzá kell adni a vonszolható attribútum és a ondragstart globális eseménykezelő, amint az a következő kódmintán látható:

function dragstart_handler(ev) ( // Adja hozzá a célelem"azonosítóját az adatátviteli objektumhoz ev.dataTransfer.setData("text/plain", ev.target.id); ) window.addEventListener("DOMContentLoaded", () => ( // Az elem lekérése id alapján consttart element1 listen on the document). .addEventListener("dragstart", dragstart_handler); ));

Ez az elem húzható.

További információért lásd:

kezelni a cseppet hatás

A kezelő a csepp esemény ingyenesen dolgozza fel a drag adatokat alkalmazás-specifikus módon.

Általában egy alkalmazás a getData() módszerrel lekérheti a húzott elemeket, majd ennek megfelelően feldolgozhatja azokat. Ezenkívül az alkalmazás szemantikája a függvény értékétől függően eltérő lehet