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 ťahaním a pustením .
Kliknutie ľavé tlačidlo myšou nad ovládacím prvkom, môžeme ho „pretiahnuť“ na akýkoľvek iný prvok. Z pohľadu programátora to znamená, že v momentoch ťahania a púšťania kľúča sa vygenerujú 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.
CancelDrag 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 objekt zadaný v parametri Sender je 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 do formulára a priraďte ho Zarovnať vlastnosť alTop hodnota. 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:
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 služby do druhého, 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 položku do Správne miesto v túto aplikáciu alebo iný, ktorý máte otvorený v Slide Over alebo Split View a uvoľnite.
Ako presúvať 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, ktorú chcete premiestniť na domovskej obrazovke.
2. Dotknite sa dodatočné aplikácie, ktorý je tiež potrebné presunúť.
3. Presuňte tieto aplikácie na stránku alebo priečinok, kde ich chcete mať, a pustite ich.
Už dlho existujú funkcie JavaScriptu, ktoré nám umožňujú vytvárať rozhrania drag & drop. Žiadna z týchto implementácií však nie je pre prehliadač natívna. HTML5 má svoj vlastný spôsob vytvárania rozhraní drag & drop (s malou pomocou JavaScriptu). V tomto článku vám prezradíme, ako sa to dá dosiahnuť...
Podpora prehliadača
HTML5 drag & drop je v súčasnosti podporované všetkými hlavnými stolnými prehliadačmi (vrátane IE (dokonca aj IE 5.5 má čiastočnú podporu)), ale nie je podporované žiadnym z populárnych mobilných prehliadačov.
Drag&Drop udalosti
Pri každom kroku drag & drop sa spúšťajú rôzne udalosti, aby prehliadač vedel, ktorý kód JavaScript má spustiť. Zoznam podujatí:
- dragStart: spustí sa, keď používateľ začne presúvať prvky;
- dragEnter: spustí sa, keď sa ťahaný prvok prvýkrát pretiahne cez cieľový prvok;
- dragOver: spustí sa, keď sa myš presunie cez prvok počas ťahania;
- dragLeave: spustí sa, ak kurzor používateľa opustí prvok počas ťahania;
- ťahať: spustí sa vždy, keď pohneme myšou pri ťahaní nášho prvku;
- pokles: spustí sa pri vykonaní skutočného poklesu;
- dragEnd: spustí sa, keď používateľ uvoľní tlačidlo myši počas ťahania objektu.
So všetkými týmito poslucháčmi udalostí máte veľkú kontrolu nad tým, ako bude rozhranie fungovať.
objekt prenosu údajov
Tu sa odohráva všetka tá mágia drag&drop. Tento objekt obsahuje údaje, ktoré boli odoslané operáciou ťahania. Dáta je možné nastaviť a získať rôzne cesty, z ktorých najdôležitejšie sú:
- dataTransfer.effectAllowed=value: vráti povolené typy akcií, možné hodnoty: žiadny, kopírovať, kopírovaťOdkaz, kopírovaťPresunúť, odkaz, odkazPresunúť, presunúť, všetko a neinicializované.
- dataTransfer.setData(formát, údaje): Pridá špecifické údaje a formát.
- dataTransfer.clearData(format): Vymaže všetky údaje pre konkrétny formát.
- dataTransfer.setDragImage(prvok, x, y): nastaví obrázok, ktorý chcete presunúť, hodnoty x a y označujú, kde by mal byť kurzor myši (0, 0 ho umiestni vľavo hore).
- data = dataTransfer.getData(format) : Ako už názov napovedá, vracia dáta pre konkrétny formát.
Vytvorenie príkladu drag&drop
Teraz začneme vytvárať jednoduchý príklad drag&drop. Ako vidíte, máme dva malé divy a jeden veľký, malé divy môžeme pretiahnuť dovnútra veľkého a dokonca ich presunúť späť.
Ťahanie objektu
Prvá vec, ktorú musíme urobiť, je vytvoriť HTML. Divs umožňujeme presúvať pomocou atribútu draggable:
Keď to urobíme, musíme definovať funkciu JavaScriptu, ktorá sa spustí hneď, ako začneme presúvať tento prvok:
Funkcia dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; vráti true ;)
V tomto kóde najprv deklarujeme, aký typ efektu v operácii povoľujeme a nastavíme ho na pohyb. Na druhom riadku nastavíme dáta, s ktorými sa má pracovať, kde text bude Text a hodnota bude ID prvku, ktorý ťaháme. Potom použijeme metódu setDragImage, ktorá nám nastaví, čo budeme ťahať a kde bude kurzor pri ťahaní a keďže kocky sú 200 x 200 pixelov, umiestnili sme to úplne do stredu. Na konci vrátime return true.
Zahodiť predmet
Aby prvok akceptoval pokles, musí počúvať 3 rôzne udalosti: dragEnter, dragOver a udalosť drop. Pridajme to teda do našej HTML5 div s veľkým ID:
funkcia dragEnter(ev) ( ev.preventDefault(); return true; ) funkcia dragOver(ev) ( ev.preventDefault(); )
V prvej funkcii definujeme, čo sa má stať, keď sa prvok, ktorý ťaháme, dostane k požadovanému prvku, kde má dôjsť k poklesu, v tomto prípade iba bránime predvolenému správaniu prehliadača. Ďalej, vo funkcii dragOver v predvolenom nastavení nepovoľujeme pokles.
V ďalšej časti definujeme funkciu, keď je prvok „hodený“ na požadovaný cieľ:
Funkcia dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
V tejto poslednej časti najprv nastavíme dátovú premennú, kde získame všetky dáta, ktoré máme k dispozícii textový formát a potom pridáme údaje do prvku div, kam chceme prvok umiestniť.
Urobte z drop sekcie cieľ
Demo ukazuje, že dva divy je možné presunúť späť na miesto. Našťastie je pridanie ďalšieho cieľového bodu oveľa jednoduchšie, než by ste si mysleli. Pretože tieto funkcie už máme a všetko, čo musíme urobiť, je pridať poslucháčov udalostí:
A to je všetko, čo je potrebné na to, aby sa div mohol vtiahnuť späť na miesto.
Existuje mnoho aplikácií drag&drop, ktoré sú vytvorené pomocou pomocou JavaScriptu knižnice a často sa ľahšie používajú. Dúfame však, že v tomto HTML5 a JavaScript technika, uvidíte budúci potenciál na riešenie vašich problémov.
HTML Drag and Drop rozhrania umožňujú aplikáciám používať funkcie presúvania myšou v prehliadačoch. Užívateľ si môže vybrať ťahateľné prvky myšou presuňte tieto prvky do a spustiteľné a uvoľnite ich uvoľnením tlačidla myši. Priesvitné znázornenie ťahateľné prvky sledujú ukazovateľ počas operácie ťahania.
Pre webové stránky, rozšírenia a aplikácie XUL, môžeš prispôsobiť, ktoré prvky sa môžu stať ťahateľné, typ spätnej väzby ťahateľné prvky produkujú, a spustiteľné prvkov.
Tento prehľad HTML Drag and Drop obsahuje popis rozhraní, základné kroky na pridanie podpory drag-and-drop do aplikácie a zhrnutie interoperability rozhraní.
Presuňte udalosti
| udalosť | Na Obsluhe udalostí | Požiare, keď… |
|---|---|---|
| ťahať | Ondrag | …a pretiahnutá položka(výber prvku alebo textu) sa pretiahne. |
| dragend | ondragend | ...končí sa operácia ťahania (napríklad uvoľnenie tlačidla myši alebo stlačenie klávesu Esc; pozri Dokončenie ťahania .) |
| dragenter | ondragenter | …potiahnutá položka vstúpi do platného cieľa presunutia. (Pozrite si časť Určenie cieľov poklesu.) |
| dragexit | ondragexit | …prvok už nie je okamžitým cieľom výberu operácie ťahania. |
| dragleave | ondragleave | …potiahnutá položka zanechá platný cieľ presunutia. |
| dragover | Ondragover | …potiahnutá položka sa presúva cez platný cieľ presunutia každých niekoľko stoviek milisekúnd. |
| dragstart | ondragstart | ...používateľ začne ťahať položku. (Pozri Spustenie operácie ťahania.) |
| pokles | pokles | …položka spadne na platný cieľ prehodenia. (Pozrite si časť Vykonanie poklesu.) |
Poznámka: Udalosti dragstart ani dragend sa nespúšťajú pri pretiahnutí súboru do prehliadača z OS.
Rozhrania
Základy
Táto časť je zhrnutím základných krokov na pridanie funkcie presúvania myšou do aplikácie.
identifikovať čo je ťahateľné
Vytvorenie prvku ťahateľné vyžaduje pridanie atribútu draggable a obslužného programu globálnej udalosti ondragstart, ako je znázornené v nasledujúcej ukážke kódu:
Tento prvok je pretiahnuteľný.
Ďalšie informácie nájdete na stránke:
zvládnuť pokles účinok
Obslužný program pre udalosť drop môže spracovať údaje ťahania spôsobom špecifickým pre aplikáciu.
Aplikácia zvyčajne používa metódu getData() na získanie položiek ťahania a ich následné spracovanie. Okrem toho sa sémantika aplikácie môže líšiť v závislosti od hodnoty
Techniky drag and drop sa vyvíjali mnoho rokov. Nie je prekvapujúce, že s nárastom počtu programátorov vyvíjajúcich zásuvné moduly s otvoreným zdrojový kód(napr. pre jQuery) sú vzkriesené staré metódy. Knižnica JavaScript je vysoko prispôsobivá a ponúka mnoho vylepšení v tomto veku webových technológií.
V tomto návode vytvoríme skript, ktorý môžeme použiť na vytvorenie dynamických obdĺžnikov drag and drop na naš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ť aj v iných projektoch.
Pripravujeme obsah
V prvom rade k projektu pripravíme 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ý, takže bude jasná predstava o práci a bude tu bod pre ďalší vývoj.
Nižšie je uvedený náš kód 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 style.css, ktorý obsahuje hlavné vlastnosti pre tvarovanie vzhľad náš dokument.
potiahni ma
Aj mňa sa dajú ťahať
P.S. Môžete ma zahodiť kdekoľvek!