Ha már a grafikus felhasználói felületről beszélünk, nem szabad megemlíteni a Drag technológiát és Csepp(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.

Húzza és Drop interfész csak egy objektum tárolóról tárolóra való mozgatására alkalmazható, 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ő).

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 kiválasztani, 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 az online áruházak, digitális könyvtárak, keresés 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 legszembetűnőbb példa a termék kiválasztása az online á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 „drag and drop” ö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.

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

BAN BEN ezt a példát Az asztalon több fájlt is kijelöltünk az egérrel (bal oldali ábra). A kiválasztásnál megnyomták a bal egérgombot é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 bal gomb egérrel, a drag and drop esemény megtörtént, és a webhely oldalán (alsó képen) a JavaScript kód képes volt fogadni és feldolgozni az összes fájlt, amelyet a látogató az oldalnak (oldalnak) adott.

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árképre, 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 feltöltése a szerverre "húzással". 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 ejt, 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 szokásos módon és a 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ány azt jelenti, hanem az oldalelemeken lévő egéresemények kezelésével is.

Folyamatosan felmerül a címkekoordináta-értékek és méretük kiszámításának feladata. Kézi számítás - jó gyakorlatok, de az interaktív változat kényelmesebb. Minden címke mindig téglalap alakú, és az elemek oldalain lévő egéresemények nyomon követésével lehetőséget teremthet arra, hogy az elemeket automatikusan a megfelelő helyre mozgassa az oldalon, vagy módosítsa azokat.

Az egérkattintási esemény kezelése - a kattintási hely koordinátáinak emlékezése, például az elem egyik oldala. Egér mozgatása – oldalra mozdul a helyes irányt. 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 egy 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ényeit felhasználva, kombinálva ezt az ötletet az elemeken szokásos eseményekkel, olyan mechanizmust valósíthat meg, 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 – a cél gyorsabban elérhető. Ezenkívül egy böngészőben oldalt készíthet, elmentheti az elemek helyzetét és méretét. Ha megnyitja ezt az oldalt okostelefonon, javí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, hogy a látogató önállóan végezze el ezeket a műveleteket, 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 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. .

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ő 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: Húzás befejezése .)
dragenter	ondragent	…a húzott elem érvényes ledobási célt ad meg. (Lásd: Leejtési célok megadása.)
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ásd: Húzási művelet indítása.)
csepp	csepp	…egy elemet érvényes ledobási célpontra dobtak. (Lásd: Leejtés 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ó megköveteli a draggable attribútum és az ondragstart globális eseménykezelő hozzáadását, amint az a következő kódmintában látható:

függvény dragstart_handler(ev) ( // A célelem"azonosítójának hozzáadása az adatátviteli objektumhoz ev.dataTransfer.setData("text/plain", ev.target.id); ) window.addEventListener("DOMContentLoaded", () => ( // Az elem lekérése id szerint const element = document.getElementById("p1"); // Az ondragstart eseményfigyelő hozzáadása elem.addEventListener("dragstart", dragstart_handler); ));

Ez az elem húzható.

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

kezelni a cseppet hatás

A drop esemény kezelője szabadon feldolgozhatja a húzási adatokat alkalmazás-specifikus módon.

Az alkalmazások általában a getData() metódust használják a húzóelemek lekérésére, majd azok megfelelő feldolgozására. Ezenkívül az alkalmazás szemantikája a függvény értékétől függően eltérő lehet

Technológia használata drag and drop(drag and drop) lehetővé teszi a felhasználó számára, hogy különböző objektumokat helyezzen át egyikről a másikra, például az egyik lista elemeit a másikra. Ehhez két vezérlőt kell használnia: egy mosogatót és egy forrást. A vevő az az objektum, amely a forrásobjektumot (mozgatható objektumot) fogja fogadni.

Az objektumok mozgása során bekövetkező eseményeket az alábbiakban felsoroljuk, bekövetkezésük sorrendjében.

OnStartDrag(TStartDragEvent típusa) - a forrásobjektum generálja a művelet elején. Az eseménykezelőnek átadott paraméterek: DragObject fogadó objektum (TDragObject típus), Source objektum (TObject típus).

OnDragOver(TDragOverEvent típusú) - célobjektumot hoz létre, amikor egy lebegő objektumot helyeznek fölé. Az eseménykezelőnek átadott paraméterek: Feladó fogadó objektum (TObject típus), Forrásforrás objektum (TObject típus), Állapotmozgás állapota (TDragState típus), X és Y (egész típus) - az egérmutató aktuális koordinátái, Accept (logikai típusú) ) a költözési művelet megerősítésének jele. A mozgás állapota egyértelművé teszi, hogy a mozgatott tárgy a vételi területen van-e, mozog-e benne, elhagyta-e. Az átadott paraméterek lehetővé teszik a vevő objektum számára a forrásobjektum elfogadását vagy elutasítását. Az Accept paraméter Trye értékre van állítva, ha az áthelyezési műveletet elfogadják, ellenkező esetben False.

onDragDrop (TDragDropEvent típus) – A célobjektum emeli fel, amikor a húzott objektumot ráejtik. Az eseménykezelő átadja az egérmutató, a küldő fogadó objektum (TObject típus) és az eredeti Source mozgásobjektum (TObject típus) aktuális koordinátáit.

onEndDrag (EndDragEvent típusa) – Felemelkedik, amikor egy húzási művelet véget ér. Annak a pontnak az X és Y koordinátái, ahol a küldő forrásobjektum és a célvevő objektum átadásra kerül az eseménykezelőnek.

A drag and drop létrehozásához elegendő két eseményt megvalósítani: az OnDragDrop-ot és az OnDragOver-t úgy, hogy a DragMode tulajdonságot dmAutomatic értékre állítjuk. Ellenkező esetben a mozgatási művelet kezdetét, a BeginDrag metódust a programozónak kell kódolnia.

Az anyag összevonásához a következő alkalmazást hozzuk létre. Helyezzen egy panelkomponenst az űrlapra. Állítsa az Object Inspector DragMode tulajdonságát dmAutomatic értékre. Válassza ki az űrlapobjektumot, és használja az Objektumfelügyelőt a következő események létrehozásához:

Eljárás TForm1.FormDragOver(Küldő, Forrás: TObject; X, Y: Integer; Állapot: TDragState; var Accept: Boolean); kezdődik ha Forrás = Panel1 then Accept:= Igaz else Accept:= False; vége; eljárás TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); beginPanel1.Left:=X; Panel1.Top:=Y; vége;

Most az alkalmazás futtatásával és az egér gombjának a panel feletti megnyomásával mozgathatjuk a panelobjektumot az egész űrlapon.

Konklúzió: megismerkedtünk a technológiával drag and drop(húzd és vidd) és alkalmazta a gyakorlatban.