Vytvorenie jednoduchého rozhrania HTML5 „drag & drop“. Drag-and-drop: spôsob ovládania prvkov používateľského rozhrania 13 drag and drop technológia

182

V tomto príklade vyberieme prvok div a urobíme ho pohyblivým tak, že naň zavoláme metódu 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:

Schopnosť presúvať prvky 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.

Presúvateľná interakcia sa dosahuje výlučne použitím š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 nástrojmi pre ťahanie a presúvanie. 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 jQuery UI Drag-and-drop, potom je lepšie vypnúť ekvivalentné funkcie HTML5, aby ste sa vyhli konfliktom. Ak to chcete urobiť, nastavte atribút draggable prvku telo dokumentu na hodnotu false.

Nastavenie interakcie s možnosťou presúvania

Existuje veľa možností prispôsobenia interakcií s možnosťou presúvania. Najdôležitejšie vlastnosti, o ktorých sa hovorí v nasledujúcich častiach, sú uvedené v tabuľke nižšie:

Vlastnosti interakcie s možnosťou presúvania Popis vlastnosti

os	Obmedzuje schopnosť pohybu v určitých smeroch. Predvolená hodnota je false, čo znamená žiadne obmedzenie, ale môžete zadať aj hodnotu „x“ (pohyb iba pozdĺž osi X) alebo „y“ (pohyb iba pozdĺž osi Y)
zadržiavanie	Obmedzuje umiestnenie prvku, ktorý sa presúva do určitej oblasti obrazovky. Typy podporovaných hodnôt sú popísané v tabuľke nižšie pomocou príslušného príkladu. Predvolená hodnota je false, čo znamená žiadne obmedzenia
meškanie	Určuje, ako dlho sa musí prvok ťahať, kým sa presunie. Predvolená hodnota je 0, čo znamená žiadne oneskorenie
vzdialenosť	Definuje 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

Obmedzenie smerov pohybu

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

... div.dragElement (veľkosť písma: veľké; okraj: tenký plný čierny; výplň: 16 pixelov; šírka: 8 em; zarovnanie textu: stred; farba pozadia: svetlošedá; okraj: 4 pixely ) $(funkcia() ( $ (".dragElement").draggable(( os: "x")).filter("#dragV").draggable("možnosť", "os", "y"); )); Ťahať vertikálne Ťahať horizontálne Spustiť príklad

V tomto príklade definujeme dva prvky div, vyberieme ich pomocou jQuery a zavoláme metódu draggable(). Ako argument tejto metóde odovzdáme objekt, ktorý spočiatku obmedzuje pohyb oboch prvkov div v smere pozdĺž osi X. Potom pomocou metódy jQuery filter() dokážeme vybrať prvok dragV bez toho, aby jQuery hľadal znova celý dokument a nastavte ho na iný povolený smer pohybu - pozdĺž osi Y. Takto získame dokument, v ktorom je možné jeden prvok div ťahať iba vo vertikálnom smere a druhý - iba v horizontálnom smere. Výsledok je znázornený na obrázku:

Obmedzenie prípustnej oblasti pohybu prvkov

Môžete tiež obmedziť oblasť obrazovky, kde môžete pretiahnuť položku. Ak to chcete urobiť, použite možnosť obmedzenia. 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:

... div.dragElement (veľkosť písma: veľké; orámovanie: tenké plné čierne; odsadenie: 16px; šírka: 8 em; zarovnanie textu: stred; farba pozadia: svetlošedá; okraj: 4px ) #container ( orámovanie: stredné dvojité čierna; šírka: 700px; výška: 450px) $(funkcia() ( $(".dragElement").draggable(( uzavretie: "rodič" )).filter("#dragH").draggable("možnosť", " os", "x"); )); Ťahajte vodorovne Ťahajte do nadradeného príkladu Spustiť

V tomto príklade majú oba prvky obmedzenú schopnosť pohybu, takže ich možno presúvať iba v rámci svojho nadradeného prvku, ktorým je prvok div s pevnou veľkosťou. Jedno z plávajúcich prvkov div má ďalšie obmedzenie spočívajúce v tom, že je plávajúce pomocou možnosti osi v tom, že sa môže pohybovať iba horizontálne v rámci svojho rodiča. 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ť berie ako hodnotu pole dvoch prvkov určujúcich šírku a výšku buniek mriežky v pixeloch. Príklad použitia možnosti mriežky je uvedený nižšie:

... #draggable (veľkosť písma: x-large; orámovanie: tenké plné čierne; šírka: 5em; zarovnanie textu: stred; padding:10px) $(function() ( $("#draggable").draggable( (mriežka: )); )); Drag me Run príklad

Tento príklad špecifikuje mriežku s bunkami širokými 100 pixelov a vysokými 50 pixelov. Keď potiahnete prvok, „preskočí“ z jednej (neviditeľnej) bunky do druhej. Efekt prichytenia je skvelým príkladom toho, ako sa dá použiť funkcia interakcie, 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. Napríklad, ak 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 presunu

Existujú dve možnosti, ktoré vám umožnia oddialiť ťahanie pohyblivého prvku. Možnosť oneskorenia vám umožňuje určiť množstvo času 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 nasledovať prvok.

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

... #time, #distance (veľkosť písma: veľké; okraj: tenký plný čierny; výplň: 10px; šírka: 120px; zarovnanie textu: stred; farba pozadia: svetlošedá; okraj: 4px; ) $(funkcia( ) ( $("#čas").pretiahnuteľné(( oneskorenie: 1000 )) $("#vzdialenosť").pretiahnuteľné(( vzdialenosť: 150 )) )); Blok s časovým oneskorením Blok s minimálnou vzdialenosťou Príklad spustenia

V tomto príklade sú dva pohyblivé prvky, z ktorých jeden je oneskorený pomocou možnosti oneskorenia a druhý je oneskorený 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 tejto periódy 1000 ms. V tomto momente nie je 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. Po uplynutí času oneskorenia sa presúvaný prvok prichytí k umiestneniu 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ý prvok potom 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 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 pri prezeraní miniaplikácií. Neexistujú žiadne metódy špecifické pre interakciu Draggable, 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 Draggable podporuje jednoduchý súbor udalostí, ktoré vás upozornia na pretiahnutie prvku. Tieto udalosti sú popísané v tabuľke nižšie:

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

... #draggable (veľkosť písma: x-large; orámovanie: tenké plné čierne; šírka: 190px; zarovnanie textu: stred; padding:10px) $(function() ( $("#draggable").draggable( ( štart: function() ( $("#pretiahnuť").text("Pretiahnite ma..."), stop: function() ( $("#pretiahnuť").text("Pretiahnite ma") ) )) ;)); Drag me Run príklad

Tento príklad používa udalosti spustenia a zastavenia na zmenu textového obsahu prvku pri jeho ťahaní. Táto výhoda 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 presúvateľného prvku, aj keď sa pohybuje po obrazovke.

Použitie droppable interakcie

Samotné pretiahnutie prvku môže byť v niektorých situáciách postačujúce, ale najužitočnejšie je, keď sa používa v spojení s interakciou s možnosťou pustenia.

Prvky, na ktoré bola aplikovaná interakcia Droppable (prijímajúce prvky), získavajú schopnosť prijímať pohyblivé prvky vytvorené pomocou interakcie Draggable.

Prijímacie prvky sa vytvárajú pomocou metódy droppable(), ale na získanie užitočných funkcií budete musieť vytvoriť obslužné nástroje 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 Popis udalosti

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

Nižšie je uvedený príklad vytvorenia jednoduchého prijímacieho prvku, pre ktorý je definovaný obslužný program udalosti s jedným poklesom:

... #draggable, #droppable (veľkosť písma: veľké; okraj: tenký plný čierny; výplň: 10px; šírka: 100px; zarovnanie textu: na stred; farba pozadia: svetlošedá; okraj: 4px;) #droppable (výplň : 20px; pozícia: absolútna; vpravo: 5px;) $(funkcia() ( $("#pretiahnuteľné").draggable(); $("#rozhoditeľné").droppable(( pokles: funkcia() ( $(" #draggable").text("Left") ) )); )); Nechajte ma tu Presuňte ma Príklad spustenia

Tento príklad pridá prvok div do dokumentu, ktorého textový obsah je reprezentovaný 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 presúvaného prvku pomocou metódy text().

Interakcia Drag-and-drop vytvorená v tomto príklade je jednoduchá, ale poskytuje užitočný kontext na vysvetlenie toho, ako interakcie Draggable a Droppable spolupracujú. Rôzne fázy procesu ťahania prvkov sú znázornené na obrázku:

