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

Question

我想将一个项目拖到容器中。无论元素是否在容器中，它都可以排序，并且您可以将项目拖出容器，顺序仍然正确。

但是现在当你将一个项目拖入容器时，它无法将其拖出不再了。

here is jsfiddle link

anyone can help ? huge thanks!

Answer 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;
}

这是 fiddle :http://jsfiddle.net/bRbyW/3/