Přetáhněte prvky. Drag-and-drop: způsob manipulace s prvky uživatelského rozhraní

Dlouhou dobu se k vytvoření funkcionality Drag&Drop používaly funkce JavaScriptu, ale ne vždy byly prohlížeče schopny správně zobrazit výsledek. HTML 5 má způsob, jak chytře podporovat Drag&Drop, s trochou JavaScriptu. Tento článek podrobně popisuje vizuální příklad použití Drag&Drop v HTML 5.

Drag&Drop události

• dragStart: Uživatel začne přetahovat prvek.
• dragEnter: Přetahovaný prvek dosáhne koncového prvku.
• dragOver: Při tažení je kurzor myši nad prvkem.
• dragLeave: Kurzor myši opustí přetažený prvek.
• tažení: Kurzor se během tažení pohybuje.
• drop: dojde k pádu prvku.
• dragEnd: Uživatel při tažení uvolní kurzor myši.

objekt dataTransfer

• dataTransfer.effectAllowed=value: Vrátí typ dostupné akce – žádná, kopírovat, kopírovat odkaz, kopírovatPřesunout, odkaz, přesunout odkaz, přesunout, vše nebo neinicializováno.
• dataTransfer.setData(formát, data): přidá data v požadovaném formátu.
• dataTransfer.clearData(formát): vymaže data.
• dataTransfer.setDragImage(element, x, y): nastaví obrázek, který se má přetáhnout na souřadnice kurzoru (0, 0 - levý horní roh).
• data = dataTransfer.getData(formát): vrátí data.

Příklad Drag&Drop

Začněte přetahovat objekt

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 ;)
První řádek specifikuje možný typ drag and drop - move, druhý - nastavuje procesní data - typ (Text) a ID. Ve třetím řádku určuje setDragImage polohu kurzoru, v tomto případě uprostřed čtverce o velikosti 200x200 pixelů.

Dokončete přetahování objektu

funkce dragEnter(ev) ( event.preventDefault(); return true; ) funkce dragOver(ev) ( event.preventDefault(); )

V tomto jednoduchém příkladu jsou nastaveny pouze hlavní akce, ale lze přidat další - změna barvy pozadí, přidání textu atd. Následuje závěrečná fáze. Zde nastavíte akci koncového přetažení:

Funkce dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false; )
Jak můžete vidět z příkladu, modré bloky lze po přetažení vrátit na původní místo. Naštěstí je to velmi snadné. Všechny funkce jsou deklarovány, zbývá přidat následující kód:

Závěr

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 shromažďovat a získávat různými způsoby, z nichž nejdůležitější jsou:

• dataTransfer.effectAllowed=value: Vrátí povolené typy akcí, možné hodnoty jsou none, copy, copyLink, copyMove, link, linkMove, move, all a uninitialized.
• 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 pak bude kurzor při tažení a jelikož 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 pádu, 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 proměnnou data, kde získáme všechna data, která jsou k dispozici pro textový formát, a poté přidáme data do 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í knihoven JavaScriptu a jejich použití je často jednodušší. Doufáme však, že v této technice HTML5 a JavaScriptu uvidíte budoucí potenciál pro řešení vašich problémů.

Rozhraní HTML Drag and Drop umožňují aplikacím používat funkce drag and drop ve Firefoxu a dalších prohlížečích. Například s těmito funkcemi si uživatel může vybrat přetahovatelné prvky pomocí myši přetáhněte prvky do a shazovatelné prvek a uvolněte tyto prvky uvolněním tlačítka myši. Průsvitné znázornění přetahovatelné prvky sledují ukazatel myši během operace tažení.

U webových stránek, rozšíření a aplikací XUL můžete přizpůsobit typy prvků, které se mohou stát přetahovatelné prvky a typ zpětné vazby přetahovatelné prvky produkují a shazovatelné Prvky.

Tento dokument je an přehled přetažením HTML. Obsahuje popis rozhraní, základní kroky pro přidání podpory přetažení do aplikace a shrnutí interoperability rozhraní.

Přetáhněte události

Základy

Tato část obsahuje souhrn základních kroků pro přidání funkce přetažení do aplikace. Každá část obsahuje popis kroku, krátký příklad kódu a odkazy na další informace.

identifikovat co je přetahovatelné

Chcete-li vytvořit prvek přetahovatelné vyžaduje přidání atributu draggable plus obslužnou rutinu globální události ondragstart, jak je znázorněno v následující ukázce kódu

Funkce dragstart_handler(ev) ( console.log("dragStart"); // Přidání id cílového prvku do objektu přenosu dat ev.dataTransfer.setData("text/plain", ev.target.id); )

Tento prvek lze přetáhnout.

Definujte obrázek přetažení

Ve výchozím nastavení poskytuje prohlížeč obrázek, který se objeví vedle ukazatele myši během operace přetažení. Aplikace však může definovat vlastní obrázek pomocí prvku, ale může to být také a nebo jakýkoli jiný prvek obrázku."> metodu setDragImage(), jak ukazuje následující příklad.

Funkce dragstart_handler(ev) ( // Vytvořte obrázek a poté jej použijte pro obrázek přetažení. // POZNÁMKA: změňte "example.gif" na existující obrázek, jinak obrázek // nebude vytvořen a výchozí obrázek přetažení bude used.var img = new Image(); img.src = "example.gif"; ev.dataTransfer.setDragImage(img, 10, 10); )

Drag&Drop je jedním ze způsobů sdílení dat mezi aplikacemi. Tento způsob výměny používá mnoho softwarových aplikací. Tímto způsobem se například velmi často přesouvají soubory a složky.

Vizuální knihovna komponent - VCL implementuje vlastní verzi Drag&Drop, technologie, která zajišťuje příjem a přenos jakýchkoliv ovládacích prvků v rámci stejné formy. Při tomto interním použití VCL nekomunikuje s operačním systémem, i když by pro organizaci komunikace mezi různými aplikacemi musely být použity příslušné funkce Windows API.

Uživatel může stisknutím levého tlačítka myši přetáhnout ovládací prvek (zdrojový objekt) na jiný prvek (cílový objekt). V okamžicích přetažení se generují události, které musí program zpracovat (přijímač událostí je prvek, nad kterým je umístěn kurzor myši). Vlastnost DragMode komponent je zodpovědná za jejich účast v procesu výměny dat.

DragMode=dmAutomatic- události jsou spouštěny automaticky, programátor zapisuje pouze kódy odpovídajících handlerů událostí.

DragMode=dmManual- programátor si musí všechny hovory organizovat sám.

Přetahování událostí

Událost OnDragOver nastane, když se kurzor myši přesune nad cílový objekt, stejně jako když se uvolní tlačítko na tomto objektu.

Parametry události:

Odesílatel - objekt příjemce (kurzor je nad ním);

Zdroj - zdrojový objekt;

X,Y - souřadnice myši v systému klientské oblasti objektu Sender;

State-state (má jednu ze tří hodnot ​​dsDragEnter - kurzor myši se objevil nad prvkem; dsDragMove se kurzor přesune nad prvek; dsDragLeave - kurzor opustil prvek nebo bylo tlačítko uvolněno nad prvkem).

Accept je booleovská proměnná. V této proměnné musí obsluha vrátit své rozhodnutí přijmout nebo nepřijmout zdrojový objekt.

Například komponenta třídy Label(Name=Label1) by měla přijímat pouze komponenty třídy Shape (geometrické tvary), pak její handler bude obsahovat kontrolu přenosného zdrojového objektu (Source):

void __fastcall TForm1::Label1DragOver(TObject *Sender, TObject *Zdroj,

int X, int Y, TDragState State, bool &Accept)

Accept=Source->ClassNameIs("TShape");

událost OnDragDrop nastane, když uvolníte levé tlačítko myši nad prvkem, který je připraven k příjmu. Jeho parametry Sender, Source, X a Y mají stejný význam jako předchozí událost. Obsah tohoto handleru závisí na tom, jaké funkce umožňuje programátor uživateli provádět pomocí drag and drop. Může se jednat o změnu umístění objektů, výměnu informací atp.

V následujícím příkladu nedochází k žádnému fyzickému pohybu objektů; komponenta Label1 přijme ukazatel na přesouvaný objekt (geometrický obrazec) a přečte hodnoty vlastností (Výška, Šířka) pro výpočet obvodu obrazce. Výsledek výpočtu je umístěn v Label1-> Caption.

void __fastcall TForm1::Label1DragDrop(TObject *Sender,

TOObject *Zdroj, int X, int Y)

plovák p, p = 3,14; int w, h, r, D;

if (String(Source->ClassName())=="TShape")

h=((TShape *)Zdroj)->Výška;

w= ((TShape *)Source)->Width ;

D = w; jestliže (D > h) D = h;

přepínač (((TShape *)Source) -> Shape)

( případ strRectangle:

Label2->Caption ="Obdélník";

Label2->Caption = "Čtverec";

Label2->Caption = "Kruh";

Label2->Caption = "Elipsa";

p=pi*(3*(š+v)/4-sqrt(š*v)/2);

případ strRoundRect:

Label2->Caption = "Zaoblené

obdélník";

r=(D-((TShape*)Zdroj)->Pero->

p=2*(š+v)-8*r+2*pi*r;

pouzdro strRoundSquare:

Label2->Caption="Zaoblený

náměstí";

r=(D-((TShape*)Zdroj)->Pero->

p=4*D-8*r+2*pi*r;

p=p/(Formulář1->PixelsPerInch/2,54);

Label1->Caption = FloatToStr(p);

Když proces přetažení skončí, bez ohledu na jeho výsledek obdrží původní objekt Událost OnEndDrag. Jeho parametry jsou:

Sender - ukazatel zdrojového objektu;

Target– ukazatel cílového objektu;

X, Y – souřadnice kurzoru.

V následujícím příkladu se komponenta wrapperu Shape1 naučí název cílového objektu (pokud objekt není přijat, předá se NULL):

void __fastcall TForm1::Shape1EndDrag(TOobjekt *Sender, TObject *Target,

if (Cíl != NULL)

Label2->Caption =(AnsiString) ((TComponent *) Target)->Name;

Přemýšleli jste někdy, jakou plochu používají zatvrzelí Linuxoidi, kteří většinu času sedí v terminálu, a věci jako ikony na ploše a drag’n’drop byly buď zapomenuty, nebo nikdy rozpoznány? Ti divní lidé, kteří na každé kýchnutí píší skript shellu a znechuceně se dívají na KDE a GNOME. No a dnes si ukážeme, jak nastavit skutečnou geekovskou plochu s dlaždicemi, stavovými řádky a terminály.

Začněme výběrem distribuce. Ubuntu, Mint, Debian a Fedora nejsou vhodné distribuce pro opravdového geeka. Není na nich nic špatného, ​​ale pokud si dáte pozor na to, co používají příznivci vybírání systému, pak s největší pravděpodobností uvidíte Arch Linux, Gentoo nebo Slackware. Tyto distribuce jsou jednoduché jako boot a umožňují jemné ovládání systému.

Zaměřme se na Arch Linux, dnes nejoblíbenější distribuci pro geeky. Čerstvě nainstalovaný Arch Linux je jednoduchá konzolová distribuce, která nic nedělá. Nejkonzervativnější soudruzi, kteří ovládali UNIX ještě v osmdesátých letech, toho budou mít dost, ale přesto potřebují alespoň nějaké grafické rozhraní a grafický prohlížeč (ano, existují i ​​textové, např. Lynx, w3m, odkazy, ELlinky).

V systémech podobných UNIXu (který samozřejmě zahrnuje Linux) je za tvorbu grafického rozhraní primárně zodpovědný tzv. správce oken (WM). Jedná se o speciální aplikaci, jejímž hlavním úkolem je spravovat okna, vytvářet pro ně rámečky s tlačítky, správně řešit situace, kdy se okna překrývají, a v některých případech vytvářet panely a nabídky pro spouštění aplikací a jejich správu; i když tato úloha většinou padá na bedra jiných aplikací, které spolu se správcem oken tvoří kompletní pracovní plochu (Desktop Environment, DE), jako je GNOME, KDE nebo Xfce.

Nepotřebujeme žádné DE, to je vynález čertů, kteří přišli do světa UNIXu z Windows. Navíc nepotřebujeme klasického správce oken, protože přesouvání oken pomocí myši a jejich překrývání je kontraproduktivní. Místo toho nainstalujeme tzv. dlaždicového správce oken, který neumožňuje přetahování oken po obrazovce, ale místo toho buď vždy otevře všechna okna na celou obrazovku, nebo proporcionálně (či neproporcionálně) rozdělí obrazovku mezi okna, čímž zabrání aby se navzájem nepřekrývaly.

Pravděpodobně nejlepší dlaždicový správce oken, který je dnes k dispozici, je i3. Pojďme to nainstalovat:

$ sudo pacman -S i3-wm

Aniž bychom opustili pokladnu, okamžitě nainstalujeme i3status (zobrazí stavový řádek s různými užitečnými informacemi a zásobník ve spodní části obrazovky), stejně jako malou aplikaci dmenu, která vám umožní rychle spouštět aplikace a samozřejmě emulátor terminálu:

$ sudo pacman -S i3status dmenu xterm

Pokud se skutečně jedná o čistou instalaci Arch Linuxu, budete také potřebovat server Xorg, ovladač grafické karty a ovladač touchpadu (pokud se jedná o notebook):

$ sudo pacman -S xorg-server xf86-video-intel xf86-input-synaptics

Balíček xf86-video-intel změníme na ten, který potřebujete, v závislosti na výrobci video čipu:

• Nvidia: xf86-video-nouveau
• ATI/AMD: xf86-video-ati.

Dále budeme potřebovat správce přihlášení – stejné grafické okno s poli pro zadání uživatelského jména a hesla, které vidíte při startu systému. Nikdo nezakazuje používat správce přihlášení KDE, GNOME, Xfce nebo jakékoli jiné grafické prostředí, ale jde o velmi těžké aplikace, které s sebou tahají spoustu zcela zbytečných závislostí. Proto se zaměříme na jednoduchý a rychlý správce přihlášení SLiM:

$ sudo pacman -S slim

Nejprve opravíme jeho konfiguraci /etc/slim.conf přidáním následujícího řádku:

aktuální_téma archlinux

Ihned po úspěšném přihlášení SLiM spustí obsah souboru ~/.xsession, který má provést počáteční nastavení uživatelského prostředí a spustit správce oken. Tradice nebudeme měnit a do souboru přidáme následující řádky:

# Určete preferovaný jazyk pro systémové rozhraní a aplikace # Smažte tyto řádky, pokud chcete export do angličtiny LANG=ru_RU.utf8 export LC_ALL=ru_RU.utf8 # Nastavte přepínač rozložení mezi ruštinou a angličtinou pomocí klávesy Caps Lock setxkbmap "us,ru " ", winkeys" "grp:caps_toggle,grp_led:caps" # Vypnout nepříjemné pípání xset b off # Spustit i3 exec i3

To je vše, nyní můžete spustit GUI:

$ sudo systemctl start slim

Na obrazovce by se mělo objevit přihlašovací okno SLiM.

i3 a dmenu

Takže před vámi i3. Přesněji řečeno, měli byste vidět pouze černou obrazovku se stavovým řádkem níže (zobrazuje aktuální zaplnění disku, připojená síťová rozhraní, stav baterie, datum a čas). Žádné menu, startovací tlačítka nebo jiné kecy.

i3 je plně ovládán klávesnicí. Win + Enter spustí terminál (teď je to ubohý xterm, ale nahradíme ho). Ve výchozím nastavení okna zabírají celou plochu obrazovky a vertikálně ji rozdělují na dvě, tři, čtyři nebo více částí. Toto chování lze deaktivovat stisknutím Win + w, čímž se každé okno otevře na celou obrazovku - to je téměř ideální pro notebooky s úhlopříčkou obrazovky 10-13".

Přepínání mezi okny - Win + šipky; Win + 1…0 - přepínání mezi plochami, zde nazývanými pracovní prostory (Workspace). Pro zavření okna stiskněte Win + Shift + Q. V této fázi budou tyto kombinace stačit.

Win + d je speciální kombinace. Otevře dmenu, vstupní řádek v horní části obrazovky, který vám umožní rychle spouštět aplikace, které potřebujete. Ve svém jádru je dmenu hodně podobné univerzálnímu vyhledávacímu panelu typu Spotlight v macOS: stačí začít psát název aplikace a vyzve vás k výběru možností. Funguje také automatické doplňování. V i3 lze dmenu nazvat obdobou nabídky aplikace v klasických desktopech.

i3 podporuje spoustu možností pro rozdělení obrazovky na pracovní plochy, abyste v nich mohli uspořádat různé aplikace. K dispozici je také klasický režim plovoucích oken. Do tohoto režimu přepnete aktuální aplikaci pomocí kombinace Win + Shift + mezerník. Okno můžete táhnout myší při držení klávesy Win, měnit jeho velikost pravým tlačítkem myši, opět se stisknutým tlačítkem Win.

Písma, terminál a zápisník

Standardně i3 používá dost fádní standardní font Xorg a jako emulátor terminálu jsme nainstalovali špatný xterm, o který už dávno chtěli pohřbít nejen uživatelé, ale i samotní vývojáři (nedělám si legraci). To je potřeba napravit.

Začněme písmem. O volbě konzolového monospace fontu se hodně diskutuje (to je to, co potřebujeme, včetně i3), ale doporučuji zastavit se u Terminusu. Je to ostré bezpatkové písmo s minimem kulatých tvarů, je velmi čitelné a skvělé pro non-Retina displeje (a také Retina). Nainstalujte:

$ sudo pacman -S terminus-font

Také s emulátorem terminálu není vše jasné. Po mnoho let byl urxvt (rxvt-unicode) považován za standard. Je lehký, rychlý a vysoce přizpůsobitelný. Ale protože nemůžeme jít do detailů hlubokého přizpůsobení každé komponenty v rámci tohoto článku (a urxvt je bez takového přizpůsobení hrozný), zaměříme se na LilyTerm. Je rychlý, má minimální závislosti a všechny výhody urxvt a lze jej konfigurovat pomocí kontextové nabídky:

$ sudo pacman -S lilyterm

Nyní musíme provést změny v souboru nastavení i3 tak, aby převzal naše písmo a použil LilyTerm místo standardního terminálu. Otevřete soubor ~/.config/i3/config, najděte možnost písma a změňte jeho hodnotu:

Písmo pango:xos4 Terminus 8

Chcete-li spustit LilyTerm na Win + Enter, přidejte následující možnost:

Bindsym $mod+Return exec lilyterm

No, možnost spustit dmenu s naším písmem:

Bindsym $mod+d exec dmenu_run -fn "xos4 Terminus-8"

Plus pár řádků pro aktivaci takzvaného zápisníku:

Bindsym $mod+Shift+minus přesun zápisník bindsym $mod+mínus zápisník show

Zápisník v terminologii i3 je malé okno přístupné klávesovou zkratkou uprostřed obrazovky. Dobře se hodí pro aplikace, které jsou potřeba často, ale ruší, protože jsou neustále na obrazovce (ano, pro instant messengery). Win + minus zobrazí zápisník, další stisknutí jej skryje. Win + Shift + minus odešle aktuální okno do zápisníku.

Po dokončení všech změn uložte soubor a stisknutím kláves Win + Shift + R restartujte i3.

Pokračování dostupné pouze pro předplatitele

Možnost 1. Chcete-li si přečíst všechny materiály na webu, přihlaste se k odběru „Hacker“.

Předplatné vám umožní číst VŠECHNY placené materiály webu během stanoveného období. Přijímáme platby bankovními kartami, elektronickými penězi a převody z účtů mobilních operátorů.