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: