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.