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é.

Náplňou myšlienky nie sú len internetové obchody, digitálne knižnice, vyhľadávanie 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 - skvelé jazyky popisy značiek a ich štýlov dizajnu, 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 tým 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á.

V tomto príklade bolo pomocou myši vybratých niekoľko súborov na pracovnej ploche (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 „kópiu“ a vytvoril obrysy presúvaných súborov.

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

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ť „files 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 nebude sa šíriť. 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álny režim vyberte súbory a nahrajte 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.

Toto 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. „Drag and drop“ môžete implementovať nielen štandardnými prostriedkami, ale aj spracovaním udalostí myši na prvkoch stránky.

Úloha vypočítať hodnoty súradníc značiek a ich veľkosti neustále vyvstáva. 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 sťažuje vytváranie stránok, ale aplikovanie myšlienky presunutia myšou štandardná forma, pomocou jeho udalostí, kombinujúc túto myšlienku s obvyklými udalosťami na prvkoch, môžete implementovať mechanizmus, v ktorom sa vytvorenie stránky uskutoční 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 rovnakým krokom, prípadne zmeniť ich veľkosť (minimum, maximum).

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 konkrétny model verzia smartfónu alebo 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 vykonávať tieto postupy samostatne a zároveň si vyberiete potrebné prvky stránky spomedzi prvkov poskytnutých vývojárom, je možné zabezpečiť kompatibilitu medzi prehliadačmi a požadovanú funkčnosť stránky s prihliadnutím na názor užívateľa.

Funkcia Drag and Drop môže pomôcť zvýšiť výkon vášho iPadu. Tu je návod, ako ho môžete použiť.

Takže môžete presunúť súbor z jednej cloudovej úložiska do druhej, skopírovať text zo Safari do aplikácie na úpravu textu a pridať cenovú ponuku alebo vytvoriť zálohovanie určité fotografie v aplikácii na ukladanie súborov.

Ako presúvať fotografie, súbory a text

1. Dotknite sa a podržte fotografiu, súbor alebo zvýraznený text, ktorý chcete presunúť do inej aplikácie.

2. Presuňte prvok na požadované miesto túto aplikáciu alebo iný, ktorý máte otvorený v Slide Over alebo Split View a uvoľnite.

Ako presunúť myšou viacero fotografií alebo súborov naraz

1. Dotknite sa a podržte jednu z fotografií alebo súborov, ktoré chcete presunúť.

2. Počas presúvania aktuálnej položky klepnite na inú fotografiu alebo súbor, ktorý chcete tiež presunúť. Urobte to znova s ​​toľkými prvkami, koľko chcete presunúť.

3. Potiahnite všetky vybraté objekty na určené miesto v inej aplikácii, ktorú máte otvorenú v Slide Over alebo Split View, a uvoľnite ich.

Ako pretiahnuť text z jednej aplikácie do druhej

1. Klepnutím a podržaním časti textu, ktorú chcete potiahnuť, ju vyberte.

2. Pomocou výberových bodov zvýraznite zvyšok textu, ktorý chcete presunúť.

3. Stlačte a podržte vybraný text.

4. Presuňte text do aplikácie, kam ho chcete umiestniť, a uvoľnite ho.

Ako zmeniť polohu ikon niekoľkých aplikácií naraz pomocou "Drag and Drop"

Zatiaľ čo väčšina funkcií drag and drop pre iOS funguje iba na iPade, tento trik v skutočnosti funguje na iPhone aj iPade. To vám umožňuje organizovať umiestnenie aplikácií na domovskej obrazovke pomocou « Drag and Drop“ namiesto presúvania po jednom.

1. Dotknite sa a podržte ikonu aplikácie, ktorej umiestnenie chcete na domovskej obrazovke zmeniť.

2. Klepnite na ďalšie aplikácie, ktoré chcete tiež presunúť.

3. Presuňte tieto aplikácie na stránku alebo priečinok, kde ich chcete mať, a pustite ich.

182

V tomto príklade vyberieme prvok div a sprístupníme ho tak, že ho vyvoláme metóda draggable().. Ako je znázornené na obrázku nižšie, prvok v otvorenom dokumente zaujme svoju obvyklú pozíciu, ale potom ho možno presunúť pomocou ukazovateľa myši na ľubovoľné miesto v okne prehliadača:

Funkcia drag and drop je užitočná sama o sebe, ale ešte užitočnejšia je, keď sa používa v spojení s interakciou s možnosťou pustenia, ktorá je popísaná ďalej.

Interakcia s možnosťou presúvania je implementovaná výlučne pomocou špecifických značiek HTML a štýlov CSS. To znamená, že táto funkcia bude fungovať takmer v akomkoľvek prehliadači, ale prvky, ktoré sú ňou vybavené, nebudú schopné pracovať s podobnými natívnymi funkciami drag-and-drop. operačné systémy.

Operácie drag-and-drop definované špecifikáciou HTML5 sa zvyčajne implementujú pomocou mechanizmov natívneho operačného systému. Ak používate mechanizmus presúvania myšou v používateľskom rozhraní jQuery, je najlepšie vypnúť ekvivalenty HTML5, aby ste predišli konfliktom. Ak to chcete urobiť, nastavte atribút draggable prvku tela dokumentu na hodnotu false.

Prispôsobenie preťahovateľnej interakcie

Existuje veľa možností prispôsobenia interakcie s možnosťou presúvania. Najdôležitejšie vlastnosti uvedené v nasledujúcich častiach sú zhrnuté v tabuľke nižšie:

Vlastnosti interakcie s možnosťou presúvania

Nehnuteľnosť	Popis
os	Obmedzuje pohyb v určitých smeroch. Predvolená hodnota je false, čo znamená žiadne obmedzenia, ale môžete zadať aj hodnotu „x“ (pohybovať sa iba pozdĺž osi x) alebo „y“ (pohybovať sa iba pozdĺž osi y)
zadržiavanie	Obmedzuje umiestnenie plávajúceho prvku na konkrétnu oblasť obrazovky. Podporované typy hodnôt sú popísané v tabuľke nižšie s príslušným príkladom. Predvolená hodnota je false, to znamená žiadne obmedzenia
meškanie	Určuje, koľko času musí byť prvok ťahaný, kým sa presunie. Predvolená hodnota je 0, čo znamená žiadne oneskorenie
vzdialenosť	Určuje vzdialenosť, o ktorú musí používateľ potiahnuť prvok z jeho počiatočnej polohy, než sa skutočne presunie. Predvolená hodnota je 1 pixel
mriežka	Vynúti väzbu presunutého prvku na bunky mriežky. Predvolená hodnota je false, čo znamená žiadnu väzbu

Obmedzenie smerov pohybu

Existuje niekoľko spôsobov, ako môžete obmedziť pohyb prvku do určitých smerov. Prvým z nich je použitie možnosti osi, ktorá umožňuje obmedziť smer pohybu na os X alebo Y. Príklad je uvedený nižšie:

...

Spustiť príklad

V tomto príklade definujeme dva prvky div, vyberieme ich pomocou jQuery a zavolajte metódu draggable(). Tejto metóde sa odovzdá objekt, ktorý spočiatku obmedzuje oba prvky div na pohyb v smere x. Potom použitím metódy jQuery filter() môžeme vybrať prvok dragV bez toho, aby jQuery znova prehľadal celý dokument a nastaviť ho na iný povolený pohyb. smer - pozdĺž osi Y. Získame tak dokument, v ktorom jeden prvok div možno ťahať iba vo vertikálnom smere a druhý - iba v horizontálnom smere. Výsledok je znázornený na obrázku:

Obmedzenie povolenej oblasti na presun prvku

Môžete tiež obmedziť oblasť obrazovky, kde môžete pretiahnuť prvok. Na tento účel sa používa možnosť uzavretia. Formáty hodnôt, ktoré možno zadať v tejto možnosti, sú popísané v tabuľke nižšie:

Príklad použitia možnosti uzavretia je uvedený nižšie:

...

Spustiť príklad

V tomto príklade sú obidva prvky obmedzené na pohyb takým spôsobom, že ich možno dovnútra iba potiahnuť nadradený prvok, čo je prvok div s pevnou veľkosťou. Pre jeden z pohyblivých divov so zadanou možnosťou osi dodatočné obmedzenie, čo znamená, že sa môže pohybovať iba vodorovne vo vnútri nadradeného prvku. Výsledok je znázornený na obrázku:

Obmedzenie možnosti presunúť prvok do buniek mriežky

Možnosť mriežky umožňuje nastaviť väzbu presunutého prvku na bunky mriežky. Táto možnosť akceptuje pole dvoch prvkov, ktoré špecifikujú šírku a výšku buniek mriežky v pixeloch. Príklad použitia možnosti mriežky je uvedený nižšie:

...

Spustiť príklad

V tomto príklade je mriežka nastavená na šírku 100 pixelov a výšku 50 pixelov. Keď potiahnete prvok, „preskočí“ z jednej (neviditeľnej) bunky do druhej. Efekt prichytenia je skvelým prípadom použitia interakčnej funkcie, ale je ťažké ho vyjadriť pomocou snímok obrazovky.

Efekt prichytenia môžete vytvoriť iba pre jeden smer nastavením osi voľného pohybu na 1. Ak napríklad nastavíte možnosť mriežky na , prvok sa pri horizontálnom pohybe prichytí k bunkám mriežky so šírkou 100 pixelov, ale vertikálne sa bude pohybovať voľne .

Oneskorenie cesty

Existujú dve možnosti, ktoré vám umožňujú oddialiť ťahanie plávajúceho prvku. Pomocou možnosti oneskorenia môžete nastaviť čas v milisekundách, počas ktorého musí používateľ potiahnuť ukazovateľ myši, kým sa prvok skutočne presunie. Iný druh oneskorenia poskytuje možnosť vzdialenosti, ktorá určuje vzdialenosť v pixeloch, o ktorú musí používateľ potiahnuť ukazovateľ myši, kým za ním bude prvok nasledovať.

Príklad použitia oboch nastavení je uvedený nižšie:

...

Spustiť príklad

V tomto príklade sú dva plávajúce prvky, z ktorých jeden má nastavené oneskorenie s možnosťou oneskorenia a druhý s možnosťou vzdialenosti.

V prípade oneskorenia určeného voľbou oneskorenia musí používateľ ťahať po zadaný čas, kým prvok skutočne presunie. V tomto príklade je trvanie tejto medzery 1000 ms. Počas tejto doby nie je potrebné hýbať myšou, ale tlačidlo myši musí zostať stlačené počas celej doby oneskorenia, po ktorej je možné pohybovať prvkom pohybom myši. Po uplynutí času oneskorenia sa presúvaný prvok prichytí do polohy ukazovateľa myši, v závislosti od obmedzení vyplývajúcich z možností mriežky, oblasti a osi, o ktorých sme hovorili vyššie.

Voľba vzdialenosti má podobný účinok, ale v tomto prípade musí používateľ potiahnuť ukazovateľ myši najmenej o určený počet pixelov v ľubovoľnom smere od počiatočnej polohy prvku. Presunutá položka potom preskočí na aktuálne umiestnenie ukazovateľa.

Ak použijete obe nastavenia na rovnaký prvok, potom sa presúvaný prvok nepohne, kým nie sú splnené obe kritériá oneskorenia, t.j. kým pokus o pretiahnutie prvku netrvá určený čas a kým sa ukazovateľ myši nepohne o zadaný počet pixelov.

Používanie metód interakcie s možnosťou presúvania

Všetky metódy definované pre interakciu Draggable sú súčasťou súboru základných metód, ktoré ste už videli vo widgetoch. Metódy špecifické pre interakciu s možnosťou presúvania nie sú k dispozícii, preto sa nimi nebudeme podrobne zaoberať. Zoznam dostupných metód je uvedený v tabuľke nižšie:

Používanie presúvateľných udalostí interakcie

Interakcia s možnosťou presúvania podporuje jednoduchý súbor udalostí, ktoré upozorňujú, keď sa prvok presúva. Tieto udalosti sú popísané v tabuľke nižšie:

Rovnako ako v prípade udalostí widgetu, aj na tieto udalosti je možné reagovať. Príklad spracovania udalostí spustenia a zastavenia je uvedený nižšie:

...

Spustiť príklad

Tento príklad používa udalosti štart a stop na zmenu textového obsahu prvku počas procesu ťahania. Táto výhoda pochádza zo skutočnosti, že interakcia Draggable je implementovaná výlučne pomocou HTML a CSS: môžete použiť jQuery na zmenu stavu plávajúceho prvku, aj keď sa pohybuje po obrazovke.

Použitie interakcie Droppable

V niektorých situáciách môže stačiť samotné pretiahnutie prvku, ale najužitočnejšie je, keď sa použije v spojení s interakciou s možnosťou pustenia.

Prvky, na ktoré bola aplikovaná interakcia s možnosťou presúvania (prijímanie prvkov), získavajú možnosť prijímať prvky s možnosťou presúvania vytvorené pomocou interakcie s možnosťou presúvania.

Prijímacie prvky sú vytvorené s droppable() metóda, ale aby ste získali užitočnú funkcionalitu, budete musieť vytvoriť obsluhu udalostí spomedzi tých, ktoré sú definované pre tento druh interakcie. Dostupné udalosti sú uvedené v tabuľke nižšie:

Udalosti interakcie s možnosťou pustenia

Udalosť	Popis
vytvoriť	Vyskytuje sa, keď sa na prvok aplikuje interakcia s možnosťou pustenia
Aktivovať	Vyskytuje sa, keď používateľ začne ťahať plávajúci prvok
deaktivovať	Vyskytuje sa, keď používateľ prestane presúvať plávajúci prvok
cez	Vyskytuje sa, keď používateľ pretiahne plávajúci prvok cez prijímajúci prvok (ale za predpokladu, že tlačidlo myši ešte nebolo uvoľnené)
von	Vyskytuje sa, keď používateľ potiahne plávajúci prvok mimo prijímajúceho prvku
pokles	Vyskytuje sa, keď používateľ nechá na prijímacom prvku plávajúci prvok

Nižšie je uvedený príklad vytvorenia jednoduchého prijímacieho prvku, ktorý má jeden obslužný program udalosti poklesu:

...

Spustiť príklad

V tomto príklade je do dokumentu pridaný prvok div, ktorého textový obsah je reprezentovaný reťazcom „Nechajte to tu“. Tento prvok vyberieme pomocou jQuery a zavoláme metódu droppable() a odošleme mu objekt nastavení, ktorý definuje obslužný program pre udalosť drop. Odpoveďou na túto udalosť je zmena textu plávajúceho prvku pomocou metódy text().

Interaktívna skúsenosť s myšou a myšou vytvorená v tomto príklade je najjednoduchšia, ale poskytuje užitočný kontext na vysvetlenie možností. spoločná práca Interakcie s možnosťou presúvania a presúvania. Rôzne fázy procesu presúvania prvkov sú znázornené na obrázku:

Toto všetko vyzerá veľmi jednoducho. Ťaháme presúvaný prvok, kým nie je nad prijímacím prvkom a uvoľníme ho. Vypustený prvok zostane tam, kde bol ponechaný, a jeho textový obsah sa zmení v reakcii na výskyt udalosti zrušenia. Nasledujúce časti vám ukážu, ako použiť ďalšie udalosti interakcie s možnosťou droppable na zlepšenie používateľského zážitku.

Zvýraznenie objektu prijímania cieľa

Použitím udalostí aktivovať a deaktivovať môžete zvýrazniť cieľový prijímajúci objekt, keď používateľ začne proces ťahania prvku. V mnohých situáciách je táto myšlienka veľmi plodná, pretože používateľovi poskytuje spoľahlivé informácie o tom, ktoré prvky sú súčasťou modelu drag-and-drop. Príslušný príklad je uvedený nižšie:

... $(funkcia() ( $("#pretiahnuteľné").pretiahnutie(); $("#vypustiteľné").droppable(( drop: function() ( $("#pretiahnuteľné").text("Vypustené" ") ), aktivovať: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable") ").css("hranica", "").css("farba-pozadia", ""); ) )); )); ... Spustite príklad

Hneď ako používateľ začne ťahať prvok, spustí sa udalosť activate – spojená s naším prijímajúcim prvkom – a funkcia handler na zmenu použije metódu css(). Hranica vlastnosti CSS a farba pozadia tohto prvku. V dôsledku toho sa cieľový prijímací prvok zvýrazní, čo používateľovi oznámi, že medzi ním a presúvaným prvkom existuje spojenie.

Udalosť deactivate sa používa na odstránenie hodnôt vlastností CSS z prijímajúceho prvku a ich resetovanie, len čo používateľ uvoľní tlačidlo myši. (Táto udalosť sa spustí vždy, keď sa zastaví ťahanie prvku, bez ohľadu na to, či je ťahaný prvok ponechaný na prijímajúcom prvku alebo nie.) Tento proces je znázornený na obrázku:

Manipulácia s prekrývaním prvkov

Technológia drag-and-drop sa dá vylepšiť tým, že sa k nej pridá prepracovanie udalostí. Udalosť over nastane, keď sa 50 % presúvaného prvku nachádza nad akoukoľvek časťou prijímacieho prvku. Udalosť out sa spustí, keď sa predtým prekrývajúce sa prvky už neprekrývajú. Príklad reakcie na tieto udalosti je uvedený nižšie:

$(funkcia() ( $("#pretiahnuť").pretiahnuť(); $("#zahodiť").droppable(( upustiť: funkcia() ( $("#pretiahnuť").text("zahodiť") ) , aktivovať: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deaktivovať: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Spustiť príklad

Používajú sa tu rovnaké funkcie obsluhy ako v predchádzajúcom príklade, ale v tomto prípade sú spojené s udalosťami over a out. Keď sa aspoň 50 % plávajúceho prvku prekrýva s prijímacím prvkom, je orámovaný a jeho farba pozadia sa zmení, ako je znázornené na obrázku:

Tento 50% limit sa nazýva prah tolerancie, ktorý je možné nastaviť pri vytváraní prijímacieho prvku, ako bude uvedené ďalej.

Rozpustiteľné nastavenie interakcie

Interakcia Droppable má množstvo vlastností, ktoré môžete upraviť, aby ste si prispôsobili jej správanie. Tieto vlastnosti sú uvedené v tabuľke nižšie:

Zapustiteľné interakčné vlastnosti

Nehnuteľnosť	Popis
zdravotne postihnutých	Ak je táto možnosť pravdivá, funkcia interakcie s možnosťou pustenia je na začiatku zakázaná. Predvolená hodnota je nepravda
súhlasiť	Zužuje množinu plávajúcich prvkov, na ktoré bude prijímajúci prvok reagovať. Predvolená hodnota je *, zodpovedá ľubovoľnému prvku
activeClass	Definuje triedu, ktorá bude priradená v reakcii na udalosť activate a odstránená v reakcii na udalosť deactivate
hoverClass	Definuje triedu, ktorá bude priradená v reakcii na nadmernú udalosť a odstránená v reakcii na udalosť out.
tolerancie	Určuje minimálny stupeň prekrytia, pri ktorom dôjde k udalosti over

Obmedzenie povolených plávajúcich prvkov

Môžete obmedziť množinu pustiteľných prvkov, ktoré budú akceptované prvkom, ktorý má funkciu pustenia interoperability, pomocou možnosti prijať. Hodnota možnosti prijať by mala byť selektor. V dôsledku tejto udalosti sa interakcie s možnosťou pustenia vyskytnú iba vtedy, ak sa presúvaný prvok zhoduje so zadaným selektorom. Príslušný príklad je uvedený nižšie:

...

Spustiť príklad

V tomto príklade sú dva presúvateľné prvky s ID drag1 a drag2. Pri vytváraní akceptujúceho prvku sa používa možnosť accept, pomocou ktorej označujeme, že prijateľným plávajúcim prvkom bude iba prvok drag1.

Pri ťahaní prvku drag1 uvidíte rovnaký efekt ako v predchádzajúcich príkladoch. Vo vhodnom čase sa na prijímajúci prvok spustia udalosti aktivácie, deaktivácie, prepnutia a vypnutia. Zároveň, ak potiahnete prvok drag2, ktorý nezodpovedá selektoru uvedenému v parametri accept, tieto udalosti sa nespustia. Tento prvok sa môže voľne pohybovať, ale prijímací prvok ho neprijme.

Všimnite si zmenu v spôsobe výberu prijateľného plávajúceho prvku, na ktorom sa má volať metóda text(). Keď bol v dokumente iba jeden plávajúci prvok, stačil na to atribút id:

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

V tomto príklade sú dva plávajúce prvky a výber pomocou atribútu id neprinesie požadovaný výsledok, pretože text sa v tomto prípade vždy zmení v rovnakom plávajúcom prvku, bez ohľadu na to, ktorý z nich je pre prijímajúci prvok prijateľný.

Riešením je použiť objekt používateľského rozhrania, ktorý používateľské rozhranie jQuery poskytuje ako dodatočný argument pre každú obsluhu udalosti. Vlastnosť draggable objektu používateľského rozhrania vracia objekt jQuery obsahujúci prvok, ktorý používateľ preťahuje alebo sa pokúša umiestniť na cieľový prvok, čo umožňuje výber požadovaného prvku nasledovne:

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

Zmena prahu prekrytia

V predvolenom nastavení sa udalosť over spustí iba vtedy, keď aspoň 50 % presúvaného prvku prekrýva prijímajúci prvok. Veľkosť tohto prahového prekrytia je možné zmeniť pomocou možnosti tolerancie, ktorá môže nadobudnúť hodnoty uvedené v tabuľke nižšie:

Dve hodnoty, ktoré najčastejšie používam, fit a touch, sú tie, ktoré dávajú používateľom najväčší zmysel. Používam hodnotu prispôsobenia, keď by mal pretiahnutý prvok zostať v oblasti prijímacieho prvku, kde bol presunutý, a hodnotu dotyku, keď by sa mal pretiahnutý prvok vrátiť do pôvodnej polohy (príklad bude uvedený neskôr). Príklad použitia parametrov prispôsobenia a dotyku je uvedený nižšie:

Hodnota klonu hovorí jQuery UI, aby vytvorilo kópiu plávajúceho prvku spolu s celým jeho obsahom a použilo výsledok ako pomocný prvok. Výsledok je znázornený na obrázku:

Pomocný prvok sa odstráni, keď používateľ uvoľní tlačidlo myši nad presúvaným prvkom, čím sa posúvaný prvok a prijímajúci prvok ponechá v ich pôvodných polohách.

Ako je znázornené na obrázku, pôvodný plávajúci prvok zostáva na svojom mieste a iba pomocný prvok sa pohybuje po obrazovke podľa ukazovateľa myši. Ak je veľkosť presúvaného prvku veľká, ako v našom príklade, potom pokrýva zvyšok prvkov dokumentu, takže pre používateľa bude ťažké dokonca sledovať polohu prijímajúceho prvku. Tento problém možno vyriešiť poskytnutím funkcie ako hodnoty možnosti pomocníka, ako je znázornené v príklade nižšie:

... $(funkcia() ( $("div.draggable")..png"/>") ) )); $("#košík").droppable(( activeClass: "aktívny", hoverClass: "hover" )); )); ... Spustite príklad

Keď používateľ začne ťahať prvok, používateľské rozhranie jQuery zavolá funkciu, parameter pomocníka a používa vrátený prvok ako pohyblivý objekt. V tomto prípade používam jQuery na vytvorenie prvku img. Výsledok je znázornený na obrázku:

Malý obrázok funguje ako zástupný symbol pre plávajúci prvok, vďaka čomu je oveľa jednoduchšie sledovať ostatné prvky v dokumente.

Objekt používateľského rozhrania, ktorý používateľské rozhranie jQuery odovzdá udalostiam interakcie Droppable, obsahuje vlastnosť pomocníka a túto vlastnosť možno použiť na manipuláciu s prvkom pomocníka počas jeho presúvania. Príklad použitia tejto vlastnosti v spojení s udalosťami over and out je uvedený nižšie:

... $(funkcia() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(udalosť, ui) ( ui.helper.css("hranica", "") ) )); )); ...

Tu sa udalosti over a out a vlastnosť ui.helper používajú na zobrazenie okraja okolo pomocného prvku, keď sa prekrýva s hostiteľským prvkom. Výsledok je znázornený na obrázku:

Prichytenie k okrajom prvkov

Cez možnosti prichytenia je možné dosiahnuť, že sa posúvaný prvok „pritiahne“ k okrajom prvkov, popri ktorých prechádza. Táto možnosť má ako hodnotu selektor. Plávajúci prvok sa prichytí k okrajom akéhokoľvek prvku, ktorý zodpovedá zadanému selektoru. Príklad použitia možnosti snap je uvedený nižšie:

Spustiť príklad

Keď sa pohyblivý prvok priblíži k jednému zo združených prvkov, je k nemu akýmsi „pritiahnutím“ takým spôsobom, že sa ich susedné okraje dotýkajú. Pre takúto väzbu môžete vybrať ľubovoľný prvok, nielen prijímací. V tomto príklade som pridal prvok div a nastavil možnosť prichytenia na hodnotu, ktorá vyberie tento prvok v dokumente, ako aj prijímajúci prvok.

Existuje niekoľko podmožností, ktoré vám umožňujú doladiť, ako sa prvky správajú s ohľadom na ukotvenie. Jedným z nich je možnosť snapMode. Môže sa použiť na určenie typu väzby. Povolené sú nasledujúce hodnoty: vnútorné(prichytenie k vnútorným okrajom prvkov), vonkajšie(prichytenie k vonkajším okrajom prvkov) a oboje(prichytiť ku všetkým okrajom; predvolené).

možnosť snapTolerance umožňuje určiť, ako ďaleko sa musí plávajúci prvok priblížiť k okraju cieľového prvku, kým dôjde k prichyteniu. Predvolená hodnota je 20, čo znamená 20 pixelov. V príklade je použitá hodnota 50, ktorá zodpovedá kotve vo väčšej vzdialenosti. Je veľmi dôležité zvoliť správnu hodnotu pre túto možnosť. Ak je hodnota možnosti snapTolerance príliš nízka, používateľ si nemusí všimnúť efekt prichytenia a ak je príliš vysoká, presúvaný prvok začne neočakávane skákať a prichytávať sa k ďaleko vzdialeným prvkom.

Pre knižnicu VCL spoločnosť Borland implementovala vlastnú verziu rozhrania Drag&Drop (v preklade „drag“). Toto rozhranie je interné - vo formulári môžete odosielať a prijímať akékoľvek ovládacie prvky Delphi "(okrem samotného formulára). Je implementované bez použitia zodpovedajúcich funkcií Windows API - musia byť použité pri organizovaní komunikácie s inými úlohami pretiahnutím myšou .

Stlačením ľavého tlačidla myši nad ovládacím prvkom ho môžeme „pretiahnuť“ na akýkoľvek iný prvok. Z pohľadu programátora to znamená, že v momentoch ťahania a púšťania kľúča sa generujú určité udalosti, ktoré prenesú všetky potrebné informácie - ukazovateľ na ťahaný objekt, aktuálne súradnice kurzora atď. Prijímačom udalosti je prvok na ktorom sa tento moment kurzor sa nachádza. Obsluha takejto udalosti musí systému povedať, či daný ovládací prvok akceptuje "odoslanie" alebo nie. Po uvoľnení tlačidla nad ovládačom prijímača sa spustí jedna alebo dve ďalšie udalosti v závislosti od pripravenosti prijímača.

ZrušiťPretiahnutie Zruší aktuálnu operáciu presunutia myšou alebo presunutia a ukotvenia.

Funkcia FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

Funkcia vracia objekt základnej triedy TControl , ktorá sa vzťahuje na polohu obrazovky so súradnicami určenými parametrom Pos. Táto funkcia sa používa na určenie potenciálneho príjemcu operácie drag-and-drop alebo drag-and-dock. Ak pre zadanú pozíciu neexistuje žiadny ovládací prvok okna, funkcia sa vráti nula . Parameter AllowDisabled určuje, či sa budú brať do úvahy zakázané objekty.

Funkcia IsDragObject(Sender: TObject ): Boolean ;

Funkcia určuje, či je objekt zadaný v parametri Sender potomkom triedy TDragObject . Táto funkcia možno použiť ako parameter Source v obslužných programoch udalostí OnDragOver a OnDockOver na určenie, či bude ťahaný objekt prijatý. Tiež funkcia IsDragObjectmožno použiť ako parameter Source v obslužných programoch udalostí OnDragDrop a OnDockDrop, aby sa správne interpretoval pretiahnutý objekt.

DragMode, vlastnosti DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metódy, Accept parameter

Proces presúvania informácií z jedného objektu na druhý pomocou myši je vo Widows široko používaný. Môžete presúvať súbory medzi priečinkami, presúvať samotné priečinky a podobne.

Všetky vlastnosti, metódy a udalosti spojené s procesom drag and drop sú definované v triede TControl, ktorá je rodičom všetkých vizuálnych komponentov Delphi. Preto sú spoločné pre všetky komponenty.

Začiatok ťahania je určený vlastnosťou DragMode, ktorú je možné nastaviť v čase návrhu alebo programovo rovnú dmManual alebo dmAutomatic. Hodnota dmAutomatic (automatic) určuje automatické spustenie procesu ťahania, keď používateľ klikne tlačidlom myši na komponent. V tomto prípade sa však udalosť OnMouseDown spojená so stlačením tlačidla myši používateľom pre tento komponent vôbec nevyskytuje.

Rozhranie na prenos a príjem komponentov sa objavilo už dávno. Poskytuje interakciu medzi dvoma ovládacími prvkami počas vykonávania aplikácie. V tomto prípade je možné vykonať všetky potrebné operácie. Napriek jednoduchosti implementácie a veku vývoja mnohí programátori (najmä začiatočníci) považujú tento mechanizmus za nejasný a exotický. Použitie funkcie Drag-and-Drop však môže byť veľmi užitočné a ľahko implementovateľné. Teraz si to overíme.

Aby mechanizmus fungoval, musia byť príslušne nakonfigurované dva ovládacie prvky. Jeden musí byť zdroj (Zdroj), druhý - prijímač (Cieľ). V tomto prípade sa zdroj nikam neposúva, ale je len ako taký zaregistrovaný v mechanizme.

Verte mi, je dosť ľahké premeniť sa X,Y súradnice, odovzdané v parametroch udalostí OnDragOver a OnDragDrop, do súradníc formulára.

Pracujte s vlastnosťami Left a Top komponentu, nad ktorým sa pohybuje kurzor. Uvediem jednoduchý príklad. Umiestnite komponent Memo na formulár a nastavte jeho vlastnosť Align na alTop. Umiestnite panel na formulár, tiež nastavte vlastnosť Align na alTop a nastavte vlastnosť Height na malú hodnotu, povedzme 6 alebo 7 pixelov. Nastavte DragMode na dmAutomatica a DragCursor na crVSplit. Umiestnite ďalší komponent Memo a nastavte Align na alClient. Vyberte oba poznámky súčasne, panel a vytvorte spoločnú obsluhu udalosti OnDragOver, ako je znázornené nižšie:

Nedávno som dostal nápad vyvinúť hru pre Android. Na začiatok som sa rozhodol písať šach. Myslel som technológiu Drag and Drop ideálne na implementáciu mechanizmu pre pohyb tvarov. Pre neznalých podotýkam metóda drag and drop je v možnosti pretiahnuť niektoré grafické objekty na iné a po uvoľnení vykonať jednu alebo druhú akciu. Najjednoduchší príklad- odstráňte odkaz z pracovnej plochy počítača presunutím do koša. „Vhodením“ štítku do koša hovoríme systému, že chceme, aby tieto dva objekty interagovali. Systém prijme náš signál a rozhodne, akú akciu má vykonať. Drag and drop sa rozšírilo vďaka svojej intuitívnej prehľadnosti. Tento prístup je podporený našimi skúsenosťami s interakciou s objektmi skutočného sveta a funguje skvele vo virtuálnom prostredí. Čo sa týka šachu, pomocou drag and drop je technologicky jednoduchšie určiť bunku, kam používateľ ťahal figúrku, keďže nie je potrebné počítať číslo bunky zo súradníc bodu dropu. Túto prácu prevezme virtuálny stroj.

Účely použitia technológie Drag n Drop

Používanie technológie drag and drop mi umožňuje vyriešiť tri problémy s malým množstvom krvi:

1. Vizualizácia pohybu. Keď sa používateľ dotkne tvaru a začne ním pohybovať po obrazovke, tvar sa nahradí menšou kresbou. Používateľ teda chápe, že obrázok je zachytený.
2. Oblasť pohybu figúry som obmedzil na rozmery dosky.
3. Ak používateľ uvoľní tvar na nesprávnom mieste, mal by sa vrátiť do pôvodnej polohy.

Úlohy sú definované, začnime s ich realizáciou.

Nahraďte ImageView dotykom

Všetky moje tvary sú objekty ImageView. Žiaľ, ukázalo sa, že implementácia Drag & Drop v systéme Android neumožňuje „hneď po vybalení“ nahradiť obrázok objektu, keď sa ho dotknete. Napriek tomu je táto úloha celkom riešiteľná pomocou API. Musíme vykonať niekoľko jednoduchých krokov:

1. Vytvorte objekt DragShadowBuilder.
2. Zavolajte metódu startDrag.
3. Skryte náš ImageView, ktorý zobrazuje tvar, volaním metódy setVisibility s parametrom View.INVISIBLE. Výsledkom je, že na obrazovke zostane iba objekt DragShadowBuilder, ktorý bude používateľovi signalizovať, že tvar bol zachytený.

Tieto akcie musia byť implementované v obslužnom programe OnTouchListner objektu ImageView. Aby sme to dosiahli, prepíšeme metódu onTouch:

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

Všetko je veľmi jednoduché. Takže, keď je nahradenie obrázka vyriešené, prejdime k ďalšej úlohe.

Obmedzenie oblasti ťahania pre funkciu ťahania

Obmedzenie oblasti ťahania súvisí s jedným problémom. Faktom je, že ak uvoľníte tvar mimo dosky, udalosť drop nenastane, pretože používateľ pustil objekt na prázdne miesto a objekt nemá s čím interagovať. Vďaka tomu sa figúrka nevráti do pôvodného stavu a zostane navždy skrytá. Strávil som veľa času čítaním dokumentácie, ale nenašiel som spôsob, ako obmedziť oblasť ťahania objektov. Odhalenie prišlo náhle. Vôbec nepotrebujem obmedzovať plochu, potrebujem vedieť, či používateľ pustil figúrku správne alebo nie.

Určenie správneho uvoľnenia
Odpovede na moje otázky som našiel v sekcii „spracovanie udalostí ukončenia ťahaním“ na stránke Android Developers. Tu je niekoľko kľúčových bodov:

1. Keď používateľ dokončí ťahanie, v obslužnom programe DragListeners sa spustí udalosť ACTION_DRAG_ENDED.
2. V DragListener môžete získať podrobnejšie informácie o operácii ťahania volaním metódy DragEvent.getResult().
3. Ak DragListener vráti hodnotu true ako odpoveď na udalosť ACTION_DROP, volanie getResult tiež vráti hodnotu true, inak vráti hodnotu false.

Potrebujem teda zachytiť udalosť ACTION_DRAG_ENDED a zavolať metódu getResult. Ak vráti hodnotu false, používateľ pretiahol tvar z dosky a musím zviditeľniť ImageView.

@Override public boolean onDrag(Zobrazenie zobrazenia, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (Zobrazenie) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( obsahujeDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( obsahujeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) if ( ) ) else = DragEvent. ACTION_DROP& amp;& amp; obsahuje Dragable) ( checkForValidMove((ChessBoardSquareLayoutView) zobrazenie, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DultragEvent dragEvent! dragEvent ) ;)

Teraz môže používateľ pustiť postavu kdekoľvek a nič strašné sa nestane.

Stanovenie povolených ťahov

Posledná časť článku je venovaná kontrole platnosti ťahu, o ktorý sa používateľ pokúša. Pred podrobnou diskusiou o tejto téme urobím malú poznámku vysvetľujúcu štruktúru mojej aplikácie. Šachovnica je reprezentovaná ako TableLayout a každá bunka je potomkom LinearLayout a má OnDragListener.

Každý OnDragListener navyše odkazuje na objekt „mediátora“, ktorý sa stará o interakciu herných objektov a pamätá si polohu aktuálnej bunky.

Keď používateľ potiahne tvar cez bunku, sú možné nasledujúce akcie:

1. Pomocou udalosti ACTION_DRAG_ENTERED nastavte premennú 'containsDraggable' na hodnotu true.
2. Pomocou udalosti ACTION_DRAG_EXITED nastavte premennú 'containsDraggable' na hodnotu false.
3. Použitie udalosti ACTION_DROP na dotaz na middleware, či je povolené umiestniť tvar do tejto bunky.

Nižšie je uvedený kód, ktorý implementuje opísanú logiku

@Override public boolean onDrag(Zobrazenie zobrazenia, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (Zobrazenie) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( obsahujeDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( obsahujeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) if ( ) ) else = DragEvent.ACTION_DROP& amp;& amp; obsahuje Dragable) ( checkForValidMove((ChessBoardSquareLayoutView) zobrazenie, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Ako vidíte, bez ohľadu na to, či je presun platný alebo nie, ImageView je nastavený na viditeľný stav. Chcel som, aby používateľ videl pohyb tvaru. Už som spomenul, že bunka je potomkom LayoutView. Toto sa robí, aby sa uľahčilo presúvanie ImageView z bunky do bunky. Nižšie je uvedený kód pre metódu checkForValidMove, ktorá ukazuje, ako sa ImageView presúva.

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

Dúfam, že vám tento článok pomôže pri vytváraní vlastných projektov.