listas classificáveis ??conectados

Question

Eu estou trabalhando com listas classificáveis ??conectados e precisa a capacidade de adicionar uma lista extra, mas ele simplesmente não funciona.

Eu tenho um XHTML assim:

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

onde elementos devem ser classificáveis, eo hast usuário seja capaz de mudá-los de um .line para o outro. Mas quando a classificação, uma linha extra vazio deve ser adicionado, no caso do usuário quer colocar um elemento em uma nova linha.

Eu tentei adicionar um div.line a div conteúdo #, mas elementos não pode ser descartado lá.

Qualquer idéia?

Obrigado!

Answer 1

Isso deve fazer o que quiser. Mas realmente não é trivial e fortemente adaptada para lidar com exatamente marcação como aquele que você forneceu. Se você não entender isso ou ele não funciona para você postar um comentário.

Verifique aqui para uma demonstração rápida http://jsbin.com/uhoga ( http://jsbin.com/uhoga/edit para o código)

//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++;
});