Move items

by sundrik

HTML

<input type="button" id="showItems" name="showItems" value="Show items">
<ol id="selectable" class="ui-selectable" style="background:#84ac38; border: 1px solid #267501;">    
</ol>
<ol id="selected" class="ui-widget-content" style="background:#e9b91c ;border: 1px solid #ce7b12;>
			
		</ol>

CSS

#selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    #selected .ui-selecting { background: #FECA40; }
    #selected .ui-selected { background: #F39814; color: white; }
    #selected { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selected li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

var arrSelectedItems = [];
var arrItems = [];


$("#showItems").click(function() {      
      arrItems.push([1,"Mr","John","Andersson"]);
			arrItems.push([2,"Mrs","Anna","Svensson"]);
			arrItems.push([3,"Mr","Klas","Olsson"]);
			arrItems.push([4,"Mrs","Lovisa","Henriksson"]);
			arrItems.push([5,"Mr","Anders","Annikadotter"]);
			arrItems.push([6,"Mrs","Klara","Annasson"]);
      showItems();
     });

function showItems() {
    $('#selectable').empty();
		$(arrItems).each(function(i) {
			var stringItems = arrItems[i].toString().split(",");			
			$('#selectable').append("<li class=\"ui-widget-content\" value='"+ i +"'>"+ stringItems[1] +" &nbsp; "+ stringItems[2] +"  "+ stringItems[3] +"</li>").attr("class", "ui-widget-content");
		});
	}
  
  function showSelectedItems() {
		$('#selected').empty();
		$(arrSelectedItems).each(function(i) {
			var stringItem = arrSelectedItems[i].toString().split(",");
			$('#selected').append("<li class=\"ui-widget-content\" value='"+ i +"'>"+ stringItem[2] +" &nbsp; "+ stringItem[3] +"  "+ stringItem[1] +"</li>");
		});
	}

$( function() {
	$("#selectable").selectable({
			stop: function() {        
				$(".ui-selected", this ).each(function() {
				  var $this = $(this);
				  var index = $this.attr("value");
				  var pushString = arrItems[index];          
				  arrSelectedItems.push(pushString);          
				  arrSelectedItems.sort();
				  arrItems.splice(index,1);         
				  arrItems.sort();         
				  showItems();           
				  showSelectedItems();
        });		
      }
		});
	} );
  
  $( function() {
		$("#selected").selectable({
			stop: function() {
				$(".ui-selected", this ).each(function() {
				  var $this = $(this);
				  var index = $this.attr("value");
				  var pushString = arrSelectedItems[index];
				  arrItems.push(pushString);
				  arrItems.sort();
				  arrSelectedItems.splice(index,1);
				  arrSelectedItems.sort();
				  showItems();
				  showSelectedItems();
        });
		
     ...