Vytvorte jednoduché rozhranie HTML5 drag & drop. Drag-and-drop: spôsob ovládania prvkov používateľského rozhrania Čo je to drag and drop

Techniky drag-and-drop sa v priebehu rokov vyvinuli. Nie je prekvapením, že s rastúcim počtom programátorov vyvíjajúcich open source pluginy (napríklad pre jQuery) opäť ožívajú staré metódy. Knižnica JavaScript je vysoko citlivá a ponúka mnoho vylepšení v tomto veku webových technológií.

V tomto návode vytvoríme skript, ktorý možno použiť na vytváranie dynamických obdĺžnikov presúvania myšou na vašej webovej lokalite. Proces riadi jQuery. Takéto skripty šetria čas poskytovaním hotových funkcií! A knižnicu drag-and-drop možno použiť v iných projektoch.

Príprava obsahu

V prvom rade pripravíme projektu malú webstránku. V priečinku projektu musíte vytvoriť dva adresáre s pozoruhodnými názvami "js" a "css" a prázdny súbor index.html ... Kód bude veľmi jednoduchý, aby ste mali jasnú predstavu o práci a je tu bod pre ďalší vývoj.

Nižšie je uvedený kód pre náš súbor HTML. V kapitole hlavu zahŕňame 3 skripty. Hlavný skript jQuery sa načíta zo servera Google Code. súčasťou je aj náš súbor style.css, ktorý obsahuje hlavné vlastnosti na tvarovanie vzhľadu nášho dokumentu.

Vo vnútri sekcie telo sú umiestnené iba dva bloky div ktoré obsahujú oba obdĺžniky. Kód je pomerne jednoduchý a priamočiary. Hlavičky s triedami sú umiestnené vo vnútri každého obdĺžnika. psovod a handler2... Je to dôležité, pretože každý obdĺžnik sa pri ťahaní správa inak.

Inštalácia CSS

HTML kód je veľmi jednoduchý. Ak rozumiete základnému značeniu, potom by nemal byť zložitý ani štýl CSS. V podstate definujete okraje, výplň a farby.

Telo, html (rodina písma: Calibri, bezpätkové; pozadie: # eaf3fb; veľkosť písma: 12px; výška: 1000px; výška riadku: 18px;) p (výška: 30px;)

Selektory telo, html sa používajú iba pre ukážkovú stránku. A všetok obsah je umiestnený v dvoch obdĺžnikoch s myšou.

Dv1 (šírka: 200px; farba pozadia: # eff7ff; okraj: 1px plný # 96c2f1; pozícia: absolútna; vľavo: 100px; hore: 100px;) .dv1 h2 (farba pozadia: # b2d3f5; výplň: 5px; font- rodina: Georgia, "Times New Roman", Times, serif; veľkosť písma: 1,0 em; transformácia textu: veľké písmená; hrúbka písma: tučné; farba: # 3a424a; okraj: 1px; kurzor: pohyb;) .dv1 div (padding: 5px; margin-bottom: 10px;) .dv2 (background-color: # f6ebfb; border: 1px solid # a36fde; width: 550px; position: absolute; kurzor: move; left: 400px; top: 230px;) .dv2 h2 (farba pozadia: # eacfe9; medzera medzi písmenami: -0,09 em; veľkosť písma: 1,8 em; váha písma: tučné; výplň: 15 pixelov; okraj: 1 pixel; farba: # 241f24; kurzor: pohyb;) .dv2 .content2 (odsadenie: 5 pixelov; okraj-dolný okraj: 10 pixelov;)

Pre obe triedy dv1 a dv2 používame absolútne umiestnenie. Je to zbytočné a pravdepodobne to nie je najlepší spôsob umiestnenia pretiahnutých obdĺžnikov. V našom príklade však takéto umiestnenie dáva zmysel, keďže pri každom obnovení stránky sú obdĺžniky nastavené na určité miesta.

Písma a farby sú tiež odlišné pre obdĺžniky, aby bolo lepšie vidieť rozdiel.

Inak sú názvy a obsah blokov takmer totožné. Ak budete kopírovať štýly do svojho projektu, pred začatím zmeňte názvy. V niektorých prípadoch bude logickejšie použiť namiesto tried ID, napríklad pri použití techniky „drag and drop“ pre jeden konkrétny blok.

Analyzujte JavaScript

Dva súbory JavaScript obsahujú všetok kód, ktorý potrebujete na spustenie. Preskočme detaily práce s jQuery, pretože to presahuje rámec tohto návodu. Venujme pozornosť súboru jquery.dragndrop.js.

Riadok 22 definuje funkciu Ťahá.

$ .fn.Drags = funkcia (opts) (var ps = $ .extend ((zIndex: 20, nepriehľadnosť: 0,7, handler: null, onMove: function () (), onDrop: funkcia () ()), opts );

Tu sa nastavuje návratová premenná a inicializačné údaje Ťahá... Táto technika sa veľmi bežne používa pri práci s jQuery na odovzdávanie možností iným funkciám. Interne nastavíme premenné pre všetky dostupné možnosti pre ťahané obdĺžniky.

Ďalšia časť kódu obsahuje obsluhu udalostí pre premennú dragndrop... Obe udalosti ťahať a pokles volania funkcií s odovzdaním parametrov udalostí im. Tieto udalosti sa vyskytujú, keď stlačíte tlačidlo myši, aby ste potiahli objekt a potom ho uvoľnili.

Var dragndrop = (pretiahnuť: funkcia (e) (var dragData = e.data.dragData; dragData.target.css ((vľavo: dragData.left + e.pageX - dragData.offLeft, hore: dragData.top + e.pageY) - dragData.offTop)); dragData.handler.css ((kurzor: "presunúť")); dragData.target.css ((kurzor: "presunúť")); dragData.onMove (e);), drop: function ( e) (var dragData = e.data.dragData; dragData.target.css (dragData.oldCss); //. css (("opacity": "")); dragData.handler.css ("kurzor", dragData. oldCss.cursor); dragData.onDrop (e); $ (). unbind ("mousemove", dragndrop.drag) .unbind ("mouseup", dragndrop.drop);))

Naše funkcie manipulujú s umiestnením CSS každého objektu. Zmena absolútneho umiestnenia vašich objektov neovplyvní fungovanie vášho kódu, pretože každá funkcia JavaScript mení akýkoľvek štýl definovaný pre objekt.

Zvyšok kódu kontroluje handler a robí kozmetické zmeny v iných štýloch. Tu môžete pridať zmeny priehľadnosti, písma a farby alebo pridať nové odseky.

Funkcie Drag / Drop

Druhý súbor, fn.js, obsahuje veľmi jednoduchý kód. Čakáme, kým sa dokument úplne nenačíta, potom zavoláme naše funkcie. Sú definované dve inštancie funkcie Ťahá, o ktorom sa hovorilo už skôr.

Máme dva plávajúce bloky s triedami dv1 a dv2. Ak potrebujete nechať jeden pohyblivý blok, potom stačí vymazať druhú časť kódu. Pridanie ďalšieho pohyblivého bloku je tiež jednoduché. Do tohto súboru stačí pridať novú funkciu.

Prvým krokom je nastavenie možností pri volaní funkcie. Je nevyhnutné nastaviť meno psovoda. Používame ho na to, aby sme jQuery povedali, ktorý handler má použiť, keď sa stlačí tlačidlo myši v určitej oblasti dokumentu. Názov obslužného programu môže byť trieda alebo atribút ID.

Naša prvá funkcia má dve obsluhy udalostí onMove a onDrop... Obidve volajú nové funkcie, ktoré sú odovzdané aktuálnej udalosti ako premenné. Tým sa manipuluje s kódom HTML v obdĺžniku, aby sa aktualizoval pri každom pohybe. Je to skvelý efekt na demonštráciu toho, ako môžete riadiť proces pomocou jednoduchých udalostí jQuery.

V druhej funkcii používame parametre z-Index a opacity. Môžem pridať aj ďalšie vlastnosti CSS? to by si však vyžadovalo prepracovanie JavaScriptu na overenie inštalácií. Môžete napríklad zadať iný štýl písma alebo hodnoty pre výšku a šírku pre presunutý obdĺžnik - veľmi zaujímavý trik!

Záver

S trochou práce máme k dispozícii skvelé rozhranie na presúvanie myšou. jQuery poskytuje obrovské výhody pre vývojárov, ktorí chcú vo svojich projektoch používať staré techniky.

Výsledkom je, že sme získali nielen funkcie obsluhy udalostí, ale do ťahaných blokov môžeme odovzdať aj nové premenné. To otvára nové možnosti pre kreativitu. Ukážka k lekcii obsahuje iba náčrt toho, čo sa dá pomocou takéhoto kódu urobiť.

Pozrite si dokumentáciu jQuery na používanie funkcií knižnice.

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

Môžete teda 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 zálohovať konkrétne 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. Potiahnite položku na požadované miesto v tejto aplikácii alebo inej aplikácii, ktorú ste otvorili v režime „Presunutie“ alebo „Rozdelené zobrazenie“, 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 položkami, koľko chcete presunúť.

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

Ako pretiahnuť text z jednej aplikácie do druhej

1. Dotknite sa a podržte časť textu, ktorú chcete pretiahnuť, aby ste ju vybrali.

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

3. Stlačte a podržte zvýraznený text.

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

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

Zatiaľ čo väčšina funkcií drag-and-drop v systéme iOS funguje iba na iPade, tento trik v skutočnosti funguje na iPhone aj iPade. To vám umožní organizovať usporiadanie aplikácií na vašej domovskej obrazovke pomocou « Drag and Drop “namiesto ich presúvania po jednom.

1. Stlačte a podržte ikonu aplikácie, ktorú chcete premiestniť na domovskej obrazovke.

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 uvoľnite ich.

Nedávno som dostal nápad začať vyvíjať hru pre Android. Na začiatok som sa rozhodol písať šach. Zdalo sa mi to technológiou Drag and drop ideálne na implementáciu mechanizmu na pohyb tvarov. Pre neznalých podotýkam metóda drag and drop je v schopnosti pretiahnuť niektoré grafické objekty na iné a po uvoľnení vykonať akciu. Najjednoduchším príkladom je odstránenie odkazu z pracovnej plochy počítača presunutím do koša. „Vhodením“ skratky do odpadkového koša hovoríme systému, že chceme prinútiť tieto dva objekty k interakcii. Systém prijme náš signál a rozhodne, akú akciu podnikne. Drag and drop sa rozšírilo vďaka svojej intuitívnej prehľadnosti. Tento prístup je podporený našimi skúsenosťami s objektmi reálneho 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 podľa súradníc bodu dropu. Túto prácu prevezme virtuálny stroj.

Účel 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 kurzu. Keď používateľ klepne na tvar 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 tvaru som obmedzil na veľkosť dosky.
3. Ak používateľ uvoľnil tvar na nesprávnom mieste, mal by sa vrátiť do pôvodnej polohy.

Úlohy sú načrtnuté, poďme sa pustiť do ich realizácie.

Vymeňte ImageView na dotyk

Všetky moje tvary sú objekty ImageView. Bohužiaľ sa ukázalo, že implementácia Drag & Drop v systéme Android neumožňuje „out of the box“ 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 signalizovať používateľovi, aby chytil tvar.

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

@ Prepísať verejnú booleovskú hodnotu onTouch (zobrazenie View, MotionEvent motionEvent) (if (motionEvent. GetAction () == MotionEvent. ACTION_DOWN) (ClipData clipData = ClipData. NewPlainText ("", ""); View. DragShadowBuilder dsb = nové zobrazenie. DragShadowBuilder (view); view. startDrag (clipData, dsb, view, 0); view. setVisibility (View. INVISIBLE); return true;) else (return false;))

Všetko je veľmi jednoduché. Takže sme prišli na náhradu obrázka, prejdime k ďalšej úlohe.

Obmedzenie oblasti ťahania pre funkciu ťahania

Existuje jeden problém s obmedzením oblasti ťahu. Ide o to, že ak pustíte tvar mimo nástenku, udalosť drop nenastane, pretože používateľ pustil objekt od nuly 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, no stále som nenašiel spôsob, ako obmedziť rozsah ťahania objektov. Inšpirácia prišla náhle. Vôbec nepotrebujem obmedzovať oblasť, potrebujem vedieť, či používateľ uvoľnil tvar 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, v opačnom prípade false.

Preto potrebujem zachytiť udalosť ACTION_DRAG_ENDED a zavolať metódu getResult. Ak vráti hodnotu false, používateľ pretiahol tvar z dosky a musím prepnúť ImageView do viditeľného režimu.

@ Override public boolean onDrag (Zobrazenie zobrazenia, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); View dragView = (View) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (containsDragable = false;) else if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (containsDragable = true;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);))) else if (dragAction) = DragEvent. ACTION_DROP & amp; & amp; obsahuje Dragable) (checkForValidMove ((ChessBoardSquareLayoutView) zobrazenie, dragView); dragView. SetVisibility (View. VISIBLE);) return true;) private boolean dropEventNotHandled (DragEvent dragEvent) (návrat! DragR )

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

Stanovenie prípustných pohybov

Posledná časť článku je venovaná kontrole platnosti ťahu, o ktorý sa používateľ pokúša. Predtým, ako začnem podrobne diskutovať 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ľ pretiahne kus cez klietku, 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. Pomocou udalosti ACTION_DROP sa spýtate makléra, či je dovolené umiestniť figúrku 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 = (View) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (containsDragable = false;) else if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (containsDragable = true;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);))) else if (dragAction) = DragEvent. ACTION_DROP & amp; & amp; obsahuje Dragable) (checkForValidMove (zobrazenie (ChessBoardSquareLayoutView), dragView); dragView. SetVisibility (View. VISIBLE);) return true;)

Ako vidíte, bez ohľadu na to, či je presun legálny 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 pohybuje.

private void checkForValidMove (ChessBoardSquareLayoutView view, View dragView) (if (mediátor. isValidMove (view)) (ViewGroup owner = (ViewGroup) dragView. getParent (); vlastník. removeView (dragView); view. addView (dragView); view. setGravity (Gravitation. CENTER); view. ShowAsLanded (); mediátor. HandleMove (view);))

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

182

V tomto príklade vyberieme prvok div a pomocou volania ho sprístupníme ťahateľná () metóda... Ako je znázornené na obrázku nižšie, prvok v otvorenom dokumente zaujme svoju normálnu polohu, 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, no ešte užitočnejšia je, keď sa používa v spojení s interakciou s možnosťou pustenia, ktorá je popísaná nižšie.

