jQuery 可排序用于两列重新排序？

Question

大家好。这是场景。我有以下代码，我需要重新排列这些列中的项目。问题是......这些项目不一定需要保留在其包含的列中，它们需要能够根据用户来回切换。这是示例代码：

<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 可排序插件对代码中的包装元素进行排序/排序，或者我是否必须推出自己的解决方案。如果我想对左列或右列内的元素进行排序，但不能在彼此之间进行排序，则该插件可以工作。任何帮助将不胜感激。

Answer 1

事实证明有一个更简单的解决方案。在罗伯特和他提供的链接的帮助下，这个解决方案工作得很好：

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

如前所述，使用可排序，我可以在其相关列中对每个项目进行排序，但不能将其“放置”到相反的列上。使用可排序插件上的 connectWith 属性，您可以指定您希望能够用于排序的另一个可排序对象。感谢您的所有帮助。