✅ Przeciągnij i upuść z jQuery UI

Spisie treści

Koszulki
Torby
Gadżety

Zanim przejdziemy do kilku praktycznych przykładów, przyjrzyjmy się metodom Drag and Drop, które ma dla nas jQuery UI.
1- Metoda przeciągania ()
Metoda przeciągana zarządza elementami strony HTML, które chcesz przenieść, ta metoda może być używana na dwa różne sposoby:

 • $ (selektor, kontekst) .przeciągnij (opcje) • $ (selektor, kontekst) .przeciągnij ("akcja", parametry)

Zobaczmy przykład:
Najpierw musimy zawrzeć niezbędne pliki, częstym błędem, który się popełnia, jest umieszczanie jQuery UI .js przed jQuery .js, pamiętaj, że jQuery to rdzeń, a jQuery UI to tylko biblioteki, wtyczki, widżety, które bez jQuery nie będą pracowałbym.

Wywołujemy metodę:

 $ (funkcja () {$ ("#przeciągana") .przeciągana ();});

I kojarzymy go z selektorem, który będzie z nim div.

Przeciągnij mnie dookoła

Oto pełny kod źródłowy:

Przeciągany interfejs jQuery UI - domyślna funkcjonalność

Przeciągnij mnie dookoła

Obraz wysłany

2-upuszczalna () metoda
Metoda droppable zarządza elementami strony HTML, które chcesz upuścić do obszaru. Podobnie jak metoda przeciągania, może być używana na dwa różne sposoby:

 • $ (selektor, kontekst) .droppable (opcje) • $ (selektor, kontekst) .droppable („akcja”, parametry)

Spójrzmy na przykład tego:
Dołączamy pliki, dodajemy style, wywołujemy metody (tutaj będziemy w równym stopniu używać metody przeciągania), a następnie metodę upuszczania. Tutaj kod źródłowy:

jQuery UI Droppable - Domyślna funkcjonalność

Przeciągnij mnie do mojego celu

Upuść tutaj

A to byłby nasz wynik w przeglądarce:

Obraz wysłany

A co, jeśli zestawimy obie koncepcje razem w bardziej skomplikowanym przykładzie, takim jak koszyk na zakupy? Zobaczmy:
Najpierw dołączamy nasze pliki:

Do naszego koszyka dodajemy kilka stylów:

Wykorzystamy również metodę akordeon() z biblioteki jQuery UI, aby uatrakcyjnić nasz koszyk, wywołujemy nasze metody i kojarzymy je z selektorami, w tym przypadku rozszerzymy całą funkcjonalność metody draggable do listy:

A tak wyglądałby nasz koszyk:

Obraz wysłany

Abyś mógł to przetestować, oto kompletny kod źródłowy:

 jQuery UI Droppable - Demo koszyka
Koszulki

Koszula Lolcat
Koszula Cheezeburgera
Koszula Buckt


Torby

Zebra w paski
Czarna skóra
Skóra aligatora


Gadżety

iPhone
iPod
iPada


Dodaj swoje przedmioty tutaj