jQuery: фиксированная длина, подключен, сортируемые списки - PullRequest
Новая
       0

jQuery: фиксированная длина, подключен, сортируемые списки

2 голосов
/ 23 декабря 2011

У меня есть один список, который разбит на три столбца следующим образом: 

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

Список непрерывен от 1 до 9, и каждый столбец имеет фиксированное количество строк (3).Я хочу разрешить пользователю изменять порядок списка при сохранении моих столбцов фиксированной длины (3 строки).

Сделать сортировку списка с помощью jQuery было довольно легко.

HTML 

<code>< 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 

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

Это позволяет мне перетаскивать списки, но я не уверен, как сохранить длину столбца.Используя этот метод, каждый список увеличивается и уменьшается по мере перемещения элементов.Любые предложения о хорошем методе для достижения этой цели?

РЕДАКТИРОВАНИЕ С ПОЛНЫМ РЕШЕНИЕМ

Благодаря обоим ответам я получил полное решение.В своем вопросе я не упомянул, что у меня есть заголовок в каждом столбце.

HTML 

<code>< 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 

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

Ответы [ 2 ]

2 голосов
/ 23 декабря 2011

Попробуйте что-нибудь так: http://jsfiddle.net/ETGyq/

У меня сейчас нет времени, но я могу продолжить это завтра.

2 голосов
/ 23 декабря 2011

Сортируемый пользовательский интерфейс jQuery имеет обратный вызов 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 сортируемых элементов.

...