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

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

Dell - Rugged

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

Soulad s normou nemusí znamenat bezpečnost

ALEFNemusíme se vracet daleko do minulosti, aby bylo možné pozorovat IT oddělní velkých společností, jak se soustředí téměř výhradně na efektivitu poskytovaných služeb pro primární účely organizace. Proč také ne? Informační bezpečnost byla výsadou několika málo oborů a většina organizací si vystačila s firewallem a antivirovým programem.

Pokračování ...


IBM POWER

Redakční blog

Pavel Fric

Pavel Fric, 21. August

Sayonara Player 1.5.1

Přehrávač, jak má být. Poslední dobou vývoj šlape


Pavel Fric

Pavel Fric, 26. January

MuseScore 3

První aktualizace třetí řady notačního editoru MuseScore


Redakce

Redakce, 21. December

Pište pro LinuxEXPRES

Baví vás Linux? Pište o něm, není to nic těžkého. LinuxEXPRES hledá nové autory.


Všechny blogy »

Dell - Precision