jQuery可排序爲兩列重新排序？

嘿，所有。這是場景。我有下面的代碼，我需要重新排列這些列中的項目。問題是......項目不一定需要保留在其包含的列中，它們需要能夠來回切換，具體取決於用戶。下面是示例代碼：jQuery可排序爲兩列重新排序？

<div id="container"> 
    <div id="left-col"> 
     <div class="wrapper"> 
      <div class="item"> 
       <h2>Row 1 Column 1</h2> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
     </div> 
     <div class="wrapper"> 
      <div class="item"> 
       <h2>Row 2 Column 1</h2> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
     </div> 
    </div><!-- end left-col --> 
    <div id="right-col"> 
     <div class="wrapper"> 
      <div class="item"> 
       <h2>Row 1 Column 2</h2> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
     </div> 
     <div class="wrapper"> 
      <div class="item"> 
       <h2>Row 2 Column 2</h2> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
       <p>Lorem ipsum dolor sit amet</p> 
      </div> 
     </div> 
    </div><!-- end right-col --> 
</div>

和相關的CSS：

#container { 
      border: 1px solid black; 
      overflow: hidden; 
      margin: auto; 
     } 
     #container .wrapper { 
      width: 100%; 
     } 
     #container #left-col .item { 
      margin: .5em .25em .5em .5em; 
      border: 1px solid black; 
     } 
     #container #right-col .item { 
      margin: .5em .5em .5em .25em; 
      border: 1px solid black; 
     } 
     #left-col, #right-col { width: 50%; } 
     #left-col { float: left; } 
     #right-col { float: right; } 
     .item h2 { background: #ccc; }

我想知道是否有可能使用jQuery的排序插件/訂單包裝元素中的代碼進行排序，或者如果我將不得不推出我自己的解決方案。如果我想要將中的元素排列在的左側或右側列中，而不是彼此之間，則該插件可以工作。任何幫助將不勝感激。

來源

2009-06-23 blparker

你想創建一個左到右（添加/刪除）選擇？ – 2009-06-23 20:38:06

類別。元素應該能夠在其各自的列中「上下移動」，並且如果需要，可以從左到右「移動」到另一列。 – blparker 2009-06-23 20:43:02

原來有一個更簡單的解決方案。隨着羅伯特的幫助下，他提供的鏈接，該解決方案正常工作：

$(function() { 
    $("#left-col").sortable({ 
     handle: '.item h2', 
     connectWith: '#right-col' 
    }).disableSelection(); 
    $("#right-col").sortable({ 
     handle: '.item h2', 
     connectWith: '#left-col' 
    }).disableSelection(); 
});

如前所述，與排序說，我可以每個項目內其推崇的列進行排序，但它不能被「下降「在對面一欄。通過可排序插件上的connectWith屬性，您可以指定您想要排序的另一個可排序對象。感謝所有的幫助。

來源

2009-06-23 21:28:48 blparker