Jquery JavaScript DHTML





  jQuery UI Sortable - Connect lists with Tabs
  
  
  
  
  
  
  
  
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  
  
  $(function() {
    $("#sortable1, #sortable2").sortable().disableSelection();
    var $tabs = $("#tabs").tabs();
    var $tab_items = $("ul:first li",$tabs).droppable({
      accept: ".connectedSortable li",
      hoverClass: "ui-state-hover",
      drop: function(ev, ui) {
        var $item = $(this);
        var $list = $($item.find('a').attr('href')).find('.connectedSortable');
        ui.draggable.hide('slow', function() {
          $tabs.tabs('select', $tab_items.index($item));
          $(this).appendTo($list).show('slow');
        });
      }
    });
  });
  




  

        
  • Nunc tincidunt

  •     
  • Proin dolor

  •   

  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
    
  

  
    
      Item 1
      Item 2
      Item 3
      Item 4
      Item 5
    
  





  Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.