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

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

POINT.X (2018-19)

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.


reklama

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 a podniká v oblasti informačních technologií. 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, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog