Verbunden sortierbare Listen

Question

Ich arbeite mit angeschlossenen sortierbare Listen und brauche die Möglichkeit, eine zusätzliche Liste hinzufügen, aber es funktioniert einfach nicht.

Ich habe ein XHTML wie folgt aus:

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

, wo Elemente sortierbar sein muss, und der Benutzer hat in der Lage sein, sie von einem .line zum anderes zu ändern. Aber bei der Sortierung, eine leere zusätzliche Zeile hinzugefügt werden muss, falls der Benutzer ein Element in einer neuen Zeile zu setzen.

Ich habe versucht, einen div.line Hinzufügen # Inhalt div, aber Elemente können dort nicht fallen gelassen werden.

Jede Idee?

Danke!

Answer 1

Dies sollte das tun, was Sie wollen. Aber wirklich ist nicht trivial und stark wie die Handhabung genau Markup zugeschnitten Sie zur Verfügung gestellt. Wenn Sie nicht verstehen oder es funktioniert nicht für Sie einen Kommentar.

Hier finden Sie eine kurze Demonstration http://jsbin.com/uhoga ( http://jsbin.com/uhoga/edit für den Code)

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