Elementy przeciągalne

Rejestrowanie elementów przeciągalnych jest bardzo proste i odbywa się przy pomocy funkcji mint.gui.RegisterDragObject przyjmującej jeden parametr, jakim jest element lub identyfikator elementu, który chcemy zarejestrować jako przeciągalny. Funkcja zwraca obiekt DragObject posiadający kilka atrybutów i funkcji wpływających na możliwości przesuwania elementu.

Przykład

function OnLoad() {
mint.gui.RegisterDragObject("box");
}

Elementy przeciągalne posiadają możliwość blokowania przesuwania w danej osi, służą do tego atrybuty lockX oraz lockY znajdujące się w obiekcie DragObject. W poniższym przykładzie tworzymy dwa elementy, pierwszy będzie mógł być przesuwany tylko pionowo, a drugi tylko poziomo:

Przykład

function OnLoad() {
    var vbox = mint.gui.RegisterDragObject("vbox");
    var hbox = mint.gui.RegisterDragObject("hbox");

    vbox.lockX = true;
    hbox.lockY = true;
}

Możemy również tworzyć pola ograniczające określające granice, których przeciągany element nie może przekroczyć. Do ustawienia pola ograniczającego służy funkcja SetBBox znajdująca się w obiekcie DragObject i przyjmująca jeden parametr jakim jest element, którego krawędzie będą służyć jako pole ograniczające. W kolejnym przykładzie ustawiamy element "bbox" jako pole ograniczające elementu "box".

Przykład

function OnLoad() {
var box = mint.gui.RegisterDragObject("box");
box.SetBBox("bbox");
}

Element służący jako pole ograniczające nie musi być koniecznie elementem nadrzędnym elementu przeciągalnego, może być to dowolny element na stronie, jednak element przeciągalny musi znajdować się wewnątrz pola ograniczającego.

Istnieje także możliwość rozszerzania elementów zamiast przeciągania lub połączenie rozszerzania z przeciąganiem. Wiążą się z tym dwa atrybuty: resize oraz resizeCtrl. Pierwszy z nich po ustawieniu wartości true określa czy element zamiast przeciągania ma być rozszerzany, natomiast po ustawieniu dodatkowo drugiego atrybutu na true element będzie nadal przeciągany, natomiast rozszerzanie następować będzie po przytrzymaniu klawisza CTRL. Możliwe jest również ustawienie ograniczeń tj. wartości minimalnej/maksymalnej dla szerokości/wysokości i służą do tego cztery atrybut: minWidth (minimalna szerokość), maxWidth (maksymalna szerokość) minHeight (minimalna wysokość) oraz maxHeight (maksymalna wysokość).

function OnLoad() {
    var box = mint.gui.RegisterDragObject("box");

    box.resize = true;
    box.minWidth = 50;
    box.minHeight = 50;
    box.maxWidth = 150;
    box.maxHeight = 150;
}

W każdej chwili możemy odrejestrować element przeciągalny wywołując funkcję mint.gui.UnregisterDragObject podając jako argument identyfikator elementu lub element, który chcemy odrejestrować.

Kontenery

Kontener to element grupujący oraz ustawiający obok siebie elementy przeciągalne upuszczone wewnątrz jego pola. Kontenery posiadają także szereg atrybutów oraz funkcji zdarzeniowych do zarządzania elementami znajdującymi się wewnątrz kontenera a także możliwość selekcji przyjmowanych elementów. Do tworzenia kontenerów służy funkcja mint.gui.RegisterDropZone wywoływana z jednym parametrem jakim jest identyfikator elementu lub element, który chcemy zarejestrować jako kontener. Funkcja zwraca obiekt DropZone. Zacznijmy od prostego przykładu, w którym rejestrujemy cztery elementy przeciągalne oraz jeden kontener:

Przykład

function OnLoad() {
    mint.gui.RegisterDragObject("box1");
    mint.gui.RegisterDragObject("box2");
    mint.gui.RegisterDragObject("box3");
    mint.gui.RegisterDragObject("box4");

    mint.gui.RegisterDropZone("dropZone");
}

W powyższym przykładzie przeciągane elementy mogą być wstawiane pomiędzy elementami znajdującymi się już w kontenerze, jeśli chcemy jednak aby elementy były wstawiane zawsze na końcu kontenera, bez względu na to w którym miejscu zostały upuszczone, wystarczy ustawić atrybut insertInside w obiekcie DropZone na false. Jeśli natomiast chcemy, aby elementy w kontenerze znajdujące się pod przeciąganym elementem nie były rozsuwane, ustawiamy atrybut useDummyNode na false. Obiekt DropZone posiada również dwa atrybuty określające styl kontenera oraz elementów wewnątrz kontenera podczas przeciągania nad nimi elementu - są to odpowiednio atrybuty hoverClass oraz overClass. Kolejny przykład rejestruje kontener i ustawia atrybuty określające styl elementów, ponadto elementy wewnątrz kontenera nie są rozsuwane pod przeciąganym elementem:

Przykład

function OnLoad() {
    var zone = mint.gui.RegisterDropZone("dropZone");

    zone.useDummyNode = false;
    zone.overClass = "dropZoneOver";
    zone.hoverClass = "dropZoneHover";

    mint.gui.RegisterDragObject("box1");
    mint.gui.RegisterDragObject("box2");
    mint.gui.RegisterDragObject("box3");
    mint.gui.RegisterDragObject("box4");
}

W poprzednich przykładach do kontenera było można upuścić dowolny element, możemy jednak wprowadzić selekcję elementów, które mogą zostać umieszczone w kontenerze. Zrobić możemy to na dwa sposoby, pierwszym z nich jest wykorzystanie atrybutu acceptClass w którym ustawiamy nazwę klasy akceptowanej - tylko elementy z taką klasą będą mogły być umieszczane w kontenerze. Drugim sposobem jest wykorzystanie funkcji zdarzeniowej OnAccept i przydaje się ona przy bardziej skomplikowanej selekcji bazującej na innych czynnikach niż nazwa klasy. Funkcja ta wywoływana jest z parametrem zawierającym aktualnie przeciągany element, jeśli funkcja zwróci wartość true oznacza to, że element jest akceptowany przez kontener, w przeciwnym wypadku kontener ignoruje przeciągany element. W poniższym przykładzie do kontenera upuszczone będą mogły być tylko elementy z klasą "accept":

Przykład

function OnLoad() {
    var zone = mint.gui.RegisterDropZone("dropZone");

    zone.acceptClass = "accept";

    mint.gui.RegisterDragObject("box1");
    mint.gui.RegisterDragObject("box2");
    mint.gui.RegisterDragObject("box3");
    mint.gui.RegisterDragObject("box4");
}

« poprzedni artykuł		następny artykuł »