jQuery：拖放到多个列表，不可追加或重新拖动

Question

我正在尝试创建从一个列表到其他两个列表之一的拖放操作。我一直在尝试使用draggable 和droppable，但是这个可排序的演示看起来更像我想要的：http://jqueryui.com/sortable/#connect-lists

由于我的严格要求，我正在尝试使用可拖动/可放置：

1. 我在页面上打印了几天

2. 每天有 3 个列表：入站、待处理和已处理

3. 可以将来自入站的项目拖到待处理或已处理列表中

4. 这些项目将被附加到应用列表的底部

5. 无法拖动待处理和已处理列表中的项目，但源自入站列表的项目除外

由于这些，我的想法是让各个入站列表项可拖动并附加到应用列表的末尾。

这是我正在使用的 JS 代码：

$(document).ready(function() {
    $('li.drag').draggable({
        revert: "invalid",
        revertDuration: 100
    });
    $('.pending-list').droppable({
        accept: ".inbound li",
        drop: function(event, ui) {
            $(this).appendChild($(ui));
        }
    });
    $('.processed-list').droppable({
        accept: ".inbound li",
        drop: function(event, ui) {
            $(this).append($(ui));
        }
    });
});

这是我的小提琴，但如您所见 (1) 它不适用于列表的底部，并且 (2) 之后我无法再次移动它： http://jsfiddle.net/wGWTS/1/

Answer 1

编辑：稍微更改了代码，因为入站最后一个在没有成员时表现得很有趣。

我认为您希望使用sortable 的connectWith 和items 选项的组合。 sortable 的部分功能是通过connectWith 接受其他列表中的项目，因此您无需设置为droppable。通过使用items 属性，您可以选择列表的哪些成员应该是可排序的，因此要强制条件#5，您只希望来自入站列表的项目是可排序的。这是通过为所有入站列表项指定“入站”类来完成的。

这是一个包含入站、待处理和出站列表的示例。入站项目可以在所有 3 个列表之间移动，而源自待处理或出站的项目根本无法移动。请看这里的小提琴：http://jsfiddle.net/ULmrD/4/

HTML

<div id=inbound class=sort>
    <ul>
        <li><b>Inbound</b></li>
        <li class=inbound>Inbound Item 1</li>
        <li class=inbound>Inbound Item 2</li>
        <li class=inbound>Inbound Item 3</li>
    </ul>
</div>
<div class=sort id=pending>
    <b>Pending</b>
    <ul>
        <li>Pending Item 1</li>
        <li>Pending Item 2</li>
    </ul>
</div>

<div class=sort id=outbound>
    <b>Outbound</b>
    <ul>
        <li>Outbound Item 1</li>
        <li>Outbound Item 2</li>
    </ul>
</div>

CSS

div.sort{
    border:1px solid black;
    display:inline;
    width:175px;
    float:left;
}
ul{
    height:200px;
    width:175px;
}

jQuery

$(document).ready(function() {
    $('div.sort li').disableSelection();

    $('#pending ul').sortable({
        revert: 'invalid',
        connectWith: "#inbound ul, #outbound ul",
        items: "li.inbound"
    });

    $('#outbound ul').sortable({
        revert: 'invalid',
        connectWith: "#inbound ul, #pending ul",
        items: "li.inbound"
    });

    $('#inbound ul').sortable({
        revert: 'invalid',
        connectWith: "#pending ul, #outbound ul",
        items: "li.inbound"
    });

});