jQuery UI 仅在特殊区域删除元素

Question

我对 jQuery UI 的拖放有疑问。我创建动态的新元素，并将其放置在屏幕上的四个区域之一。这些元素是可拖动的，我可以将它们放置在整个屏幕上。但我希望这些元素只能放置在三个区域之一。

我在这里创建了一个完整的工作示例： http: //jsbin.com/enusu4/

通过单击红色边框区域中的文本，将创建一个新元素并将其放置在绿色区域中drop1。该元素现在只能拖放到绿色区域之一（drop1、drop2或drop3），而不是其他地方。我怎样才能做到这一点？

最好的问候，蒂姆。

Answer 1

我在这里回答了一个类似的问题，经过一些修改它可以做你想要的事情：
Javascript：

$(function() {
    $('.drag').draggable({
        revert: "invalid",
        scope: "items"
    });
    $('#droppable').droppable({
        scope: "items",
        // if you want to disable the dragging after drop un-comment this
/*
        drop: function(e, ui) {
            $(ui.draggable).draggable({"disabled":true});
        }
        */
    });
    $('#droppable2').droppable();
    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable({
            revert: "invalid",
            scope: "items"
        });
    });
});

HTML：

<div><button type="button">Add box</button></div>
<div id="droppable">Drop here</div>
<div id="droppable2">Out of scope!</div>
<div class="clear"></div>
<div id="cont">
    <div id="draggable" class="drag">Drag me</div>
    <div id="draggable2" class="drag">Drag me</div>
</div>

示例链接

编辑：好的，这是更新：
Javascript：

$(function() {
    var dragOptions = {
        revert: "invalid",
        scope: "items",
        helper: "clone"
    }
    $('.drag').draggable(dragOptions);
    $('.droppable').droppable({
        scope: "items",
        drop: function(e, ui) {
            var $drop = $(this);
            $(ui.draggable).draggable({
                "disabled": true
            }).appendTo($drop);
        }

    });
    $('#droppable2').droppable();

    $(':button').click(function() {
        var $box = $('<div class="drag">Drag me</div>');
        $('#cont').append($box);
        $box.draggable(dragOptions);
    });
});

HTML：

<div><button type="button">Add box</button></div>
<div style="float: left;"><h3>Drop here:</h3>
    <div class="drop1 droppable"></div>
</div>
<div style="float: left;"><h3>Drop here:</h3>
    <div class="drop2 droppable"></div>
</div>
<div style="float: left;"><h3>Out of scope!</h3>
    <div id="droppable2"></div>
</div>
<div class="clear"></div>
<div id="cont">
    <div class="drag">Drag me</div>
    <div class="drag">Drag me</div>
</div>

示例链接 2