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

Linux E X P R E S, jQuery (17) – přesun objektů myší v jQuery UI

jQuery (17) – přesun objektů myší v jQuery UI

jquery.png

Jednou z hlavní oblastí využití nadstavbového frameworku jQuery UI jsou uživatelské interakce. Oproti základnímu jQuery lze web podstatně více „rozpohybovat“, například s jeho součástmi snadno pohybovat myší.


Posouvání objektů myší

Představme si například nějaký nástrojový panel, který chceme mít na stránce tam, kde nepřekáží a kde je naopak co nejvíc při ruce. Vhodné místo se ale může měnit podle toho, co člověk zrovna dělá. Proto není nic jednoduššího, než si panel posunout myší.

Existují na to v zásadě dvě cesty. Lze si vše potřebné naimplementovat ručně, nebo využít prostředků jQuery UI a přidat jen zcela triviální kus kódu. Můžeme mít třeba takovýto kus HTML kódu reprezentující panel s tlačítky:

<div id="toolbar">
  <button id="button1"></button>
  <button id="button2"></button>
  ...
</div>

Udělat panel přetahovatelný lze s jQuery UI velmi snadno:

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

To je opravdu všechno, pokud není třeba nic speciálního. Od zavolání této metody lze s panelem hýbat myší. Metoda draggable() ovšem přijímá parametry, s jejichž pomocí lze dělat další „kouzla“. Chcete třeba povolit pouze svislý posun a během něj nechat panel částečně zprůhlednět? Žádný problém:

var param = {
  axis: 'y',
  opacity: 0.5
};
$('#toolbar').draggable(param);

Panel se může také třeba přichytávat k jiným objektům (s nastavitelnou tolerancí):

var param = {
  snap: true,
  snapTolerance: 10
};
$('#toolbar').draggable(param);

Podobných vlastností je k dispozici celá řada, bližší informace najdete v dokumentaci.

Zjišťování a změny parametrů

Hodnoty nastavených parametrů lze podle potřeby zjišťovat a měnit. Chceme-li například zjistit, jak je nastavena tolerance přichytávání (viz výše), stačí zavolat:

var tol = $('#toolbar').draggable('option', 'snapTolerance');

Obdobně se nastavená hodnota také změní:

$('#toolbar').draggable('option', 'snapTolerance', 5);

Můžeme získat také všechny parametry najednou, budou uloženy do objektu, jehož položky budou odpovídat jednotlivým parametrům.

var opts = $('#toolbar').draggable('option');
 var tol = opts.snapTolerance;

Uvedený kód dělá totéž jako ten výše, tedy zjišťuje nastavenou toleranci přichytávání. Tento způsob má ale logiku až při práci s více parametry najednou.



Vypnutí a zrušení posuvnosti

Někdy můžeme potřebovat nastavenou posuvnost vypnout nebo zcela zrušit. Jaký je mezi oběma operacemi rozdíl? Vypnutí jen zruší možnost posouvat objekt myší, všechny parametry však zůstanou nastaveny a uplatní se po případném opětovném zapnutí:

$('#toolbar').draggable('disable');

Obdobně se posuvnost zase povolí:

$('#toolbar').draggable('enable');

Úplné zrušení posuvnosti oproti tomu znamená, že se nastavení parametrů vymaže a vše se uvede do původního stavu, jako kdyby objekt nikdy posuvný nebyl.

$('#toolbar').draggable('destroy');

Události související s posouváním

Při posouvání objektů nastávají různé události a může být užitečné na ně nějak reagovat. Typickým příkladem může být uložení nové pozice přemísťovaného objektu (ať už do prohlížeče nebo na server).

var param = {
  stop: function() {
    localStorage.setItem('toolbar', JSON.stringify($(this).offset()));
  }
};
$('#toolbar').draggable(param);

Kód v příkladu nastaví obsluhu události ukončení posunu, tedy uvolnění tlačítka myši po přesunu. Obslužná funkce uloží do lokálního úložiště (v prohlížeči) pozici panelu, kterou lze při obnovení stránky nebo jiných situacích zpět načíst a použít. Pozici lze získat jak z objektu (použito v příkladu), tak i z druhého parametru předávaného do obslužné funkce.

Podobně lze reagovat na začátek přesouvání, na samotný posun (než proběhne; událost nastává během pohybu, aniž by byl objekt „upuštěn“) a na nastavení posouvatelnosti. Obslužnou funkci lze nastavovat i po počátečním zapnutí posouvatelnosti:

$('#toolbar').on('dragstop', function() {});

Uvedený kód nastaví prázdnou funkci, obdobně by se nastavila i funkce, která něco dělá. Využití metody on() má výhodu v univerzálnosti použití, podrobnosti najdete v desátém dílu seriálu. Nabízí se samozřejmě také metoda one(), pokud je potřeba zavolat obsluhu pouze jednou. Příslušná událost se vždy jmenuje drag*, kde je místo hvězdičky název události podle dokumentace jQuery UI (tedy pro stop je to dragstop apod.).

Drag & drop

S přetahováním objektů souvisí také jejich pouštění. Někdy potřebujeme větší interaktivitu než jen ponechání objektu na novém místě. Pak se do akce zapojí také objekt na místě, kde přetahovaný objekt upustíme. Příště se tedy podíváme na to, co tento druh interakce umožňuje a jak ho využívat.

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