Jquery 当另一个div掉入内部时，使可拖动、可下降div不可拖动

我有一个视图，它将预订和表格显示为div。 这些桌子是可拖拽和可放下的，而预订处只能拖拽。 我想把一张桌子拖到你想要的位置，然后在上面拖一个预订。 当预订被放在桌上时，桌就不需要再拖了。 这是我现在的代码：

<script>
$(".draggable").draggable({
    snap: ".draggable",
    snapMode: "outer",
    stop: function (event, ui) {
        var finalxPos = $(this).css("left").replace("px", "");
        var finalyPos = $(this).css("top").replace("px", "");
        var itemId = $(this).attr('id');
        var posXid = "posX" + itemId;
        var posYid = "posY" + itemId;
        $('input:text[id="' + posXid + '"]').attr("value", finalxPos);
        $('input:text[id="' + posYid + '"]').attr("value", finalyPos);
        },
}).droppable({
    drop: function(event, ui) {
        $(this).draggable({ disabled: true });
    },
    out: function(ev, ui) {
        $(this).draggable({ disabled: false });
    }
});

    $(".draggableres").draggable({
        snap: ".draggable",
        snapMode: "inner"
    });
</script>

无法工作，因为可能有更多.draggable div

如果调用

.draggable（）.draggable（）

您可以仅禁用保留：

更新

要在删除保留后禁用表（不可拖动），请执行以下操作：

$('.table').droppable({
    activeClass: 'grey',
    hoverClass: 'yellow',
    accept: '.draggables',
    drop: function(event, ui){
       $(this).draggable('disable');
   }
}).draggable();;

$('.draggables').draggable({
    snap: '.table',
    snapMode: 'inner'
});

---

这里有一个简单的

事实上，你所拥有的应该是你所描述的。但是，请注意，禁用可拖动容器后，可能无法单击并拖动包含的可拖动容器，因为外部（已禁用）容器将吞下单击。如果我这样做，则表保留不再可拖动，但表是可拖动的。我希望表在被删除时不可拖动。只需替换ui.draggable.draggable（'disable'）$（this）.draggable（'disable'）我将更新我的代码。：-）如果您需要使用现有代码进一步澄清，请告诉我。我简化了我的答案，以便于调整。

$(".draggable").draggable({disabled: true});

$('.table').droppable({
    activeClass: 'grey',
    hoverClass: 'yellow',
    accept: '.draggables',
    drop: function(event, ui){
       $(this).draggable('disable');
   }
}).draggable();;

$('.draggables').draggable({
    snap: '.table',
    snapMode: 'inner'
});