přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (18) – drag&drop v jQuery UI

Kingston - velká jarní soutěž

jQuery (18) – drag&drop v jQuery UI

jquery.png

Kromě obyčejného přesouvání objektů myší umožňuje jQuery UI využít také technikou známou jako drag&drop, tedy tažení a upuštění. Do interakce se tak zapojí i objekt, na který přetahovaný objekt pouštíme.


Stručně o drag&drop

Technika „drag&drop“, tedy česky „táhni a pusť“, se v grafických uživatelských rozhraních vyskytuje už velmi dlouho a uživatelé si tedy zvykli přetahovat myší různé objekty na jiné objekty, které pak s přetaženými a upuštěnými objekty nějak nakládají. Například při přetažení ikony souboru v souborovém správci na ikonu adresáře se soubor přesune či zkopíruje do daného adresáře.

Podobně, jako jsme zvyklí používat tuto techniku u běžných desktopových aplikací, ji už delší dobu celkem běžně využíváme i na webu (nebo dokonce v kombinaci obojího). Zrovna zmíněný správce souborů může být realizován i webově a tam se právě tento přístup výborně uplatní, podobných případů je ale mnoho.

První fází  drag&drop je prosté přetahování objektu, druhou pak jeho upuštění. V ten okamžik je cílový objekt uvědoměn o tom, že se mu předávají data a o jaká data jde. Může se tedy rozhodnout, zda je vůbec přijme, a pokud ano, jak s nimi naloží.

Drag&drop v jQuery UI

Framework jQuery UI implementuje tuto techniku pomocí kombinace přetahování (viz minulý díl) a pouštění (realizovaného speciálním widgetem). Objekt, který má být způsobilý k tomu, aby se na něj něco upustilo, je potřeba připravit jako widget Droppable. To se zařídí podobně jako u objektu určeného k přetahování – Draggable.

<div id="draggable"></div>
<div id="droppable"></div>

Tento kus HTML vytvoří ve stránce jeden element, který půjde přemísťovat myší, a druhý, do kterého půjde ten první upustit. Tohle samo o sobě ještě samozřejmě neudělá nic. Je potřeba to teprve „oživit“:

$('#draggable').draggable();
$('#droppable').droppable();

Reakce na upuštění

Výše uvedený kód je zcela základní a jen zprovozní fungování drag&drop. Nezajistí nic dalšího, sice tedy půjde objekt přetáhnout a pustit, nic dalšího se ale nestane. Je totiž potřeba implementovat reakci na upuštění. Druhý řádek tedy přepíšeme do složitější podoby:

$('#droppable').droppable({
  drop: function() {
    alert('Upuštěno!');
  }
});

Reakce na událost drop v tomto případě spočívá pouze v oznámení, že bylo něco upuštěno. Obvykle chceme ale něco zajímavější, například vložit přesouvaný objekt do toho, na který se upustí. Samozřejmě není problém to realizovat:

$('#droppable').droppable({
  drop: function(event, ui) {
    $(this).append(ui.draggable);
  }
});

Filtrace upustitelných objektů

Nyní cílový objekt přijme cokoli přetahovatelného, co na něj upustíme. Jenže to nemusí být vždy správné. Jak například zařídit, aby cílový objekt přijímal jen odstavce textu? Jednoduše:

$('#droppable').droppable({
  accept: 'p',
  drop: ...
});

Funkce přiřazená jako drop bude stejná jako v předchozím případě, nový je tu pouze parametr accept. Do něj lze vložit selektor (zde „p“, tedy odstavec) nebo funkci, která vrátí true v případě, je je objekt akceptován.

Zvýraznění cílového objektu

Dalším požadavkem může být, aby se cílový objekt nějak zvýraznil a tedy uživatel věděl, kam může přetahovaný objekt pustit. Lze například použít parametr activeClass:

$('#droppable').droppable({
  activeClass: 'text-droppable'
  ...
});

Parametrem se určí třída, která se přidá v okamžiku, kdy je tažen nějaký objekt, který sem lze pustit. Třídě se pak nastaví nějaké vizuální vlastnosti, třeba barevné pozadí, rámeček nebo něco takového.

Všechny widgety Droppable získávají automaticky třídu ui-droppable, kterou lze také využít k tomuto účelu, není však selektivní. Nastavení této třídy lze zakázat nastavením parametru addClasses na hodnotu false.

Má-li se cílový objekt zvýraznit až v okamžiku, kdy se něco akceptovaného táhne přes něj, využije se k nastavení třídy parametr hoverClass. Podobně je k dispozici také možnost reagovat na události, které s tím souvisejí.

$('#droppable').droppable({
  over: function() {
    $(this).fadeTo(500, 0.5);
  },
  out: function() {
    $(this).fadeTo(500, 1);
  }
  …
});

Událost over nastane při vstupu přetahovaného objektu nad cílový – zde to spustí postupné zprůhledňování (až na 50 % za 500 ms). Naopak událost out nastane při opuštění cílového objektu a zde se na ni reaguje opětovným zneprůhledněním.

Další vlastnosti Droppable

Ještě jedna důležitá věc si zaslouží zmínku – tzv. hladovost. Pokud lze objekt upustit na nějaký objekt, který má pod sebou další potomky, na které lze něco upustit, bude upuštění znamenat, že událost nastane v celé hierarchii a to nemusí být vždy žádoucí. Pak lze parametr greedy nastavit na true, tím nejnižší objekt v hierarchii „sežere“ upuštěný objekt a ten už se výše do hierarchie nedostane.

Vlastnosti widgetu Droppable lze měnit i později, podobně jako je tomu u Draggable (nebo zjišťovat jejich hodnoty). Protože k tomu dost informací najdete v minulém dílu, bude zde stačit krátký příklad na ukázku:

$('#toolbar').droppable('option', 'greedy', false);

Tímto příkazem se nastaví již zmíněný parametr greedy na hodnotu false. Minulý díl obsahuje také informace o tom, jak widget deaktivovat, opětovně aktivovat a úplně odstranit. Tady je to úplně stejné.

Změna rozměrů pomocí myši

Příští díl bude věnován dalšímu typu uživatelské interakce, a to změně rozměrů různých prvků pomocí myši.

Nahoru

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře, podniká v oblasti IT a zároveň pracuje v týmu projektu Turris. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Kubuntu, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog



Public Relations

Je možné nasadit aplikaci za jediný týden?

CiscoJestli jste někdy řešili nasazování aplikace, asi víte, že všechno odladit může být celkem zdlouhavá záležitost. Dokážete si představit, že na to máte jen týden? Že je to nemožné? Není! Jde to a ani to nemusí být příliš složité.

Pokračování ...


Kingston - velká jarní soutěž

Public Relations

Jak bezpečné jsou bezpečnostní kamery? Nezmeškejte konferenci Axis Talk 2021

AxisÚtoky hackerů čím dál častěji míří na kamerové systémy. Jak se účinně bránit? I to bude tématem online konference společnosti Axis Communications, švédského světového leadera v bezpečnostních a smart city technologiích. Připojte se 20. a 21. dubna!

Pokračování ...


Redakční blog

Pavel Fric

Pavel Fric, 10. April

Zapojte se do tvorby distribuce Mageia

Podílejte se na vytváření balíčků pro Mageiu, dělejte, co je potřeba, staňte se baličem


Pavel Fric

Pavel Fric, 13. March

Lollypop

Lollypop je hudební přehrávač navržený, jak ukazuje jeho podoba, aby výborně zapadl do pracovního...


Pavel Fric

Pavel Fric, 26. February

QElectroTech

Kreslení elektrotechnických i jiných výkresů


Všechny blogy »

Kingston - velká jarní soutěž