Interakcia Draggable sa implementuje výlučne pomocou špecifických značiek HTML a štýlov CSS. To znamená, že táto funkcionalita bude fungovať takmer v akomkoľvek prehliadači, ale prvky, ktoré sú ňou vybavené, nebudú schopné pracovať s podobnými natívnymi nástrojmi operačných systémov drag-and-drop.

Operácie drag-and-drop definované špecifikáciou HTML5 sa zvyčajne implementujú pomocou natívnych mechanizmov operačných systémov. Ak používate mechanizmus Drag-and-drop používateľského rozhrania jQuery, je najlepšie vypnúť ekvivalenty HTML5, aby ste sa vyhli konfliktom. Na tento účel nastavte atribút draggable prvku tela dokumentu na hodnotu false.

Konfigurácia preťahovateľnej interakcie

Existuje veľa možností prispôsobenia interakcie s možnosťou presúvania. Najdôležitejšie vlastnosti, o ktorých sa hovorí 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 do konkrétnych smerov. Predvolená hodnota je false, čo znamená, že neexistujú žiadne obmedzenia, ale môžete zadať aj hodnotu „x“ (pohyb iba pozdĺž osi X) alebo „y“ (pohyb iba pozdĺž osi Y)
zadržiavanie	Obmedzí polohu plávajúceho prvku na konkrétnu oblasť obrazovky. Typy podporovaných hodnôt sú popísané v tabuľke nižšie na príslušnom príklade. Predvolená hodnota je false, čo znamená žiadne obmedzenia
meškanie	Určuje, ako dlho sa musí prvok ťahať, kým sa pohne. 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 posunie. Predvolená hodnota je 1 pixel
mriežka	Vynúti prichytenie presunutého prvku k bunkám mriežky. Predvolená hodnota je false, čo znamená žiadnu väzbu

Obmedzujúce smery pohybu

Existuje niekoľko spôsobov, ako môžete obmedziť pohyb prvku do konkrétnych smerov. Prvým je použitie možnosti osi na obmedzenie smeru pohybu na os X alebo Y. Príklad je uvedený nižšie:

...

Spustiť príklad

V tomto príklade definujeme dva divy, vyberieme ich pomocou jQuery a zavoláme metódu draggable (). Objekt je odovzdaný tejto metóde ako argument, ktorý spočiatku obmedzuje pohyb oboch divov v smere pozdĺž osi X. Potom použitím metódy jQuery filter () sme schopní vybrať prvok dragV bez toho, aby jQuery znova hľadal dokument a nastavíme ho na iný povolený smer pohybu – po osi Y, čím získame dokument, v ktorom je možné jeden div ťahať iba vertikálne a druhý iba horizontálne. Výsledok je znázornený na obrázku:

Obmedzenie rozsahu pohybu prvku

Môžete tiež obmedziť oblasť obrazovky, do ktorej je možné položku presunúť. Na to sa používa možnosť kontajnmentu. 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 je pohyb oboch prvkov obmedzený, takže ich možno presúvať iba v rámci nadradeného prvku, ktorým je prvok div s pevnou veľkosťou. Jedno z divov, ktoré sa vznášajú pomocou možnosti osi, má ďalšie obmedzenie, že sa môže pohybovať iba horizontálne v rámci svojho rodiča. Výsledok je znázornený na obrázku:

Obmedzenie schopnosti položky presunúť sa do buniek mriežky

Možnosť mriežky vám umožňuje nastaviť ukotvenie plávajúcej položky k bunkám mriežky. Táto možnosť berie ako hodnotu pole dvoch prvkov, ktoré definujú šírku a výšku buniek mriežky v pixeloch. Príklad použitia možnosti mriežky je uvedený nižšie:

...

Spustiť príklad

Tento príklad má mriežku s bunkami širokými 100 pixelov a výškou 50 pixelov. Keď potiahnete položku, „skočí“ z jednej (neviditeľnej) bunky do druhej. Efekt prichytenia je veľmi dobrým príkladom využitia interakčnej funkcionality, ale je ťažké ho sprostredkovať 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 hodnotu, položka sa pri horizontálnom pohybe prichytí k bunkám mriežky so šírkou 100 pixelov, ale môže sa voľne pohybovať vertikálne.

Oneskorenie presunu

Existujú dve možnosti, ktoré vám umožňujú oneskoriť ťahanie presúvanej položky. Možnosť oneskorenia sa dá použiť na nastavenie času v milisekundách, ktorý musí používateľ potiahnuť myšou, 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 nasleduje prvok.

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

...

Spustiť príklad

V tomto príklade sú dva pohyblivé prvky, z ktorých jeden má oneskorenie špecifikované pomocou možnosti oneskorenia a druhý pomocou možnosti vzdialenosti.

V prípade oneskorenia určeného voľbou oneskorenia musí používateľ ťahať určitý čas, kým prvok skutočne presunie. V tomto príklade je trvanie tohto intervalu 1000 ms. V tomto momente nie je vôbec potrebné hýbať myšou, ale počas celej doby oneskorenia musí zostať tlačidlo myši stlačené, potom je možné pohybovať prvkom pohybom myši. Keď uplynie čas zotrvania, presúvaná položka sa 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. Potom presúvaná položka preskočí na aktuálne umiestnenie ukazovateľa.

Ak použijete obe nastavenia na rovnaký prvok, presunutý prvok sa nepohne, kým nie sú splnené obe kritériá oneskorenia, t.j. kým sa nevykoná pokus o pretiahnutie prvku na 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 interakcie Draggable sú súčasťou základnej sady metód, ktoré ste už videli pri prezeraní widgetov. Metódy špecifické pre interakciu Draggable nie sú k dispozícii, takže sa im nebudeme podrobne venovať. 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é vás upozornia na potiahnutie položky. Tieto udalosti sú popísané v tabuľke nižšie:

Rovnako ako pri udalostiach miniaplikácií, aj na tieto udalosti môžete reagovať. Príklad spracovania udalostí spustenia a zastavenia je uvedený nižšie:

...

Spustiť príklad

Tento príklad používa udalosti spustenia a zastavenia na zmenu textového obsahu prvku počas jeho presúvania. Táto príležitosť je spôsobená skutočnosťou, ž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 droppable interakcie

V niektorých situáciách môže postačovať samotná schopnosť pretiahnuť prvok, ale najužitočnejšia je v spojení s interakciou s možnosťou pustenia.

Položky, pri ktorých bola použitá interakcia s možnosťou pustenia (prijímanie položiek), získavajú schopnosť prijímať plávajúce položky vytvorené interakciou s možnosťou presúvania.

Prijímacie položky sa vytvárajú pomocou 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 typ 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úcu položku
deaktivovať	Vyskytuje sa, keď používateľ prestane presúvať plávajúcu položku
cez	Vyskytuje sa, keď používateľ pretiahne plávajúci prvok cez prijímajúci prvok (ale za predpokladu, že myš ešte nebola uvoľnená)
von	Vyskytuje sa, keď používateľ potiahne plávajúci prvok mimo prijímajúceho prvku
pokles	Vyskytuje sa, keď používateľ zanechá plavák na prijímacom prvku

Nižšie je uvedený príklad vytvorenia jednoduchého prijímacieho prvku s obsluhou udalosti jednej kvapky:

...

Spustiť príklad

Tento príklad pridá do dokumentu prvok div s textovým obsahom reprezentovaným reťazcom „Leave here“. 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 ().

Interakcia drag-and-drop, ktorú vytvoríme v tomto príklade, je veľmi základná, ale poskytuje pohodlný kontext na vysvetlenie toho, ako môžu interakcie s možnosťou presúvania a presúvania spolupracovať. Rôzne fázy procesu drag-and-drop sú znázornené na obrázku:

Všetko to vyzerá veľmi jednoducho. Potiahneme plávajúci prvok, kým nie je nad prijímacím prvkom a uvoľníme ho. Zahodená položka zostane tam, kde bola vypustená, a jej textový obsah sa zmení v reakcii na udalosť upustenia. Nasledujúce časti ukazujú, ako používať ďalšie udalosti interakcie s možnosťou droppable na zlepšenie používateľského zážitku.

Zvýraznenie cieľového prijímajúceho objektu

Pomocou udalostí aktivácie a deaktivácie môžete zvýrazniť cieľový prijímajúci objekt, keď používateľ začne proces presúvania. 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. Relevantný príklad je uvedený nižšie:

... $ (funkcia () ($ ("# pretiahnuteľné"). pretiahnuteľné (); $ ("# pustiteľné"). pustiteľné ((drop: funkcia () ($ ("# pretiahnuteľné")). text ("Doľava ")), aktivovať: function () ($ (" # droppable "). css ((okraj:" medium double green ", backgroundColor:" lightGreen "));), deaktivovať: function () ($ (" # droppable" ") .css (" orámovanie "," ") .css (" farba pozadia ",");)));)); ... Spustiť príklad

Hneď ako používateľ začne ťahať prvok, spustí sa udalosť activate – spojená s naším prijímajúcim prvkom – a funkcia handlera použije metódu css () na zmenu vlastností ohraničenia prvku a farby pozadia CSS. V dôsledku toho je cieľový prijímací prvok zvýraznený, čo používateľovi naznačuje, že medzi ním a pohyblivým prvkom existuje vzťah.

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

Manipulácia s prekrývajúcimi sa prvkami

Presúvanie a presúvanie je možné vylepšiť pridaním manipulácie s udalosťami. Udalosť over nastane, keď je 50 % plávajúceho prvku nad akoukoľvek časťou prijímacieho prvku. Udalosť out nastane, keď sa predtým prekrývajúce sa prvky už neprekrývajú. Príklad reakcie na tieto udalosti je uvedený nižšie:

$ (funkcia () ($ ("# pretiahnuteľné"). pretiahnuteľné (); $ ("# pustiteľné"). pustiteľné ((drop: funkcia () ($ ("# pretiahnuteľné"). text ("Spustené")) , aktivovať: function () ($ ("# droppable"). css ((ohraničenie: "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, tento sa orámuje a farba jeho pozadia sa zmení, ako je znázornené:

Uvedená hranica 50 % sa nazýva prah tolerancie, ktorý je možné nastaviť pri vytváraní prijímacieho prvku, ako je znázornené nižšie.

Rozpustiteľné nastavenie interakcie

Droppable má množstvo vlastností pre interakciu, ktoré môžete zmeniť a prispôsobiť tak jeho 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á, potom je funkcia interakcie s možnosťou pustenia 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á má byť priradená v reakcii na udalosť aktivácie a odstránená v reakcii na udalosť deaktivácie
hoverClass	Definuje triedu, ktorá má byť 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 položiek

Môžete obmedziť množinu pohyblivých prvkov, ktoré budú akceptované prvkom, ktorý má funkciu interoperability Droppable, pomocou voľby prijať. Možnosť prijať by mala byť nastavená na selektor. V dôsledku toho sa udalosti interakcie s možnosťou pustenia vyskytnú iba vtedy, ak sa vyhadzovaná položka zhoduje so zadaným výberom. Relevantný príklad je uvedený nižšie:

...

Spustiť príklad

V tomto príklade sú dva pohyblivé prvky s názvom drag1 a drag2. Pri vytváraní prijímajúceho prvku sa používa možnosť accept, ktorou naznačíme, že prijateľným prvkom float bude iba drag1.

Pri ťahaní ťahaním1 uvidíte rovnaký efekt ako v predchádzajúcich príkladoch. Udalosti aktivácie, deaktivácie, prepnutia a vypnutia sa vypália na prijímajúci prvok vo vhodných časoch. Zároveň, ak potiahnete prvok drag2, ktorý nezodpovedá selektoru špecifikovanému v parametri accept, tieto udalosti sa nespustia. Tento prvok sa môže voľne pohybovať, ale nebude vnímaný prijímacím prvkom.

Všimnite si zmenu v spôsobe výberu prijateľného floatu, pre ktorý by ste mali volať metódu text (). Keď bol v dokumente iba jeden pohyblivý prvok, stačil na to atribút id:

Drop: function () ($ ("# pretiahnuteľné"). Text ("Left")),

V tomto príklade sú dva prvky float a výber atribútu id neprinesie požadovaný výsledok, pretože text sa v tomto prípade vždy zmení v tom istom prvku float, bez ohľadu na to, ktorý je pre prijímajúci prvok prijateľný.

Cesta von 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 vráti objekt jQuery obsahujúci prvok, ktorý používateľ pretiahne alebo sa ho pokúsi ponechať na cieľovom prvku, čo umožňuje výber požadovaného prvku nasledovne:

Drop: funkcia (udalosť, ui) (ui.draggable.text ("vľavo")),

Zmena prahu prekrytia

V predvolenom nastavení sa udalosť over spustí iba vtedy, keď sa aspoň 50 % plávajúceho prvku prekrýva s prijímajúcim prvkom. Hodnotu 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é používam najčastejšie, fit a touch, sú tie, ktoré sú pre používateľov najzrozumiteľnejšie. Hodnotu prispôsobenia používam v prípadoch, keď by mal pretiahnutý prvok zostať v oblasti prijímacieho prvku, do ktorého bol presunutý, a hodnotu dotyku - keď by sa mal presunutý prvok vrátiť do pôvodnej polohy (príklad bude uvedený nižšie ). Príklad použitia parametrov prispôsobenia a dotyku je uvedený nižšie:

Hodnota klonu hovorí používateľskému rozhraniu jQuery, 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ík sa odstráni, keď používateľ uvoľní tlačidlo myši nad plávajúcim prvkom, pričom plávajúce a prijímacie prvky ponechá v ich pôvodnej polohe.

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 sú rozmery presúvaného prvku veľké, ako v našom príklade, potom pokrýva zvyšok prvkov dokumentu, takže aj pre používateľa bude ťažké sledovať polohu prijímacieho prvku. Tento problém môžete obísť zadaním funkcie ako hodnoty pre možnosť pomocníka, ako je uvedené v príklade nižšie:

... $ (funkcia () ($ ("div.draggable") .. png "/>")))); $ ("# košík"). možnosť zahodiť ((activeClass: "active", hoverClass: "hover")); )); ... Spustiť príklad

Keď používateľ začne ťahať prvok, používateľské rozhranie jQuery zavolá funkciu určenú parametrom pomocníka a použije vrátený prvok ako float. 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 odosiela do udalostí interakcie s možnosťou droppable, obsahuje vlastnosť pomocníka a túto vlastnosť možno použiť na manipuláciu s pomocníkom pri jeho presúvaní. Príklad použitia tejto vlastnosti v spojení s udalosťami over and out je uvedený nižšie:

... $ (funkcia () ($ ("div.draggable") .. png "/>")))); $ ("# košík"). možnosť zahodiť ((activeClass: "active", hoverClass: "hover", over: function (event, ui) (ui.helper.css ("border", "thick solid # 27e6ed")) , out: funkcia (udalosť, ui) (ui.helper.css ("hranica", "")))); )); ...

Tu sa udalosti over a out a vlastnosť ui.helper používajú na zobrazenie okraja okolo pomocníka, keď sa prekrýva s prijímajúcim prvkom. Výsledok je znázornený na obrázku:

Prichytenie k okrajom prvkov

Používaním možnosti prichytenia môžete dosiahnuť, že presunutý prvok sa „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 presunutý prvok priblíži k jednému z vhodných prvkov, je k nemu akoby „priťahovaný“ tak, že sa ich susedné hrany 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 daný prvok v dokumente, ako aj prijímajúci prvok.

Existuje niekoľko možností pomocníka, ktoré vám umožňujú doladiť väzbové správanie prvkov. Jedným z nich je možnosť snapMode... Môže sa použiť na určenie typu väzby. Akceptované 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 má 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, čo zodpovedá prichyteniu na väčšiu vzdialenosť. Je veľmi dôležité vybrať správnu hodnotu pre túto možnosť. Ak je hodnota snapTolerance príliš malá, používateľ si nemusí všimnúť efekt prichytenia, a ak je príliš veľká, presúvaná položka začne robiť neočakávané skoky a prichytí sa k vzdialeným položkám.

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 položky z jedného zoznamu do druhého. Na to je potrebné použiť dva ovládacie prvky: umývadlo a zdroj. Prijímač je objekt, ktorý prijme zdrojový objekt (presunutý objekt).

Udalosti, ktoré sa vyskytnú pri pohybe objektov, sú uvedené nižšie v poradí, v akom sa vyskytujú.

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

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

onDragDrop (typ TDragDropEvent) – Vytvorené prijímajúcim objektom, keď sa naň pustí ťahaný objekt. Obsluha udalosti prijíma aktuálne súradnice ukazovateľa myši, objekt príjemcu odosielateľa (typ TObject) a objekt zdroja pohybu (typ TObject).

onEndDrag (typ EndDragEvent) – vyvolá sa po dokončení operácie ťahania. Súradnice X a Y bodu, kde sa nachádza zdrojový objekt odosielateľa a cieľ prijímača, sa odovzdajú obsluhe udalosti.

Na vytvorenie ťahania stačí implementovať dve udalosti: OnDragDrop a OnDragOver, keď je vlastnosť DragMode nastavená na dmAutomatic. V opačnom prípade musí byť začiatok operácie presunu, metóda BeginDrag, zakódovaná programátorom.

Na konsolidáciu materiálu vytvorte nasledujúcu aplikáciu. Umiestnite komponent Panel na formulár. Nastavte vlastnosť DragMode inšpektora objektov na dmAutomatic. Vyberte objekt tvaru 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); začať, ak Zdroj = Panel1, potom Prijať: = Pravda, inak Prijať: = Nepravda; koniec; procedure TForm1.FormDragDrop (Sender, Source: TObject; X, Y: Integer); begin Panel1.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.

Zrátané a podčiarknuté: oboznámili sme sa s technológiou drag and drop(drag and drop) a použili ho v praxi.