Baza modelek Glamour Models: Modelki, Fotomodelki, Hostessy

środa, 16 marca 2011

Przenoszenie elementów między listami: drag&drop, zaznacz-kliknij-przenieś

Przenoszenie elementów między dwoma listami dwoma sposobami na raz:
-        za pomocą drag&drop,
-        poprzez zaznaczenie elementu i przeniesienie przyciskiem.

Zrobimy to przy pomocy jQuery UI:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>



Najpierw tworzymy strukturę HTML: kontener, dwie listy z id=„box1” i id=„box2” oraz cztery przyciski do przenoszenia elementów (po dwa na każdą stronę do elementów pojedynczych oraz całości).
Dla przejrzystości ustawiamy listy obok siebie, a między nimi przyciski.

<div style="border:1px solid #888;float:left;">

  <ul id="box1" style="float:left;">
    <li class="elem" value="10">dziesięć</li>
    <li class="elem" value="20">dwadzieścia</li>
    <li class="elem" value="30">trzydzieści</li>
    <li class="elem" value="40">4dzieści</li>
    <li class="elem" value="50">5dziesiąt</li>
    <li class="elem" value="60">6dziesiąt</li>
    <li class="elem" value="70">7dziesiąt</li>
    <li class="elem" value="80">8dziesiąt</li>
    <li class="elem" value="90">9dziesiąt</li>
    <li class="elem" value="100">sto</li>
  </ul>

<div style="float:left; text-align: center;">
  <button id="add">&gt;</button><br />
  <button id="remove">&lt;</button><br />
  <button id="add_all">&gt;&gt;</button><br />
  <button id="remove_all">&lt;&lt;</button><br />
</div>

<ul id="box2" style="float:left;">
</ul>

</div>

Następnie nadajemy style.
Elementy listy (.elem) są pozbawione punktorów, mają ramkę i białe tło.
Element zaznaczony będzie miał żółte tło.
<style media="screen" type="text/css">

button{
  margin: 5px;
}

#box1, #box2{
  padding:0;
  margin:0;
  overflow: auto;
  width: 200px;
  height: 200px;
}

#box1{
  background-color: #CCFFFF;
}

#box2{
  background-color: #CCFF99;
}

.elem{
  border:1px solid #888;
  background-color:#fff;
  margin:2px;
  list-style:none;
  padding:0;
  overflow:auto;
}

.selected{
  background-color: #FF0;
}

</style>

No to jazda!!!

Operacje na elementach listy będziemy wykonywać, gdy wczytamy cały dokument:
<script type="text/javascript">

$(document).ready(function(){

});

</script>

Zacznijmy od zaznaczenia elementu.
Gdy klikniemy element oznaczony klasą elem, dodajemy do tego elementu drugą klasę selected.
Robimy to za pomocą usunięcia klasy selected ze wszystkich elementów listy i nadajemy wybranemu elementowi klasę selected.
Dzięki temu będziemy mieć tylko jeden oznaczony element.

  $('.elem').click(function(){
    $('.elem').removeClass('selected');
    $(this).addClass('selected');
  });

Teraz wykorzystamy jQuery UI, z tego plugin Sortable. Dzięki temu będzie można przenosić elementy metodą drag&drop.
Listę #box1 ustawiamy na sortable().
Dodajemy opcje:
-        connectWith: '#box2' – łączymy z drugą listą #box2, która musi być ustawiona na sortable(),
-        cursor: 'move' – ustawiamy wygląd kursora na „przenoszenie”,
-        stop: function(ev,ui){ } – zdarzenie; jest wywoływane, gdy sortowanie się zatrzymuje. W przykładzie sprawdzamy, czy rodzic przenoszonego elementu (ui.item) ma id równy box1. Jeśli tak, to niech zdarzenie zwróci false, dzięki czemu element nie zostanie przeniesiony na inną pozycję w tej liście. Na koniec sprawdźmy, czy rzeczywiście przeniesiony element do drugiej listy jest prawidłowy.

  $('#box1').sortable({
        connectWith: '#box2',
        cursor: 'move',
        stop: function(ev,ui){
          if(ui.item.parent().attr('id')=='box1'){
            return false;
          }
          alert(ui.item.attr('value'));
        },
    });

Podobnie zrobimy dla drugiej listy #box2:
  $('#box2').sortable({
        connectWith: '#box1',
        cursor: 'move',
        stop: function(ev,ui){
          if(ui.item.parent().attr('id')=='box2'){
            return false;
          }
          alert(ui.item.attr('value'));
        },
    });

Teraz zajmiemy się przyciskami.

Przycisk #add przenosi zaznaczony element z listy #box1 do listy #box2.
Znajdujemy zaznaczony element z listy #box1, tzn. który ma klasę selected, sprawdzamy, czy taki istnieje.
Jeśli nie, to wychodzimy z funkcji. W przeciwnym wypadku przenosimy go do listy #box2 i sprawdzamy, czy to prawidłowy element.
  $('#add').click(function(){
    var elem = $('#box1 .selected');
    if(elem.length == 0){
      return;
    }
    var val = elem.attr('value');
    elem.appendTo('#box2');
    alert(val);
  });

Podobnie dla przycisku #remove, który przenosi zaznaczony element z listy #box2 do #box1.

  $('#remove').click(function(){
    var elem = $('#box2 .selected');
    if(elem.length == 0){
      return;
    }
    var val = elem.attr('value');
    elem.appendTo('#box1');
    alert(val);
  });

Na koniec zostały dwa przyciski, które przenoszą wszystkie elementy.

Przyckisk #add_all przenosi wszystkie elementy z klasą elem z #box1 do #box2.
Dodatkowo w zastosowanej funkcji each() wyświetlamy przeniesione elementy.
  $('#add_all').click(function(){
    $('#box1 .elem').appendTo('#box2').each(function(){
      alert($(this).attr('value'));
    });
  });

Podobnie w drugą stronę z przyciskiem #remove_all.
  $('#remove_all').click(function(){
    $('#box2 .elem').appendTo('#box1').each(function(){
      alert($(this).attr('value'));
    });
  });


Teraz wystarczy ułożyć kod i będziemy mogli przenosić elementy między dwoma listami na dwa sposoby: drag&drop i select-click-carry. A całość wygląda tak:


Brak komentarzy:

Prześlij komentarz