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

TableSorter插件应该可以满足您的需求。它只适用于表格，但它非常灵活;它甚至对数字有特殊处理。我目前正在我正在进行的项目中使用它。

http://www.tablesorter.com/

Answer 2

原来有一个更简单的解决方案。在罗伯特及其提供的链接的帮助下，这个解决方案运行良好：

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

如前所述，在可排序的情况下，我可以对中的每个项目进行排序，但不能在相反的列上“删除”。使用sortable插件上的connectWith属性，您可以指定希望能够对其进行排序的另一个可排序对象。感谢您的帮助。

Answer 3

jQuery UI Sortable 应该允许您在列中上下移动项目：

http://jqueryui.com/demos/sortable/

这有点令人困惑，因为jQuery网站还有一个Sortable页面，其中有一个目前似乎不起作用的演示。

您可能还需要 jQuery UI Droppable：

http://jqueryui.com/demos/droppable/

Droppable允许您从一列拖放到另一列。以下是jQuery站点上Droppable的链接（此演示确实有效）：

http://docs.jquery.com/UI/API/1.7/Droppable

Answer 4

如果您打算使用拖放解决方案，threedubmedia的版本比jQuery UI库快得多，不那么臃肿。

我的演示是here。您可以在列表之间移动名称，但不会在列表中进行排序。尽管如此，这应该是一个很容易的改变。

Answer 5

你可以在这里得到一个例子：它可以模仿iGoogle界面以及随时随地排序和删除：iGoogle

jQuery Sortable for Two Column重新排序？

5 个答案: