Dziudek's jogger

Zajmiemy się dziś tworzeniem dającej się posortować grupy elementów - z pomocą przyjdzie nam plugin sortables.js . Plugin ten zawiera klasę Sortables, która w procesie tworzenia docelowego efektu odwali za nas czarną robotę - my musimy jedynie określić kilka opcji i argumentów. Lista (uporządkowana, nieuporządkowana, ewentualnie lista definicji) wydaje się w wypadku tego pluginu najbardziej odpowiednim elementem do uporządkowania.

Skupimy się więc na stworzeniu przykładu w którym użytkownik będzie mógł ustalić kolejność elementów listy nieuporządkowanej (mogłaby być to lista uporządkowana, ale wtedy mało logiczne wydaje się jej układanie w innej kolejności skoro jest już z założenia uporządkowana ;) ).

Klasa Sortables posiada trzy opcje i dwa zdarzenia. Składnia dobrze nam znana:

var sortowanie = new Sortables("lista",{opcje});

Jeśli chodzi o wspomniane opcje i zdarzenia:

• handles - kolekcja elementów, która będzie służyć do "uchwycenia" elementów. Domyślnie cały element listy stanowi "uchwyt".
• snap - opcja określająca odległość jaką musi przebyć kursor by rozpoczęło się przenoszenie elementu.
• onStart - zdarzenie występujące przy rozpoczęciu przenoszenia elementu.
• onComplete - zdarzenie, które występuje po "upuszczeniu" elementu.

Teorii jak widać do opanowania mamy niewiele - pora na przykład. Na początek najprostsza sytuacja, kiedy to musimy jedynie określić element listy:

var sortowanie = new Sortables("lista");

W połączeniu z odpowiednim kodem XHTML i CSS zawierającym element ul posiadający identyfikator "lista", otrzymamy:

PRZYKŁAD 1

Niewiele trudniejsze będzie dodanie uchwytów do elementów list - uchwytami będą w naszym przypadku wszystkie elementy klasy uchwyt:

var sortowanie = new Sortables("lista",{handles: ".uchwyt"});

I powyższy kod w akcji :

PRZYKŁAD 2

Żeby nie było tak prosto to pora na bardziej złożony przykład - sortowanie to jedno, ale po sortowaniu często występuje potrzeba zapisania nowej kolejności elementów - ja przedstawię jeden ze sposobów na odczytanie nowej kolejności elementów, kwestia zapisu pominę bo jest ona zależna od indywidualnych potrzeb.

Klasa Sortables oferuje nam bardzo przydatną metodę serialize - zwraca nam ona tablicę zawierającą numery elementów na danych pozycjach listy - jeżeli na przykład przeniesiemy piąty element na drugą pozycję to po wywołaniu drugiego elementu tablicy (czyli indeks równy 1) zostanie zwrócona liczba 4.

Wykorzystajmy zatem tą metodę i zdarzenie onComplete do pokazywania aktualnej kolejności elementów.

Zaczynamy od kodu użytego w poprzednim przykładzie:

var sortowanie = new Sortables("lista",{handles: ".uchwyt"});

musimy teraz stworzyć zdarzenie onComplete - funkcja musi odczytać kolejność elementów i wyświetlić je na odpowiedniej liści uporządkowanej. Nasza lista uporządkowana będzie posiadać pozycje przypisane do klasy "kolejnosc".

var sortowanie = new Sortables("lista",{
    handles: ".uchwyt",
    onComplete: function(){
       var tab = sortowanie.serialize();
       tab.each(function(element,index){
          $$(".kolejnosc")[index].setHTML("<strong>" + element + "</strong>");
        });
    }
});

Dodane linijki po przeniesieniu każdego elementu tworzą tablicę z użyciem metody serialize klasy Sortables. Następnie dla każdego elementu stworzonej tablicy jest wykonywana operacja przypisania wartości danej pozycji jako treści kolejnych pozycji listy uporządkowanej.

Powyższy kod w akcji:

PRZYKŁAD 3

Jak mogliście zauważyć z pluginem sortables.js stworzenie dającej się posortować listy jest niezwykle proste - nawet odczyt kolejności elementów wymaga niewiele kodu. W następnej części kursu poznamy plugin color.js .