Technológia drag and drop. Drag-and-drop: Spôsob manipulácie s prvkami používateľského rozhrania. Úplný kód pohybu myšou

Použitie technológie drag and drop (drag and drop) umožňuje používateľovi presúvať rôzne objekty z jedného do druhého, napríklad prvky jedného zoznamu do druhého. Na to musíte použiť dva ovládacie prvky: umývadlo a zdroj. Prijímač je objekt, ktorý prijme zdrojový objekt (pohyblivý objekt).

Udalosti, ktoré sa vyskytnú pri pohybe objektov, sú uvedené nižšie v poradí, v akom k nim dochádza.

OnStartDrag(typ TStartDragEvent) - generované zdrojovým objektom na začiatku operácie. Parametre odovzdané obsluhe udalosti: objekt prijímača DragObject (typ TDragObject), zdrojový objekt (typ TObject).

OnDragOver(typ TDragOverEvent) - vytvorí cieľový objekt, keď je nad ním umiestnený plávajúci objekt. Parametre odovzdané obsluhe udalosti: objekt príjemcu odosielateľa (typ TObject), zdrojový objekt zdroja (typ TObject), stav pohybu štátu (typ TDragState), X a Y (typ celé číslo) - aktuálne súradnice ukazovateľa myši, Accept (typ boolean ) znak potvrdenia operácie presunu. Stav pohybu dáva jasne najavo, či sa pohybovaný objekt nachádza v oblasti prijímača, či sa v nej pohybuje, či ju opustil. Odovzdané parametre umožňujú prijímajúcemu objektu prijať alebo odmietnuť zdrojový objekt. Parameter Accept je nastavený na Trye, ak je operácia presunu prijatá, v opačnom prípade je False.

onDragDrop (typ TDragDropEvent) – Vyvolané cieľovým objektom, keď naň padne ťahaný objekt. Obsluhe udalosti sa odovzdajú aktuálne súradnice ukazovateľa myši, objekt príjemcu odosielateľa (typ TObject) a pôvodný objekt pohybu Source (typ TObject).

onEndDrag (typ EndDragEvent) – Vyvolané, keď sa skončí operácia ťahania. Súradnice X a Y bodu, v ktorom sa zdrojový objekt odosielateľa a objekt cieľového prijímača odovzdávajú obsluhe udalosti.

Na vytvorenie drag and drop stačí implementovať dve udalosti: OnDragDrop a OnDragOver s vlastnosťou DragMode nastavenou na dmAutomatic. V opačnom prípade musí programátor zakódovať začiatok operácie presunu, metódu BeginDrag.

Na konsolidáciu materiálu vytvoríme nasledujúcu aplikáciu. Umiestnite komponent Panel na formulár. Nastavte vlastnosť DragMode inšpektora objektov na dmAutomatic. Vyberte objekt formulára a použite Inšpektor objektov na vytvorenie nasledujúcich udalostí:

Procedure TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); begin if Zdroj = Panel1 then Prijať:= Pravda inak Prijať:= Nepravda; koniec; procedure TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); beginPanel1.Left:=X; Panel1.Top:=Y; koniec;

Teraz spustením aplikácie a stlačením tlačidla myši nad panelom môžeme presúvať objekt panela v celom formulári.

Záver: oboznámili sme sa s technológiou drag and drop(drag and drop) a použili ho v praxi.

Je jednoduchšie niečo zobrať a položiť, ako písať, čo si treba vziať a kam to dať. Samozrejme, bez myši alebo podobného zariadenia nemôžete nič vybrať ani špecifikovať, ale aj v súčasnom stave vecí je používanie myšlienky drag and drop veľmi prirodzené a pohodlné.

Rozsahom myšlienky nie sú len internetové obchody, digitálnych knižníc, hľadať resp Informačné systémy, ale aj aplikovanej oblasti. Myšlienka je veľmi použiteľná pri vývoji stránok a ich prvkov, vytváraných a udržiavaných interaktívne, bez účasti programátora.

Popis myšlienky

Vyberte, presuňte a vložte - myšlienka je prirodzená a pohodlná. Je jednoducho úžasné, že sa nezrodilo, keď sa myš stala nepostrádateľným doplnkom počítača.

Najzrejmejším príkladom je výber produktu v internetovom obchode. Vyberte požadovaný produkt pomocou myši a presuňte ho do nákupného košíka - jednoducho, prirodzene a pohodlne. Nahranie súboru: Praktickým nápadom je aj vytiahnutie dokumentu mimo okna prehliadača a jeho umiestnenie na prvok stránky, čím sa spustí prenos dokumentu na server.

Pre vývojárov je myšlienka „drag and drop“ manipulácia s prvkami stránky bez manuálneho prepočítavania súradníc a veľkostí značiek, možnosť vybrať viacero prvkov a zarovnať ich a presúvať strany značiek bloku.

HTML a CSS sú vynikajúce jazyky na popis značiek a ich úpravu, ale keď má vývojár možnosť interaktívne manipulovať s prvkami stránky bez manuálneho prepočítavania súradníc a veľkostí, práca je pohodlnejšia a efektívnejšia.

Jednoduchý prenos súborov

„Drag and drop“: preklad z angličtiny do ruštiny doslova znie ako „drag and drop“. V praxi to znie a funguje lepšie: vybral, preniesol a pustil - jednoducho a prirodzene.

Implementácia prenosu súborov na stránke na stránku, na server alebo na iné použitie je veľmi jednoduchá.

AT tento príklad Niekoľko súborov na pracovnej ploche bolo vybratých pomocou myši (obrázok vľavo). Pri výbere sa stlačilo ľavé tlačidlo myši a vybraný „išiel“ do košíka. Samotný prehliadač ukázal, ako sa to deje, napísal „kopírovaciu“ nápovedu a vytvoril obrysy presúvaných súborov.

Keď bola myš nad košíkom, návštevník pustil ľavé tlačidlo myšou, prebehla udalosť drag and drop a na stránke webu (spodný obrázok) dokázal JavaScript kód prijať a spracovať všetky súbory, ktoré návštevník poskytol stránke (stránke).

Popis implementácie

Kód, ktorý vykonáva tento postup, je veľmi jednoduchý. Dokonca aj začínajúci vývojár to môže zopakovať v akýchkoľvek prípadoch použitia.

Používateľské rozhranie je tu reprezentované dvoma značkami: scPlaceFile (toto je samotný košík, kam chcete vkladať súbory) a scPlaceFiles (toto je výsledok spracovania súborov, v tomto prípade ich zoznamu).

Logika stránky je nasledovná. Po načítaní stránky v prehliadači je v košíku priradený obslužný program udalosti "ondrop" - vložte, zvyšok udalostí je zablokovaný a nepoužíva sa.

Stránka funguje normálne, no akonáhle návštevník vyberie súbor (súbory) a pretiahne ich na obrázok košíka, teda na značku scPlaceFile, spracuje sa udalosť „súbory dorazili“.

Tento obslužný program jednoducho zobrazí zoznam súborov. Ich počet je v event.dataTransfer.files.length a informácie o každom súbore sú v event.dataTransfer.files[i].name. Čo robiť s prijatými údajmi, určuje vývojár, v tomto prípade sa jednoducho vytvorí zoznam prijatých súborov.

Po spracovaní sa udalosť zablokuje a nerozšíri sa. Je to potrebné, aby sa prehliadač nezapájal do amatérskych aktivít a nezasahoval do spracovania prijatých informácií.

DnD a externé údaje

Nahrávanie obrázkov na server pomocou funkcie „drag and drop“ je v tejto technológii bežnou praxou. Vývojár zvyčajne vytvorí formulár na nahranie súboru (1), ktorý funguje obvyklým spôsobom (2). Návštevník môže normálne vybrať súbory a nahrať ich.

Ak však návštevník potiahne myšou na určité miesto vo formulári, pole názvu súboru (súborov) sa vyplní automaticky.

to dobré rozhodnutie. Je samozrejme veľmi ťažké priznať, že na počítači nie je myš. Ale je lepšie vyvíjať používateľské rozhranie obvyklým spôsobom a v implementácii DnD.

DnD a interné údaje

Starostlivosť o záujmy návštevníka je vždy dôležitá, ale dôležité sú aj obavy developera. Môžete implementovať "presúvať a pustiť" nielen štandardné prostriedky, ale aj spracovaním udalostí myši na prvkoch stránky.

Úloha výpočtu hodnôt súradníc značiek a ich veľkostí neustále vzniká. Manuálny výpočet je dobrou praxou, ale interaktívna možnosť je pohodlnejšia. Všetky značky majú vždy obdĺžnikový tvar a sledovaním udalostí myši na stranách prvkov môžete vytvoriť možnosť automaticky presúvať prvky na správne miesto na stránke alebo ich meniť.

Spracovanie udalosti kliknutia tlačidla myši – zapamätanie súradníc miesta kliknutia, napríklad jednej zo strán prvku. Pohybujte myšou - strana sa pohybuje v požadovanom smere. Uvoľnenie tlačidla myši - strana sa zastaví a jej súradnice sa zmenia. Týmto spôsobom môžete zmeniť polohu prvku alebo jeho veľkosť.

Nie je to formálne drag and drop, ale efekt je podobný a praktický. Vytvorením univerzálnych ovládačov pre akýkoľvek prvok stránky môžete získať dobrý interaktívny výsledok, urýchliť vývoj a zjednodušiť kód.

Vizuálne a manuálne programovanie

Myš na počítači a prsty na smartfóne sú úplne odlišné prístupy k implementácii používateľského rozhrania (návštevník, vývojár). Je to úplne prirodzená a moderná požiadavka na kompatibilitu medzi prehliadačmi.

To všetko spolu komplikuje vytváranie stránok, ale aplikovaním myšlienky „drag and drop“ v jej štandardnej forme, pomocou jej udalostí, kombinovaním tejto myšlienky s obvyklými udalosťami na prvkoch, môžete implementovať mechanizmus, v ktorom sa vytvára stránka sa objaví vizuálne.

Teraz sa pozrime na výber prvku alebo prvkov. Fakt výberu - vzhľad kontextového menu, cieľom je napríklad zarovnať vybrané (vľavo, vpravo, na stred), alebo rozmiestniť prvky vertikálne alebo horizontálne s rovnakým krokom, prípadne zmeniť ich veľkosti (minimálne, maximálne).

Automatický prepočet súradníc a rozmerov je vhodnejší ako manuálny. Menej chýb – cieľ sa dosiahne rýchlejšie. Okrem toho môžete urobiť stránku v jednom prehliadači, uložiť pozíciu a veľkosť prvkov. Otvorením tejto stránky na smartfóne môžete opraviť súradnice a rozmery a zapamätať si ich pre konkrétny model smartfónu alebo verziu prehliadača.

Takže tá istá stránka bez manuálneho súladu s požiadavkou na kompatibilitu medzi prehliadačmi bude mať odlišné údaje na zobrazenie rôzne zariadenia a v rôznych prehliadačoch.

Ak umožníte návštevníkovi vykonať tieto postupy samostatne, ako aj vybrať potrebné prvky stránky spomedzi prvkov poskytnutých vývojárom, môžete zabezpečiť kompatibilitu medzi prehliadačmi a požadovanú funkčnosť stránky, pričom zohľadníte názor používateľa. .

Kde sú prvky GUI implementované pomocou pseudografiky) pomocou myši alebo dotykovej obrazovky.

Metóda sa realizuje „zachytením“ (stlačením a podržaním hlavného ( najprv, častejšie ľavé) tlačidlo myši) objektu zobrazeného na obrazovke počítača, ktorý je programovo dostupný pre takúto operáciu, a premiestnite ho na iné miesto (pre zmenu umiestnenia) alebo ho „hodíte“ na iný prvok (zavoláte príslušný akcia poskytovaná programom). Vo vzťahu k oknám (tiež sa dajú podobným spôsobom presúvať) sa tento výraz zvyčajne nepoužíva.

Základné akcie a najjednoduchšie príklady akcií presúvania myšou sú: presunutie objektu, premiestnenie objektu z panela na panel, hoci v modernom operačné systémy drag-and-drop bol široko používaný a je jedným z hlavných spôsobov interakcie s počítačom v grafickom používateľskom rozhraní.

Objektmi na presúvanie môžu byť nasledujúce prvky rozhrania: ikony na ploche (ikony), plávajúce panely nástrojov, skratky programov na paneli úloh (od Win XP), prvky TreeView, textový reťazec, bunka DataGridView., tiež prvky OLE. Objekty sa môžu pohybovať v rámci určitej oblasti, v rámci jedného okna, medzi panelmi jedného okna a medzi rôznymi oknami.

Udalosť ťahania musí byť spustená nejakou akciou používateľa. Najčastejšie je touto akciou stlačenie ľavého tlačidla myši na prvku (táto udalosť sa nazýva MouseDown), ktorý je možné presunúť v jeho kontajneri. Niektoré komponenty majú svoje vlastné udalosti spustenia drag-n-drop – napríklad TreeView má udalosť ItemDrag.

Nadácia Wikimedia. 2010.

Pozrite sa, čo je to „Pretiahnutie“ v iných slovníkoch:

drag and drop- 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 z Anklikken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [angl. drag „ziehen“ + a „und“ + drop „falled… … Universal-Lexikon

Formulár na vykonanie akejkoľvek akcie v grafické rozhrania používateľa, čo znamená použitie počítačová myš. Preložené z angličtiny znamená doslova: drag and drop. Akcia sa vykonáva pomocou viditeľného na obrazovke ... ... Slovník obchodných podmienok

drag and drop- (počítač) Presunutie ikony, súboru atď. po obrazovke pomocou myši a uvoľnenie na inom mieste (prídavné meno potiahnite a pustite) Hlavná položka: potiahnite … Užitočný anglický slovník

drag and drop- IT na presun niečoho z jednej oblasti obrazovky počítača do druhej pomocou myši: »Softvér vám umožňuje presúvať prvky obrázkov stránky, textu atď. kdekoľvek chcete. Hlavná položka: ťahať … Finančné a obchodné podmienky

drag-and-drop- UK US sloveso č.; Gen.: ; Pl.: unz.; EDV〉 z Anklikken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)