jqueryui droppable 和 sortable 可以一起工作吗？答案

【问题标题】：jqueryui droppable and sortable can work together?jqueryui droppable 和 sortable 可以一起工作吗？
【发布时间】：2014-07-22 10:16:09
【问题描述】：

我想将一个项目拖到容器中。以及物品是否在容器中，它都是可排序的，你可以将项目拖出容器，顺序仍然正确。

但是现在当你将一个项目拖入容器时，它不能将它拖出没有了。

here is jsfiddle link

anyone can help ? huge thanks!

【问题讨论】：

不，你不能同时使用这两个东西，你必须使用 jqueryui 编写自定义逻辑
@pareshm 谁告诉你的？
@melvin 因为我也试过了。

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

将可排序对象包装到它们自己的 div 中，并使其也可放置。

<div id="wrap">
    <div id="item-list">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="container">container</div>
</div>

JS：

$("#item-list, .container").sortable();
$("#item-list, .container").droppable({
    accept: ".item-container",
    drop: function (e, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(this).append(dropped.clone().removeAttr('style').removeClass("item-container").addClass("item"));
        dropped.remove();
    }
});

$(".container").droppable({
    accept: ".item",
    drop: function (e, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container"));
        dropped.remove();
    }
});

CSS：

.item, .item-container {
    width:200px;
    height:30px;
    border:1px dashed red;
    margin:10px 0;
    cursor:move;
}

这是小提琴：http://jsfiddle.net/bRbyW/3/

【讨论】：

但是容器不能再排序了，我希望它自己的容器可以和可排序的项目一样排序，无论如何，非常感谢。
我的错误。如果一个列表接受某个类别的项目而另一个列表接受另一个类别的项目，它将起作用。否则他们会混淆。
谢谢你，但是还是有bug，我不能在容器之后拖一个项目，当我从容器中拖出一个项目时，它将是容器之前的最后一个，不能移动到其他地方，我的最终解决方案是here，容器仍然无法排序，但我认为项目经理会忽略这个错误，谢谢！