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

Question

我想将一个项目拖入容器.以及是否在容器中的项目,它既可以排序,也可以将项目从容器中拖出,顺序仍然正确.

但是现在当你将一个项目拖入容器时,它就不能再将它拖出来了.

这里是jsfiddle链接

anyone can help ? huge thanks!

Answer 1

将sortables包装到他们自己的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/