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

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

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

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

最好的问候，蒂姆。

我回答过类似的问题here https://stackoverflow.com/questions/4564865/draggables-jquery-ui-disable-individual-div-on-droppable/4565398#4565398，经过一些修改，它可以做你想要的事情：
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>

示例链接 http://jsfiddle.net/ifaour/7t9X9/2/

编辑： 好的，这是一个更新：
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 http://jsfiddle.net/ifaour/7t9X9/3/