jQuery：固定长度、连接、可排序的列表

Question

我有一个列表，分为以下三列：

Column1 Column2 Column3
1       4       7
2       5       8
3       6       9

列表从 1 到 9 是连续的，每列都有固定的行数 (3)。我希望允许用户重新排序列表，同时保持我的固定长度列（3 行）。

通过 jQuery 使列表可排序非常容易。

HTML

< ul class="sortable" id="column1">
    < li class="section">1< /li>
    < li class="section">2< /li>
    < li class="section">3< /li>
< /ul>
< ul class="sortable" id="column2">
    < li class="section">4< /li>
    < li class="section">5< /li>
    < li class="section">6< /li>
< /ul>
< ul class="sortable" id="column3">
    < li class="section">7< /li>
    < li class="section">8< /li>
    < li class="section">9< /li>
< /ul>

Javascript

$('#column1').sortable({
    connectWith: ".sortable",
    items : ".section"
    });
$('#column2').sortable({
    connectWith: ".sortable",
    items : ".section"
    });
$('#column3').sortable({
    connectWith: ".sortable",
    items : ".section"
    });

这允许我在列表中拖放，但我不确定如何保持列长度。使用这种方法，每个列表都会随着项目的移动而增长和缩小。有什么好的方法可以实现这一点吗？

已编辑完整解决方案

感谢这两个回复，我得到了完整的解决方案。在我的问题中，我没有提到我在每一列中都有一个标题。

HTML

< ul class="sortable" id="column1">
    < li class="header">Header< /li>
    < li class="section">1< /li>
    < li class="section">2< /li>
    < li class="section">3< /li>
< /ul>
< ul class="sortable" id="column2">
    < li class="header">Header< /li>
    < li class="section">4< /li>
    < li class="section">5< /li>
    < li class="section">6< /li>
< /ul>
< ul class="sortable" id="column3">
    < li class="header">Header< /li>
    < li class="section">7< /li>
    < li class="section">8< /li>
    < li class="section">9< /li>
< /ul>

Javascript

var colLength = 4;
$('#column1, #column2, #column3').sortable({
    connectWith: ".draftboard",
    items : ".section",
    update : balanceColumns
});
balanceColumns: function(event, ui){
    function balanceColumn1(){
        var col1 = $('#column1 li');
        var col2 = $('#column2 li');
        var col3 = $('#column3 li');
        if (col1.length > colLength){
            col1.last().insertAfter( col2[0] );
        }
        else if(col1.length < colLength){
            col2.parent().children(':nth-child(2)').appendTo(col1.parent());
        }
    }
    function balanceColumn2(){
        var col1 = $('#column1 li');
        var col2 = $('#column2 li');
        var col3 = $('#column3 li');
        if (col2.length > colLength){

            if (col1.length < colLength) {
                col2.parent().children(':nth-child(2)').appendTo(col1.parent());
            } else {
                col2.last().insertAfter( col3[0] );
            }
        }
        else if(col2.length < colLength){
            col3.parent().children(':nth-child(2)').appendTo(col2.parent());
        }
    }
    function balanceColumn3(){
        var col1 = $('#column1 li');
        var col2 = $('#column2 li');
        var col3 = $('#column3 li');
        if (col3.length > colLength) {
            col3.parent().children(':nth-child(2)').appendTo(col2.parent());
            balanceColumn2();
        }
    }
    balanceColumn1();
    balanceColumn2();
    balanceColumn3();
}

Answer 1

试试这个方法：http://jsfiddle.net/ETGyq/

我现在没时间了，但我明天可以继续。

Answer 2

jQuery UI 的 sortable 有一个 receive 回调，可以在删除后做一些事情。所以对每一个都做这样的事情：

$('#column1').sortable({
  connectWith: '.sortable',
  items: '.section',
  receive: function(event, ui) {
    // check to see which other column has only 2 items in it now (may even be a sortable
    // method that shows origin of drag) and move the 4th item in the current column to it.
    // or otherwise shift the items around according to your logic of where extra items
    // should be shuffled to.
  }
});

有关使用 event 和 ui 参数定位元素的详细信息，请参阅上面链接的可排序文档。

注意：由于此函数可能对所有 3 列都相同，因此最佳实践建议您定义此接收函数一次，并在 3 个可排序初始化中的每一个中引用它。