Question

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

但现在当您将项目拖到容器中时，它无法将其拖出了。

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/

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

1 个答案: