jQuery Sortable for Two Column重新排序？

StackOverflow https://stackoverflow.com/questions/1034953

题

嘿所有人。这是场景。我有以下代码，我需要重新排列这些列中的项目。问题是......项目不一定需要保留在其包含的列中，它们需要能够来回切换，具体取决于用户。以下是示例代码：

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

有帮助吗？

解决方案 2

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

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

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

其他提示

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

http://www.tablesorter.com/

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

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

这有点令人困惑，因为jQuery网站还有一个可排序页面，带有一个演示目前似乎不起作用。

您可能还需要 jQuery UI Droppable：

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

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

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top