Všetko to vyzerá veľmi jednoducho. Ťaháme presúvaný prvok, kým nie je nad prijímacím prvkom a uvoľníme ho. Prvok, ktorý sa zruší, zostane tam, kde bol ponechaný, a jeho textový obsah sa zmení v reakcii na udalosť zrušenia. Nasledujúce časti ukazujú, ako používať ďalšie udalosti interakcie s možnosťou droppable na zlepšenie používateľskej skúsenosti.

Osvetlenie cieľového objektu

Pomocou udalostí aktivácie a deaktivácie 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é usmernenie, ktoré prvky sú súčasťou modelu drag-and-drop. Zodpovedajúci príklad je uvedený nižšie:

... $(funkcia() ( $("#pretiahnutie").pretiahnutie(); $("#rozpadnutelne").droppable(( drop: function() ( $("#pretiahnutie").text("Left ") ), aktivovať: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable") ").css("hranica", "").css("farba-pozadia", ""); ) )); )); ...Uveďte 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í CSS okraja a farby 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 jeho vrátenie 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 je ťahaný prvok ponechaný na prijímajúcom prvku alebo nie.) Tento proces je znázornený na obrázku:

Manipulácia s prekrývajúcimi sa prvkami

Technológia drag-and-drop sa dá vylepšiť pridaním manipulácie s udalosťami. Udalosť over nastane, keď sa 50 % presúvaného prvku nachádza 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() ( $("#pretiahnuť").pretiahnuť(); $("#zahodiť").droppable(( drop: function() ( $("#pretiahnuť").text("Vľavo") ) , 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ď prijímací prvok prekrýva aspoň 50 % presúvaného prvku, je uzavretý v ráme a jeho farba pozadia sa zmení, ako je znázornené na obrázku:

Tento 50% limit sa nazýva prah prekrytia (tolerancia), ktorého hodnotu je možné nastaviť pri vytváraní prijímacieho prvku, ako bude ukázané neskôr.

Nastavenie Droppable interakcií

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

Rozpustiteľné vlastnosti interakcie Popis vlastnosti

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 pohyblivých prvkov, na ktoré bude prijímací prvok reagovať. Predvolená hodnota je *, ktorá 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	Definuje minimálny stupeň prekrytia, pri ktorom dôjde k prekrytiu

Obmedzenie povoleného presunu prvkov

Môžete obmedziť množinu droppovateľných prvkov, ktoré budú akceptované prvkom s funkciou Droppable interoperability, pomocou voľby prijať. Hodnota voľby prijatia by mala byť nastavená na selektor. V dôsledku toho sa udalosti interakcie s možnosťou pustenia vyskytnú iba vtedy, ak sa presúvaný prvok zhoduje so zadaným selektorom. Zodpovedajúci príklad je uvedený nižšie:

... .pretiahnutie, #droppovateľné (veľkosť písma: veľké; okraj: tenké plné čierne; výplň: 10 pixelov; šírka: 100 pixelov; zarovnanie textu: na stred; farba pozadia: svetlošedá; okraj: 4 pixely;) #droppable (výplň ( ui.draggable.text("Left") ), activate: function() ( $("#droppable")).css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function () ( $("#droppable").css("border", "").css("background-color", ""); ), akceptovať: "#drag1" )); )); Nechajte tu Element 1 Element 2 Spustiť príklad

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

Keď potiahnete prvok drag1, uvidíte rovnaký efekt ako v predchádzajúcich príkladoch. Vo vhodných časoch sa pre prijímajúci prvok spustia udalosti aktivácie, deaktivácie, prepnutia a vypnutia. Ak zároveň potiahnete prvok drag2, ktorý nezodpovedá selektoru zadané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 tom, ako vyberáme prijateľný plávajúci prvok, na ktorý sa má volať metóda text(). Keď bol v dokumente iba jeden pohyblivý prvok, stačil na to atribút id:

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

V tomto príklade sú dva prvky, ktoré sa majú presunúť, a výber podľa atribútu id nedá požadovaný výsledok, pretože text sa v tomto prípade vždy zmení v rovnakom pohyblivom prvku, bez ohľadu na to, ktorý prvok je prijateľný pre prijímajúci prvok.

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 vráti objekt jQuery obsahujúci prvok, ktorý používateľ pretiahne alebo sa pokúsi pustiť na cieľový prvok, čo umožňuje vybrať požadovaný prvok takto:

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

Zmena prahu prekrytia

Udalosť over sa štandardne vyskytuje 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é používam najčastejšie, sú fit a touch, pretože používateľom dávajú najväčší zmysel. Používam fit, keď ťahaný prvok musí zostať v oblasti prijímacieho prvku, do ktorého bol presunutý, a dotyk, keď sa ťahaný prvok potrebuje vrátiť do svojej 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í jQuery UI, aby vytvorilo kópiu presúvaného prvku spolu s celým jeho obsahom a použilo výsledný 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, pričom posúvaný prvok a prijímajúci prvok ponechá na ich pôvodných pozíciách.

Ako je znázornené na obrázku, pôvodný prvok, ktorý sa presúva, zostáva na mieste a iba pomocný prvok sa pohybuje po obrazovke podľa ukazovateľa myši. Ak je veľkosť presunuté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 uvedené v príklade nižšie:

... $(funkcia() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Uveďte príklad

Keď používateľ začne presúvať prvok, používateľské rozhranie jQuery zavolá funkciu určenú parametrom pomocníka a použije vrátený prvok ako objekt, ktorý sa má presunúť. 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ástupca pre presúvaný 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 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"/>") ) )); $("#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 prijímajúcim prvkom. Výsledok je znázornený na obrázku:

Prichytiť k okrajom prvku

Pomocou možnosti prichytenia môžete zabezpečiť, aby sa presunutý prvok „pritiahol“ k okrajom prvkov, popri ktorých prechádza. Táto možnosť akceptuje selektor ako hodnotu. Premiestňovaný prvok sa prichytí k okrajom akéhokoľvek prvku zodpovedajúceho zadanému selektoru. Príklad použitia možnosti snap je uvedený nižšie:

Spustite príklad používateľského rozhrania jQuery #snapper, .draggable, .droppable (veľkosť písma: veľké; okraj: stredne plná čierna; výplň: 4px; šírka: 150px; zarovnanie textu: stred; farba pozadia: svetlošedá; okraj: 10px ;).dropable (okraj-pravý: 5px; výška: 50px; šírka: 120px) #dropContainer (pozícia: absolútna; pravá: 5px;) div span (pozícia: relatívna; hore: 25%) .dropable.active (ohraničenie: stredne plná zelená) .droppable.hover (farba pozadia: svetlozelená) #snapper (pozícia: absolútna; vľavo: 35 %; okraj: stredne plná čierna; šírka: 180px; výška: 50px) $(funkcia() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "obidva", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "vznášať sa" )); )); Košík Snap sem Presuňte ma

Keď sa pohyblivý 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í prvok. V tomto príklade som pridal prvok div a nastavil možnosť prichytenia na hodnotu, ktorá vyberie tento prvok, ako aj prijímajúci prvok v dokumente.

Existuje niekoľko pomocných možností, ktoré vám umožňujú presnejšie prispôsobiť správanie ukotvenia prvkov. Jednou z nich je možnosť snapMode. S jeho pomocou môžete určiť typ 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é).

Voľba snapTolerance vám 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, čo zodpovedá zaklapnutiu vo väčšej vzdialenosti. Je veľmi dôležité zvoliť správnu hodnotu pre túto možnosť. Ak je hodnota snapTolerance príliš nízka, používateľ si nemusí všimnúť efekt prichytenia a ak je príliš vysoká, presúvaný prvok začne robiť neočakávané skoky a prichytávať k vzdialeným prvkom.

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

V tomto návode vytvoríme skript, ktorý môžete použiť na vytvorenie dynamických obdĺžnikov drag and drop na vašej webovej stránke. 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 si pripravme malú webovú stránku projektu. 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 bola jasná predstava o práci a bol tu bod pre ďalší vývoj.

Nižšie je uvedený kód pre náš HTML súbor. 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 štýlu style.css, ktorý obsahuje hlavné vlastnosti pre tvarovanie vzhľad náš dokument.

Potiahnite ma Áno, áno. Presne ja. Môžete pretiahnuť aj mňa ( zIndex: 200, nepriehľadnosť: 0,9 )

P.S.: Môžete ma nechať kdekoľvek!

Vnútorná časť telo sú umiestnené iba dva bloky div, ktoré obsahujú oba obdĺžniky. Kód je pomerne jednoduchý a zrozumiteľný. Vo vnútri každého obdĺžnika sú hlavičky s obsluhou tried 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 označeniu, potom CSS štýly tiež nebude predstavovať žiadne ťažkosti. Hlavne definované okraje, vypchávky a farby.

Body,html ( font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p ( height:30px; )

Selektory telo, html sa používajú iba pre ukážkovú stránku. A všetok obsah je umiestnený v dvoch preťahovateľných obdĺžnikoch.

Dv1 ( width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; ) .dv1 h2 ( background-color:#b2d3f5; padding:5px; font- family:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; ) .dv1 div ( padding:5px; margin-bottom:10px; ) .dv2 ( background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolútna; kurzor:move; left:400px; top:230px; ) .dv2 h2 ( background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; ) .dv2 .content2 ( padding:5px; margin-bottom:10px; )

Pre obe triedy .dv1 a .dv2 používame absolútne umiestnenie. To nie je potrebné a asi ani najviac Najlepšia cesta na umiestnenie presúvateľných obdĺžnikov. V našom príklade však toto umiestnenie dáva zmysel, pretože pri každom obnovení stránky sa obdĺžniky nainštalujú na určité miesta.

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

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

Analýza JavaScriptu

Dva súbory JavaScript obsahujú všetok kód potrebný na jeho fungovanie. Vynecháme detaily práce s jQuery, pretože to je nad rámec lekcie. Venujme pozornosť súboru jquery.dragndrop.js.

Riadok 22 definuje funkciu ťahania.

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

Tým sa nastaví návratová premenná a inicializačné údaje pre Ťahá. Táto metóda sa veľmi bežne používa pri práci s jQuery na odovzdávanie možností iným funkciám. Interne nastavujeme premenné pre každého dostupné možnosti pre ťahateľné obdĺžniky.

Ďalší kus kódu obsahuje obsluhu udalostí pre premennú dragndrop. Obe udalosti ťahať A pokles volanie funkcií, ktoré im odovzdávajú parametre udalostí. Tieto udalosti sa vyskytujú, keď stlačíte tlačidlo myši, aby ste potiahli objekt a potom ho uvoľnili.

Var dragndrop = ( drag: function(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 písma 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 diskutovalo skôr.

Máme dva pohyblivé bloky s triedami .dv1 a .dv2. Ak potrebujete nechať jeden pohyblivý blok, potom stačí odstrániť druhú časť kódu. Pridanie ďalšieho pohyblivého bloku je tiež jednoduché. Treba len pridať Nová funkcia v tomto súbore.

Prvým krokom je nastavenie možností pri volaní funkcie. Nezabudnite nastaviť názov obsluhy. Pomocou neho povieme jQuery, ktorý handler sa 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é. Toto je miesto, kde sa kód HTML v obdĺžniku upraví tak, 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ôžete pridať ďalšie vlastnosti CSS? ale bude to vyžadovať prepracovanie kódu JavaScript, aby sa skontrolovali nastavenia. Môžete napríklad zadať iný štýl písma alebo hodnoty pre výšku a šírku pohyblivého obdĺžnika - veľmi zaujímavý trik!

Záver

S trochou práce máme teraz 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é metódy.

Výsledkom je, že máme nielen funkcie obsluhy udalostí, ale môžeme tiež prenášať nové premenné do blokov, ktoré možno presúvať. 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ť.

Ak chcete používať funkcie knižnice, pozrite si dokumentáciu jQuery.

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

Rozsahom nápadu zďaleka nie sú len internetové obchody, elektronické knižnice, vyhľadávače resp Informačné systémy a tiež aplikovaná sféra. Myšlienka je veľmi použiteľná pri vývoji webových 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 umiestnite - nápad je prirodzený a pohodlný. Je jednoducho prekvapujúce, ž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. Zobrať požadovaný produkt myšou a pretiahnuť ho do nákupného košíka je jednoduché, prirodzené a pohodlné. Nahrávanie súborov: 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šlienkou „drag and drop“ manipulovať 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, ako aj 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: vybrané, prenesené a uvoľnené – jednoduché a prirodzené.

Je veľmi jednoduché implementovať prenos súborov zo stránky na stránku, na server alebo na iné použitie.

V tomto príklade bolo pomocou myši vybratých niekoľko súborov na pracovnej ploche (obrázok vľavo). Pri výbere bolo stlačené ľavé tlačidlo myši a vybraný „išiel“ do košíka. Samotný prehliadač ukázal, ako sa to deje, napísal nápovedu „kopírovanie“ a vytvoril okolo nej obrysy presunutý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 lokality (spodný obrázok) bol kód JavaScript schopný prijať a spracovať všetky súbory, ktoré návštevník poskytol na 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 akomkoľvek prípade použitia.

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

Logika stránky je nasledovná. Keď sa stránka načíta do prehliadača, do košíka sa priradí obsluha udalosti „ondrop“ – vlož, ostatné udalosti sú zablokované a nepoužívajú sa.

Stránka funguje ako obvykle, no akonáhle návštevník vyberie súbor (súbory) a pretiahne ich do obrázka košíka, teda na značku scPlaceFile, spustí sa spracovanie udalosti „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 vygeneruje 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 drag and drop je bežnou praxou pri používaní tejto technológie. Vývojár zvyčajne vytvorí formulár na nahranie súboru (1), ktorý funguje ako zvyčajne (2). Návštevník si môže vybrať súbory a stiahnuť ich ako obvykle.

Ak však návštevník pretiahne a pustí konkrétne miesto vo formulári, pole s názvom 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 v bežnej verzii 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ť nielen „presúvanie“. š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“ po stranách prvkov môžete vytvoriť možnosť automaticky presúvať prvky na požadované miesto na stránke alebo ich meniť.

Spracovanie udalosti kliknutia myšou – zapamätanie súradníc miesta kliknutia, napríklad jednej zo strán prvku. Pohyb 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ť.

Formálne to nie je „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 – absolútne rôzne prístupy k implementácii používateľského rozhrania (návštevník, vývojár). Požiadavka na kompatibilitu medzi prehliadačmi je celkom prirodzená a moderná.

To všetko spolu sťažuje vytváranie stránok, ale aplikovaním myšlienky „ťahaj a pusť“ v jej štandardnej forme, využívaním jej udalostí, kombinovaním tejto myšlienky s bežnými udalosťami na prvkoch, je možné implementovať mechanizmus v ktorá stránka sa vytvorí vizuálne.

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

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

Na tej istej stránke bez toho, aby ste manuálne splnili požiadavku viacerých prehliadačov, sa teda budú zobrazovať rôzne údaje rôzne zariadenia a v rôznych prehliadačoch.

Tým, že návštevník môže tieto postupy vykonávať samostatne a zároveň si vybrať potrebné prvky stránky z tých, ktoré poskytuje vývojár, je možné zabezpečiť kompatibilitu medzi prehliadačmi a požadovanú funkčnosť stránky s prihliadnutím na názor používateľa.

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 je potrebné použiť dva ovládacie prvky: umývadlo a zdroj. Prijímač je objekt, ktorý prijme zdrojový objekt (premiestňovaný objekt).

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

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

OnDragOver(typ TDragOverEvent) - vytvorí objekt prijímača, keď je nad ním ťahaný objekt. Parametre, ktoré sa odovzdávajú obsluhe udalosti: objekt príjemcu Sender (typ TObject), zdrojový objekt Source (typ TObject), stav pohybu State (typ TDragState), X a Y (typ integer) - aktuálne súradnice ukazovateľa myši, Accept ( typ boolean ) znak potvrdenia operácie presunu. Stav pohybu dáva jasne najavo, či sa presúvaný objekt nachádza v oblasti prijímača, pohybuje sa v nej alebo 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á, inak je nastavený na False.

onDragDrop (typ TDragDropEvent) - generované objektom prijímača, keď je naň pustený ť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) – zdvihne sa po dokončení operácie ťahania. Súradnice X a Y bodu, v ktorom sú zdrojový objekt odosielateľa a cieľový objekt prijímača odovzdané 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 ťahania, 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. Vyberme objekt formulára a pomocou nástroja Object Inspector vytvorte nasledujúce udalosti:

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); begin Panel1.Left:= X; Panel1.Top:= Y; koniec;

Teraz spustením aplikácie a kliknutím na tlačidlo 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.