Question

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

由于我的严格要求，我正在尝试使用draggable / droppable：

我在页面上打印了几天
每天有3个列表：入站，待处理和已处理
可以将来自入站的项目拖动到待处理或已处理的列表
这些项目将附加到应用列表的底部
无法拖动待处理和已处理列表中的项目，但源自入站列表的项目除外

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

这是我正在使用的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

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

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

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

<强> HTML

items

<强> CSS

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

<强>的jQuery

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

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

1 个答案: