Pro knihovnu VCL společnost Borland implementovala vlastní verzi rozhraní Drag&Drop (přeloženo jako „drag“). Toto rozhraní je interní - můžete odesílat a přijímat jakékoli ovládací prvky Delphi uvnitř formuláře "(kromě formuláře samotného). Je implementováno bez použití odpovídajících funkcí Windows API - musí být použity při organizaci komunikace s jinými úkoly přetažením a přetažením .
kliknutím levé tlačítko myší nad ovládacím prvkem jej můžeme „přetáhnout“ na jakýkoli jiný prvek. Z pohledu programátora to znamená, že v okamžicích tažení a uvolnění klíče se generují určité události, které přenášejí všechny potřebné informace - ukazatel na tažený objekt, aktuální souřadnice kurzoru atd. Přijímačem události je prvek na kterém tento moment kurzor je umístěn. Obsluha takové události musí systému sdělit, zda daný ovládací prvek přijímá "odeslání" nebo ne. Po uvolnění tlačítka nad ovládáním přijímače se spustí jedna nebo dvě další události v závislosti na připravenosti přijímače.
ZrušitPřetažení Zruší aktuální operaci přetažení nebo přetažení.
Funkce FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;
Funkce vrací objekt základní třídy TControl , která odkazuje na pozici obrazovky se souřadnicemi určenými parametrem Pos. Tato funkce se používá k určení potenciálního příjemce operace přetažení nebo přetažení. Pokud pro zadanou pozici neexistuje žádný ovládací prvek okna, funkce se vrátí nula . Parametr AllowDisabled určuje, zda budou brány v úvahu zakázané objekty.
Funkce IsDragObject(Sender: TObject ): Boolean ;
Funkce určuje, zda je objekt zadaný v parametru Sender potomkem třídy TDragObject . Tato funkce lze použít jako parametr Zdroj v obslužných rutinách událostí OnDragOver a OnDockOver k určení, zda bude přetažený objekt přijat. Také funkce IsDragObjectlze použít jako parametr Zdroj v obslužných rutinách událostí OnDragDrop a OnDockDrop, aby bylo možné správně interpretovat přetažený objekt.
DragMode, vlastnosti DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, metody OnStartDrag, parametr Accept
Proces přetahování informací z jednoho objektu na druhý pomocí myši je ve Widows široce používán. Můžete přesouvat soubory mezi složkami, přesouvat samotné složky a další.
Všechny vlastnosti, metody a události spojené s procesem drag and drop jsou definovány ve třídě TControl, která je rodičem všech vizuálních komponent Delphi. Proto jsou společné pro všechny komponenty.
Začátek tažení je určen vlastností DragMode, kterou lze nastavit v době návrhu nebo programově rovnou dmManual nebo dmAutomatic. Hodnota dmAutomatic (automatic) určuje automatické spuštění procesu přetažení, když uživatel klikne na komponentu myší. V tomto případě však událost OnMouseDown spojená se stiskem tlačítka myši uživatelem u této komponenty vůbec nenastane.
Rozhraní pro přenos a příjem komponent se objevilo již dávno. Poskytuje interakci mezi dvěma ovládacími prvky během provádění aplikace. V tomto případě lze provést všechny potřebné operace. Navzdory jednoduchosti implementace a stáří vývoje považuje mnoho programátorů (zejména začátečníků) tento mechanismus za obskurní a exotický. Použití Drag-and-Drop však může být velmi užitečné a snadno implementovatelné. Nyní si to ověříme.
Aby mechanismus fungoval, musí být odpovídajícím způsobem nakonfigurovány dva ovládací prvky. Jeden musí být zdroj (Source), druhý - přijímač (Target). V tomto případě se zdroj nikam neposouvá, ale je pouze jako takový registrován v mechanismu.
Věřte mi, je dost snadné se transformovat souřadnice X,Y, předané v parametrech událostí OnDragOver a OnDragDrop, do souřadnic formuláře.
Pracujte s vlastnostmi Vlevo a Nahoře součásti, nad kterou se nachází kurzor. Uvedu jednoduchý příklad. Umístěte komponentu Memo do formuláře a přiřaďte Zarovnat vlastnost alTop hodnota. Umístěte panel na formulář, také nastavte vlastnost Align na alTop a nastavte vlastnost Height na malou hodnotu, řekněme 6 nebo 7 pixelů. Nastavte DragMode na dmAutomatica a DragCursor na crVSplit. Umístěte další komponentu Memo a nastavte Align na alClient. Vyberte obě poznámky současně, panel a vytvořte společnou obslužnou rutinu události OnDragOver, jak je znázorněno níže:
Funkce Drag and Drop může pomoci zvýšit výkon vašeho iPadu. Zde je návod, jak jej můžete použít.
Můžete tedy přesunout soubor z jedné služby cloudového úložiště do druhé, zkopírovat text ze Safari do aplikace pro úpravu textu a přidat nabídku nebo vytvořit záloha určité fotografie v aplikaci pro ukládání souborů.
Jak přetahovat fotografie, soubory a text
1. Klepněte a podržte fotku, soubor nebo zvýrazněný text, který chcete přetáhnout do jiné aplikace.
2. Přetáhněte položku do Správné místo v tato aplikace nebo jiný, který máte otevřený v Slide Over nebo Split View a uvolněte.
Jak přetáhnout více fotografií nebo souborů najednou
1. Dotkněte se a podržte jednu z fotografií nebo souborů, které chcete přetáhnout.
2. Při přetahování aktuální položky klepněte na jinou fotografii nebo soubor, který chcete také přetáhnout. Udělejte to znovu s tolika prvky, kolik chcete přesunout.
3. Přetáhněte všechny vybrané objekty na určené místo v jiné aplikaci, kterou máte otevřenou v Slide Over nebo Split View, a uvolněte je.
Jak přetáhnout text z jedné aplikace do druhé
1. Klepnutím a podržením vyberte část textu, kterou chcete přetáhnout.
2. Pomocí výběrových bodů zvýrazněte zbytek textu, který chcete přetáhnout.
3. Stiskněte a podržte vybraný text.
4. Přetáhněte text do aplikace, kam jej chcete umístit, a uvolněte jej.
Jak změnit polohu ikon několika aplikací najednou pomocí "Drag and Drop"
Zatímco většina funkcí přetažení v systému iOS funguje pouze na iPadu, tento trik ve skutečnosti funguje na iPhonu i iPadu. To vám umožní organizovat umístění aplikací na domovské obrazovce pomocí « Drag and Drop“ místo jejich přesouvání po jednom.
1. Dotkněte se a podržte ikonu aplikace, kterou chcete změnit na domovské obrazovce.
2. Dotek doplňkové aplikace, který je také potřeba přesunout.
3. Přetáhněte tyto aplikace na stránku nebo složku, kde je chcete mít, a pusťte je.
Již dlouhou dobu existují funkce JavaScriptu, které nám umožňují vytvářet rozhraní drag & drop. Žádná z těchto implementací však není pro prohlížeč nativní. HTML5 má svůj vlastní způsob vytváření rozhraní drag & drop (s trochou pomoci JavaScriptu). V tomto článku vám prozradíme, jak toho lze dosáhnout...
Podpora prohlížeče
HTML5 drag & drop je v současnosti podporováno všemi hlavními stolními prohlížeči (včetně IE (i IE 5.5 má částečnou podporu)), ale není podporováno žádným z populárních mobilních prohlížečů.
Drag&Drop události
V každé fázi přetažení se spouštějí různé události, aby prohlížeč věděl, který kód JavaScript má spustit. Seznam akcí:
- dragStart: spustí se, když uživatel začne přetahovat prvky;
- dragEnter: spustí se, když je přetažený prvek poprvé přetažen přes cílový prvek;
- dragOver: spustí se, když se myš přesune přes prvek během tažení;
- dragLeave: spustí se, pokud kurzor uživatele opustí prvek během tažení;
- táhnout: spustí se pokaždé, když pohneme myší při tažení našeho prvku;
- drop: spustí se při skutečném dropu;
- dragEnd: spustí se, když uživatel při tažení objektu uvolní tlačítko myši.
Se všemi těmito posluchači událostí máte velkou kontrolu nad tím, jak bude rozhraní fungovat.
objekt dataTransfer
Tady se odehrává všechna ta kouzla drag&drop. Tento objekt obsahuje data, která byla odeslána operací přetažení. Data lze nastavit a načíst různé způsoby, z nichž nejdůležitější jsou:
- dataTransfer.effectAllowed=value: vrátí povolené typy akcí, možné hodnoty: none, copy, copyLink, copyMove, link, linkMove, move, all a uninicialized.
- dataTransfer.setData(formát, data): Přidá konkrétní data a formát.
- dataTransfer.clearData(format): Vymaže všechna data pro určitý formát.
- dataTransfer.setDragImage(element, x, y): nastaví obrázek, který chcete přetáhnout, hodnoty x a y označují, kde by měl být kurzor myši (0, 0 jej umístí do levého horního rohu).
- data = dataTransfer.getData(format) : Jak název napovídá, vrací data pro konkrétní formát.
Vytvoření příkladu drag&drop
Nyní začneme vytvářet jednoduchý příklad drag&drop. Jak vidíte, máme dva malé divy a jeden velký, můžeme malé divy přetáhnout dovnitř velkého a dokonce je přesunout zpět.
Přetažením objektu
První věc, kterou musíme udělat, je vytvořit HTML. Divs umožňujeme přetahování pomocí atributu draggable:
Jakmile to uděláme, musíme definovat funkci JavaScriptu, která se spustí, jakmile začneme přesouvat tento prvek:
Funkce dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ; vrátit true ;)
V tomto kódu nejprve deklarujeme, jaký typ efektu v operaci povolujeme a nastavíme jej na pohyb. Na druhém řádku nastavíme data pro práci, kde text bude Text a hodnota ID prvku, který přetahujeme. Poté použijeme metodu setDragImage, která nám nastaví, za co budeme táhnout a kde bude kurzor při tažení, a protože jsou kostky 200 na 200 pixelů, umístili jsme to úplně do středu. Na konci vrátíme return true.
Pusťte předmět
Aby prvek přijal upuštění, musí naslouchat 3 různým událostem: dragEnter, dragOver a událost drop. Přidejme to tedy do našeho HTML5 div s velkým ID:
funkce dragEnter(ev) ( ev.preventDefault(); return true; ) funkce dragOver(ev) ( ev.preventDefault(); )
V první funkci definujeme, co se má stát, když se prvek, který táhneme, dostane k požadovanému prvku, kde má dojít k dropu, v tomto případě pouze zamezíme výchozímu chování prohlížeče. Dále ve funkci dragOver ve výchozím nastavení prostě nedovolíme, aby došlo k pádu.
V další části definujeme funkci, kdy je prvek „hozen“ na požadovaný cíl:
Funkce dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
V této poslední části nejprve nastavíme datovou proměnnou, kde získáme všechna data, která jsou k dispozici textový formát a poté přidáme data do prvku div, kam chceme prvek umístit.
Udělejte z drop sekce cíl
Demo ukazuje, že dva divy lze přesunout zpět na místo. Naštěstí přidání dalšího cíle je mnohem jednodušší, než si myslíte. Protože tyto funkce již máme a vše, co musíme udělat, je přidat posluchače událostí:
A to je vše, co je potřeba k tomu, aby bylo možné div přetáhnout zpět na místo.
Existuje mnoho aplikací drag&drop, které jsou vytvořeny pomocí JavaScriptu knihovny a často se snáze používají. Ale doufáme, že v tomto HTML5 a JavaScript technika, uvidíte budoucí potenciál pro řešení vašich problémů.
HTML Drag and Drop rozhraní umožňují aplikacím používat funkce přetahování v prohlížečích. Uživatel si může vybrat přetahovatelné prvky pomocí myši přetáhněte tyto prvky do a shazovatelné prvek a pusťte je uvolněním tlačítka myši. Průsvitné znázornění přetahovatelné prvky následují ukazatel během operace přetažení.
Pro webové stránky, rozšíření a aplikace XUL, můžeš přizpůsobit, které prvky se mohou stát přetahovatelné, typ zpětné vazby přetahovatelné prvky produkují a shazovatelné Prvky.
Tento přehled HTML Drag and Drop obsahuje popis rozhraní, základní kroky pro přidání podpory přetahování do aplikace a souhrn interoperability rozhraní.
Přetáhněte události
| událost | Na obslužné rutině událostí | Požár, když… |
|---|---|---|
| táhnout | Ondrag | …A přetažená položka(výběr prvku nebo textu) se přetáhne. |
| dragend | ondragend | …končí operace tažení (jako je uvolnění tlačítka myši nebo stisknutí klávesy Esc; viz Dokončení tažení .) |
| dragenter | ondragenter | …přetažená položka vstoupí do platného cíle přetažení. (Viz Specifikace cílů poklesu.) |
| dragexit | ondragexit | …prvek již není bezprostředním cílem výběru operace přetažení. |
| dragleave | ondragleave | …přetažená položka zanechá platný cíl přetažení. |
| dragover | Ondragover | …přetažená položka je přetahována přes platný cíl přetažení každých několik set milisekund. |
| dragstart | ondragstart | …uživatel začne přetahovat položku. (Viz Spuštění operace přetažení.) |
| pokles | pokles | …položka je vypuštěna na platný cíl umístění. (Viz Provedení dropu.) |
Poznámka: Při přetahování souboru z operačního systému do prohlížeče se nespouštějí ani události dragstart ani dragend.
Rozhraní
Základy
Tato část je souhrnem základních kroků pro přidání funkce přetažení do aplikace.
identifikovat co je přetahovatelné
Vytváření prvku přetahovatelné vyžaduje přidání atributu draggable a obslužné rutiny globální události ondragstart, jak ukazuje následující ukázka kódu:
Tento prvek lze přetáhnout.
Další informace viz:
zvládnout pokles účinek
Obslužná rutina události drop může zpracovávat data přetažení způsobem specifickým pro aplikaci.
Aplikace obvykle používá metodu getData() k načtení položek přetažení a následnému zpracování. Kromě toho se sémantika aplikace může lišit v závislosti na hodnotě
Techniky drag and drop se vyvíjely mnoho let. Není divu, že s nárůstem počtu programátorů vyvíjejících plug-iny s open zdrojový kód(např. pro jQuery) jsou staré metody vzkříšeny. Knihovna JavaScript je vysoce adaptivní a nabízí mnoho vylepšení v tomto věku webových technologií.
V tomto tutoriálu vytvoříme skript, který můžeme použít k vytvoření dynamických obdélníků drag and drop na našem webu. Proces řídí jQuery. Takové skripty šetří čas tím, že poskytují hotové funkce! A knihovnu drag and drop lze použít v jiných projektech.
Připravujeme obsah
Nejprve pro projekt připravíme malý web. Ve složce projektu musíte vytvořit dva adresáře s pozoruhodnými názvy "js" a "css" a prázdný soubor index.html . Kód bude velmi jednoduchý, takže bude jasná představa o práci a bude zde bod pro další vývoj.
Níže je náš kód HTML soubor. V kapitole hlava zahrnujeme 3 skripty. Hlavní skript jQuery bude načten ze serveru Google Code. součástí je i náš soubor style.css, který obsahuje hlavní vlastnosti pro tvarování vzhled náš dokument.
táhni mě
I já se nechám přetáhnout
P.S. Můžete mě hodit kamkoli!