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

我对jQueryUI的拖放操作有问题。我动态地创建新元素，这些元素放在屏幕上的四个区域之一。这些元素是可拖动的，我可以把它们放在整个屏幕上。但我希望这些元素只能放在三个区域中的一个

我在这里创建了一个完整的工作示例：

通过单击红色边框区域中的文本，将创建一个新元素并将其放置在绿色区域

drop1

。现在，此元素只能拖放到其中一个绿色区域（

drop1

、

drop2

或

drop3

），而不能拖放到其他区域。我该怎么做

---

向你问好，蒂姆。

我已经回答了一个类似的问题，经过一些修改，它可以做你想做的事情：
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"
        });
    });
});

$(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);
    });
});

$（函数（）{
$（'.drag'）.draggable({
回复：“无效”，
范围：“项目”
});
$（“#可拖放”）。可拖放({
范围：“项目”，
//如果要禁用拖放后的拖动，请取消此注释
/*
drop：函数（e、ui）{
$（ui.draggable）.draggable（{“disabled”：true}）；
}
*/
});
$（'#droppable2'）.droppable（）；
$（'：按钮'）。单击（函数（）{
var$box=$（'Drag me'）；
$（'#cont'）。追加（$box）；
$box.draggable({
回复：“无效”，
范围：“项目”
});
});
});

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>

<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>

添加框
到这里来
超出范围！
拖我
拖我

编辑： 好的，这里有一个更新：
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"
        });
    });
});

$(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);
    });
});

$（函数（）{
var dragOptions={
回复：“无效”，
范围：“项目”，
助手：“克隆”
}
$（'.drag'）.draggable（dragOptions）；
$（'.droppable'）.droppable({
范围：“项目”，
drop：函数（e、ui）{
var$drop=$（本）；
$（ui.draggable）.draggable({
“残疾”：正确
}).追加（减少美元）；
}
});
$（'#droppable2'）.droppable（）；
$（'：按钮'）。单击（函数（）{
var$box=$（'Drag me'）；
$（'#cont'）。追加（$box）；
$box.draggable（dragOptions）；
});
});

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>

<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>

添加框
请点击此处：
请点击此处：
超出范围！
拖我
拖我

---

非常感谢。但是我需要红色元素的左上角在里面，因为我必须保存相对于放置区域的坐标。因此，如果我将元素拖动到放置区域，左上角是0px/0px。在您的演示中，如果我将元素拖到放置区域之外一点，它也会被放置。我希望你明白我的意思。。。更好：我做了一个屏幕截图：你看到元素被删除了，但是它的左上角在黄色区域之外，所以我会有负坐标。好的，我已经更新了我的答案。我想这是一个更好的方法。顺便说一句，灵感来自jQueryUI Droppable哦，对不起，元素应该放在任何位置，这是一种白板，应该以这种方式灵活。嗯，你应该详细阐述一下。无论如何，这是我能得到的最接近的。虽然这可能解决问题，包括解释会有助于操作。