Связанные сортируемые списки - PullRequest
Новая
       8

Связанные сортируемые списки

0 голосов
/ 02 декабря 2009

Я работаю с подключаемыми сортируемыми списками и мне нужна возможность добавить дополнительный список, но он просто не работает.

У меня есть XHTML как это: 

<div id="content">
   <div class="line">
        <span class="element">1</span>
        <span class="element">2</span>
        <span class="element">3</span>
   </div>
   <div class="line">
        <span class="element">4</span>
        <span class="element">5</span>
        <span class="element">6</span>
   </div>
</div>

где элементы должны сортироваться, и пользователь должен иметь возможность изменять их с одной строки на другую. Но при сортировке необходимо добавить пустую дополнительную строку, если пользователь хочет поместить элемент в новую строку.

Я попытался добавить div.line к содержимому div #, но элементы не могут быть там отброшены.

Есть идеи?

Спасибо!

1 Ответ

3 голосов
/ 03 декабря 2009

Это должно делать то, что вы хотите. Но на самом деле это не тривиально и специально настроено для обработки именно такой разметки, как та, которую вы предоставили. Если вы не понимаете этого или это не работает, оставьте комментарий.

Проверьте здесь для быстрой демонстрации http://jsbin.com/uhoga (http://jsbin.com/uhoga/edit для кода) 

//pseudo unique id generator
var uid = 0;

function starter() {
    var lines = $("div.line");
    var len = lines.size();
    //insert empty div.line at end with "unique" id
    lines.eq(len-1).after("<div class='line' id='line"+uid+"' />");
    //make it a sortable too
    $('#line'+uid).sortable({
        //connect with other div.lines which don't have same id
        connectWith: 'div.line:not([id=line'+uid+'])',
        start: starter,
        stop: stopper,
        //needed to stop some "flickering"
        appendTo: 'div.line[id=line'+uid+']',
        items: 'span.element'
    });
    uid++;
    //refresh this sortable so it sees the newly inserted as possible "target"
    $(this).sortable('refresh');
}

function stopper() {
    //remove all div.lines which are empty (have no span.element children)
    $("div.line:not(:has(> span.element))").remove();
}

//initial setup
$("div.line").each(function(i, ele) {
    var jEle = $(ele);
    //assuming the initially present div.line elements have no id
    jEle.attr("id", "line"+uid);
    jEle.sortable({
        connectWith: 'div.line:not([id=line'+uid+'])',
        start: starter,
        stop: stopper,
        //needed to stop some "flickering"
        appendTo: 'div.line[id=line'+uid+']',
        items: 'span.element'
    });
    uid++;
});
...