jQuery可排序組合兩個不同的列表

Question

我想結合兩個列表來排序哪些工作像單個列表。我的代碼是。

$(function() { 
$("#sortable").sortable({ 
    connectWith: "#sortable1" 
}); 

$("#sortable1").sortable({ 
    connectWith: "#sortable" 
}); 

$("#sortable,#sortable1").disableSelection(); 
}); 

我的HTML是。

<ul id="sortable"> 
    <li class="ui-state-default">1</li> 
    <li class="ui-state-default">2</li> 
    <li class="<ui-s></ui-s>tate-default">3</li> 
    <li class="ui-state-default">4</li> 
    <li class="ui-state-default">5</li> 
    <li class="ui-state-default">6</li> 
    <li class="ui-state-default">7</li> 
    <li class="ui-state-default">8</li> 
    <li class="ui-state-default">9</li> 
    <li class="ui-state-default">10</li> 
    <li class="ui-state-default">11</li> 
    <li class="ui-state-default">12</li> 
</ul> 
<ul id="sortable1"> 
    <li class="ui-state-default">1</li> 
    <li class="ui-state-default">2</li> 
    <li class="ui-state-default">3</li> 
    <li class="ui-state-default">4</li> 
    <li class="ui-state-default">5</li> 
    <li class="ui-state-default">6</li> 
    <li class="ui-state-default">7</li> 
    <li class="ui-state-default">8</li> 
    <li class="ui-state-default">9</li> 
    <li class="ui-state-default">10</li> 
    <li class="ui-state-default">11</li> 
    <li class="ui-state-default">12</li> 
</ul> 

，當我從這個網站刪除

</ul> 
<ul id="sortable1"> 

的工作是什麼，我想，但我想有兩個不同的列表相同的結果。爲了清楚的瞭解請http://jsfiddle.net/67hEW/4/

感謝

Answer 1

我有變化JS做我想做什麼，它的做工精細與浮動離開。 JS是

 (function($){ 
    $.fn.moveTo = function(selector){ 
     return this.each(function(){ 
      var cl = $(this).clone(); 
      $(cl).appendTo(selector); 
      $(this).remove(); 
     }); 
    }; 
    $.fn.moveDown = function(selector){ 
     return this.each(function(){ 
      var cl = $(this).clone(); 
      $(cl).prependTo(selector); 
      $(this).remove(); 
     }); 
    }; 
})(jQuery); 


    $(function() { 
     var oldList, newList, item; 
    $("#sortable").sortable({ 
     connectWith: "#sortable1", 
     start: function(event, ui) { 
      item = ui.item; 
      newList = oldList = ui.item.parent(); 
     }, 
     stop: function(event, ui) {   
      alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id')); 
      if(oldList.attr('id') == newList.attr('id')) 
      return; 
       $('#'+newList.attr('id')+' li:first-child').moveTo('#'+oldList.attr('id')); 

     }, 
     change: function(event, ui) { 
      if(ui.sender) newList = ui.placeholder.parent(); 


     }, 

    }); 

    $("#sortable1").sortable({ 
     connectWith: "#sortable", 
     start: function(event, ui) { 
      item = ui.item; 
      newList = oldList = ui.item.parent(); 
     }, 
     stop: function(event, ui) {   
      alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id')); 
      if(oldList.attr('id') == newList.attr('id')) 
      return; 
       $('#'+newList.attr('id')+' li:last-child').moveDown('#'+oldList.attr('id')); 

     }, 
     change: function(event, ui) { 
      if(ui.sender) newList = ui.placeholder.parent(); 


     }, 

    }); 

    $("#sortable,#sortable1").disableSelection(); 
    }); 

工作的例子是http://jsfiddle.net/67hEW/8/

Answer 2

可排序connectWith不浮工作。所以去掉「浮動：左」，並增加「顯示：inline-block的」：

#sortable li, #sortable1 li { 
    margin: 3px 3px 3px 0; 
    padding: 1px; 
    display:inline-block; 
    width: 100px; 
    height: 90px; 
    font-size: 4em; 
    text-align: center; 
}