Drag & Drop s jQuery UI

Než se pustíme do několika praktických příkladů, podívejme se na metody Drag and Drop, které pro nás má uživatelské rozhraní jQuery.
1- Přetažitelná metoda ()
Metoda přetažení spravuje prvky stránky HTML, kterou chcete přesunout, tuto metodu lze použít dvěma různými způsoby:

 • $ (volič, kontext) .draggable (možnosti) • $ (volič, kontext) .draggable („akce“, parametry) 

Podívejme se na příklad:
Nejprve musíme zahrnout potřebné soubory, častou chybou je zahrnout uživatelské rozhraní jQuery .js před jQuery .js, pamatujte, že jQuery je jádro a uživatelské rozhraní jQuery jsou pouze knihovny, doplňky, widgety, které bez jQuery nebudou by fungoval.

Vyvoláme metodu:

 $ (funkce () {$ ("#draggable") .draggable ();}); 

A spojíme to s voličem, který s tím bude div.

Táhni mě kolem

Zde je kompletní zdrojový kód:

 Přetahovatelné uživatelské rozhraní jQuery - výchozí funkce
Táhni mě kolem

2- metoda droppable ()
Metoda droppable spravuje prvky stránky HTML, kterou chcete vložit do oblasti. Stejně jako metodu přetažení lze použít dvěma různými způsoby:

 • $ (selector, context) .droppable (možnosti) • $ (selector, context) .droppable („akce“, parametry) 

Podívejme se na příklad tohoto:
Zahrneme soubory, přidáme styly, vyvoláme metody (zde budeme stejně používat metodu přetahování) a poté metodu droppable. Zde zdrojový kód:

 Rozbalitelné uživatelské rozhraní jQuery - výchozí funkce
Přetáhněte mě k mému cíli
Pusťte se sem

A toto by byl náš výstup v prohlížeči:

Co kdybychom oba koncepty spojili ve složitějším příkladu, něco jako nákupní košík? Uvidíme:
Nejprve přidáme naše soubory:

Do košíku přidáváme několik stylů:

K zatraktivnění našeho košíku použijeme také metodu akordeon () z knihovny uživatelského rozhraní jQuery, vyvoláme naše metody a spojíme je s voliči, v tomto případě rozšíříme veškerou funkčnost metody přetažení na seznam:

A takto by náš nákupní košík vypadal:

Abyste to mohli otestovat, zde je kompletní zdrojový kód:

 Rozbalovací uživatelské rozhraní jQuery - ukázka nákupního košíku
Trička

Košile Lolcat
Tričko Cheezeburger
Tričko Buckit


Tašky

Zebra pruhovaná
Černá kůže
Kůže aligátora


Gadgets

iPhone
iPod
iPad


Sem přidejte své položky

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod