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

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个可排序的每个列中引用它。

Answer 2

以这种方式尝试：http://jsfiddle.net/ETGyq/

我现在已经没时间了，但明天我可以继续这样做。

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

2 个答案: