Dziudek's jogger

Pora dokończyć temat przenoszenia elementów. Dzięki plikowi drag.move.js możemy do naszych stron dodać prawdziwy efekt drag & drop. A wszystko dzięki nowym opcjom i zdarzeniom rozszerzających klasę Drag.Base.

Dzięki nowym opcjom możemy określić w obrębie jakiego elementu może poruszać się przenośny obiekt oraz obiekty gdzie możemy przenieść nasze elementy. Mamy także do dyspozycji 4 nowe zdarzenia oraz metodę klasy Element - makeDraggable.

W przykładach skupimy się na ograniczaniu przestrzeni, gdzie można przemieszczać element, oraz na zaprezentowaniu działania nowych zdarzeń. Jeśli chodzi o praktyczne przykłady to polecam ten - świetnie oddaje to co można uzyskać za pomocą plików z sekcji Drag.

Obiekt klasy Drag.Move możemy tworzyć na dwa sposoby:

new Drag.Move("element",{opcje});

lub:

$("element").makeDraggable({opcje});

Oba sposoby dają taki sam efekt.

Nowe opcje to:

• droppables - tablica elementów, nad które można przenieść nasz przenośny obiekt,
• container - element w obrębie którego będzie poruszać naszym obiektem,
• overflown - to opcja znana nam już z poprzednich części kurs - chodzi o nadrzędne w stosunku do przenoszonego elementy, które posiadają atrybut overflow.

Trzy spośród czterech zdarzeń dotyczą elementu na który mamy zamiar przenieść przenośny obiekt, a czwarte zdarzenie dotyczy tegoż obiektu:

• onemptydrop - zdarzenie to występuje w momencie gdy puścimy przenoszony obiekt nad elementem nie będącym w tablicy opcji droppables (czyli puścimy go poza wyznaczonymi do przenoszenia obszarami),
• ondrop - zdarzenie wywoływane w momencie puszczenia obiektu nad elementem z tablicy droppables (krótko mówiąc: przeciwieństwo zdarzenia onemptydrop),
• onover - zdarzenie występujące wtedy kiedy nasz element znajdzie się nad miejscem docelowym (czyli jednym z elementów tablicy droppables),
• onleave - zdarzenie przeciwne do onover - występuje w momencie opuszczenia miejsca docelowego.

Na dobry początek stworzymy przenośny element z użyciem metody makeDraggable:

$("przenosny").makeDraggable();

Teraz dobra wiadomość dla leniwych (:P) - w wypadku klasy Drag.Move nie musimy elementowi nadawać dodatkowych właściwości CSS - takich jak position czy top orax left (by efekt działał w IE i Safari) - powyższa linijka wraz z definicją zdarzenia onload to wszystko czego potrzeba, by móc przenosić elementy :)

PRZYKŁAD 1

Ograniczymy teraz obszar nad jakim można przemieszczać przenośny element. Dzięki wykorzystaniu opcji container:

$("przenosny").makeDraggable({
   container: "content"
});

Po zastosowaniu powyższego zapisu, użytkownik nie przeniesie diva "przenosny" poza obszar diva "content":

PRZYKŁAD 2

Pora na prawdziwe drag & drop - stworzymy sobie nową strukturę, która posłuży nam jako miejsce do przenoszenia elementów - będą to dwa umieszczone obok siebie elementy div. W pierwszym z nich będzie się znajdowało 9 divów przypisanych do klasy "przenosny". Na początek uczynimy je wszystkie przenośnymi zgodnie z nazwą klasy i ograniczymy obszar do diva "content":

$$(".przenosny").each(function(element,index){
   element.makeDraggable({
      container: "content"
   });
});

Stosujemy do tego celu metodę each, która do każdego elementu doda metodę makeDraggable:

PRZYKŁAD 3

W powyższym przykładzie oba divy nieprzypadkowo są czarne i białe - zapoznamy się teraz z działaniem zdarzeń dotyczących obszarów na, które można upuszczać przenośne obiekty.

Do metody makeDraggable z poprzedniego przykładu dodajemy opcję droppables:

$$(".przenosny").each(function(element){
   element.makeDraggable({
      container: $("container"),
      droppables: ["dobro", "zuo"]
   });
});

Jak widać będą to dwa divy - czarny i biały, dodatkowo ograniczyłem obszar poruszania obiektami do nowego diva "container".

Naszym celem jest zmiana treści przenoszonego diva na "DOBRO" lub "ZUO" w zależności od tego nad jakim divem się znajdzie (chyba nie muszę mówić kiedy, który napis ma się pojawiać ;) ), dodatkowo po upuszczeniu diva ma się zmieniać kolor jego tła na stosowny do elementu docelowego. W wypadku diva "dobro" rozszerzamy naszą metodę each o następujący kod:

$("dobro").addEvents({
   "drop" : function(el){
      el.setStyles({
         "background": "#FFF",
         "color": "#AAA"
      });
   }
});

każde zdarzenie z klasy Drag.Move pobiera jako argument uchwyt (w tym wypadku zmienna el) do przenoszonego elementu - jak widać wykorzystałem to do zmiany stylu elementu w wypadku upuszczenia go na obszarze diva "dobro". Jeżeli chcemy odnieść się do diva, którego dotyczy zdarzenie to odwołujemy się przez operator this.

Teraz jeszcze dodajemy zdarzenia do diva "zuo" - do niego dodamy wszystkie trzy zdarzenia over, leave i drop:

$("zuo").addEvents({
   "drop" : function(el){
      el.setStyles({
         "background": "#000",
         "color": "#FFF"
      });
   },
   "over" : function(el){
      el.setHTML("ZUO");
   },
   "leave" : function(el){
      el.setHTML("DOBRO");
   }
});

Wszędzie odnosimy się przez uchwyt do przenoszonego elementu, by operować na jego zawartości i stylu - jak widzimy w wypadku upuszczenia obiektu nad danym elementem zmieni się jego styl, gdy obiekt będzie się nad tym elementem znajdował, zmieniona zostanie jego zawartość (tak samo przy opuszczaniu tego elementu):

PRZYKŁAD 4

Pozostało nam jeszcze zdarzenie emptydrop - jak wspominałem występuje ono wtedy gdy przenoszony obiekt nie znajdzie się w momencie "puszczenia" nad żadnym z docelowych elementów określonych w opcji droppables - w naszym wypadku rozszerzymy obszar nad którym można przemieszczać divy do diva "content" (tak jak to było pierwotnie) i w wypadku upuszczenia diva poza dwoma wspominanymi już elementami, przenoszony obiekt zostanie usunięty :

element.addEvent("emptydrop",function(){
   this.remove();
});

Nasz rozszerzony przykład w akcji:

PRZYKŁAD 5

To były oczywiście bardzo proste i mało użyteczne przykłady użycia drag'n'drop jednak ich głównym celem było zaprezentować istotę tego zagadnienia z punktu widzenia mootools - zrozumienie działania zdarzeń jest w tym wypadku kluczem do efektywnego i efektownego użycia tego sposobu przemieszczania elementów.

Tym sposobem zakończyliśmy omawianie głównej części frameworka mootools - pozostała nam jeszcze do omówienia sekcja pluginów jednak nie są one tak ważne jak to co już omówiliśmy, bo służą one głównie do tworzenia ciekawych efektów z gotowców. Przy okazji zmieni się sposób omawiania pluginów - będą one omawiane nie zgodnie ze spisem treści, ale w sposób losowy ;)