javascript - 连接的可排序列表

Question

我正在使用连接的可排序列表，并且需要能够添加额外的列表，但它不起作用。

我有一个像这样的 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>

其中元素必须可排序，并且用户必须能够将它们从一个 .line 更改为另一行。但排序时，必须添加一个额外的空行，以防用户想要将元素放置在新行中。

我尝试向 div#content 添加 div.line，但无法将元素拖放到那里。

有什么想法吗？

谢谢!

Answer 1

这应该可以满足您的要求。但这确实是不平凡的，并且经过专门定制，可以完全处理像您提供的那样的标记。如果您不明白这一点或者它对您不起作用，请发表评论。

在此处查看快速演示 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++;
});