当其他 div 放入其中时，使可拖动、可放置的 div 不可拖动

Question

我有一个视图，它将预订和表格显示为 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>

我的看法：

<div id="tablewrapper">
   <div class="draggableres reservation">reservation 1</div>

   <div class="draggable table ui-widget-content">
   </div>
</div>

当我现在运行它并删除预订时，预订不再是可拖动的，而不是表格。 它在一个循环中，所以

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

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

Answer 1

如果您致电.draggable().draggable()，您可以只禁用预订：

更新

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

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

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

这是一个简单的Demo Fiddle