javascript - 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){<br/>
            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/

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