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