使可拖动，可丢弃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()您可以禁用只保留：

UPDATE

要禁用表格（从拖动状态），请执行以下操作：

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

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

下面是一个简单Demo Fiddle