固定长度，连接，排序列表

jQuery: Fixed Length, Connected, Sortable Lists

本文关键字：连接 列表 排序      更新时间：2023-09-26

我有一个单独的列表，分为以下三列:

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"
    });

This allows me to drag and drop across lists, but I'm not sure how to maintain column length. Using this method, each list grows and shrinks as items are moved. Any suggestions on a good method to accomplish this?

EDITED WITH FULL SOLUTION

Thanks to both of the responses I got the full solution. In my question I neglected to mention I had a header in each column.

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();
}

Try something this way: http://jsfiddle.net/ETGyq/

I'm out of time by now, but I can continue this tomorrow.

jQuery UI's sortable has a receive callback that can do something after dropping. So do something like this for each one:

$('#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个可排序初始值中的每个初始值中引用它。

相关文章：