Linux E X P R E S, jQuery (20) – změna pořadí prvků myší v jQuery UI

Jak se neuklikat

Seznamy nebo mřížky s různými položkami se v aplikacích vyskytují velmi často. Mohou být uspořádávány automaticky nebo ručně. Ve starších aplikacích se ruční změna pořadí často řešila tlačítky. Takové řešení je ale v rozporu s požadavky na moderní uživatelské rozhraní, nelze uživatele nutit k tomu, aby se „uklikal“.

Přirozenější je uchopit položku myší a přetáhnout ji tam, kde by nově měla být. V rozšířené podobě to znamená i přesouvání celých skupin položek, souvislých i nesouvislých (z předem vybraných položek). Změnit si pořadí touto cestou je pohodlné a rychlé.

Implementace pomocí jQuery UI

Framework jQuery UI má připravenu podporu takového přesouvání prvků v seznamech a mřížkách. Její použití je jednoduché a současně flexibilní. Základem je widget Sortable, který disponuje celou škálou parametrů umožňujících měnit chování přesouvacích operací.

Widget se nastaví tomu objektu, který bezprostředně (tedy jako své potomky) obsahuje položky, s nimiž chceme pracovat. Toto znamená, že pokud se mají řadit řádky tabulky, je potřeba nastavit widget elementu tbody (případně thead nebo tfoot, pokud se to týká záhlaví, resp. zápatí), nikoli elementu table.

$('tbody.sortable').sortable();

Příklad ukazuje nejjednodušší použití widgetu. V tomto případě se nastaví právě tělu tabulky a umožňuje řadit její řádky.

Parametrizace přesunu položek

Často potřebujeme nějak ovlivnit to, jak bude ruční řazení probíhat. Například můžeme změnit citlivost (viz díl o přesunu objektů myší):

var opts = {
  distance: 3,
  delay: 100
};

$('tbody.sortable').sortable(opts);

Příklad udělá totéž, jako ten první – tedy zapne ruční řazení. V tomto případě ale také zvýší toleranci na 3 pixely a dobu reakce na 100 ms (obě nastavení mají za cíl zabránit nechtěné změně pořadí při intenzivní práci s myší).

var opts = {
  opacity: 0.5,
  grid: [10, 10]
};

$('tbody.sortable').sortable(opts);

Tento příklad nastaví 50% průhlednost přesouvaných položek a dovolí pohyb jen v definovaných krocích (tedy zde 10 pixelů).

Řazení v mřížce

Podobně jako položky v seznamu (například řádky tabulky) lze řadit i položky v mřížce (například buňky tabulky). Tady neplatí pravidlo o bezprostředních potomcích, protože potřebujeme řadit položky o dvě úrovně níže.

var opts = {
  items: '> tr > td'
};

$('tbody.sortable').sortable(opts);

Parametr items změní chování widgetu tak, že se nyní pracuje s jinými objekty, než jsou bezprostřední potomci. Hýbat jde tedy s buňkami, a to po celé tabulce. Občas ale potřebujeme, aby byl přesun možný jen v řádcích nebo sloupcích. I to lze snadno zajistit:

var opts = {
  items: '> tr > td',
  axis: 'x'
};

$('tbody.sortable').sortable(opts);

Teď už lze buňky přesouvat jen v řádcích. Použije-li se „y“, bude se přesouvat ve sloupcích.

Události při přesunu

Všechny výše uvedené příklad předpokládají, že není potřeba na změnu pořadí položek nějak bezprostředně reagovat a například uložení změny pořadí se provede někdy později (třeba po stisku ukládacího tlačítka). Často má ale aplikace reagovat na přeuspořádání položek hned.

var opts = {
  update: function(e, ui) {
    …
  }
};

$('tbody.sortable').sortable(opts);

Událost update nastane v okamžiku, kdy změna pořadí skončí a došlo ke změně v DOM (tedy opravdu nastala změna, nešlo jen o „jalové“ hýbání s položkou). V obsluze lze například odeslat na server požadavek na uložení nového pořadí položek.

Je k dispozici i řada dalších událostí – například start (začátek změny řazení), stop (konec, bez ohledu na to, jestli nastala změna v DOM) nebo out (položka opustila seznam). Události out, over, remove a receive souvisí se změnou mezi různými seznamy. Ty musejí být vzájemně propojeny pomocí connectWith.

var opts = {
  remove: function() {
    …
  },
  receive: function() {
    …
  }
};

$('tbody.sortable tr').sortable(opts);
$('#row1').sortable('option', 'connectWith', '#row2');
$('#row2').sortable('option', 'connectWith', '#row1');

Je-li položka definitivně přesunuta do jiného seznamu, nastanou události remove (pro původní seznam) a receive (pro nový). Nedokončené přesuny (trvající) generují události out a over.

Změna chování operace

Běžně se předpokládá, že bude widget Sortable pouze měnit pořadí. Ale jsou případy, kdy tomu má být jinak. Speciální chování se docílí použitím určitého pomocného objektu (helper). Již připraven je helper pro klonování (místo přesunu původní položky se pracuje s její kopií).

var opts = {
  helper: 'clone'
};

$('tbody.sortable').sortable(opts);

Lze ovšem použít také vlastní funkci, která rozhodne, se kterou položkou se bude manipulovat. Může tak reagovat třeba na stisk kláves nebo si s daty naložit úplně podle svého.

K dispozici je ještě řada dalších parametrů, ovlivňujících například kontejner pro pohyb položek, typ a chování kurzoru, pohyb viewportu (obrazovky) při přesunu za hranu viditelné oblasti nebo určení handlu (prvku, za který lze položku uchopit k přesunu). Podrobnosti najdete v dokumentaci k jQuery UI.

Kde je manipulace se skupinami?

Tuto otázku může oprávněně položit každý, kdo si nahoře přečetl, že lze manipulovat s celými skupinami položek. Opravdu s nimi manipulovat lze, k tomu ale nejdřív potřebujeme položky vybrat. Na to se podíváme v příštím dílu.