jQuery IU droppable - 如果另一個物品被放在同一區域，防止物品在特定區域被丟棄

Question

如果另一個物品被放置在同一區域，我需要防止物品在特定區域被丟棄。

有沒有一種方法（可能通過使用禁用函數）使用jQuery UI來做到這一點？

下面是一個例子：

http://jsfiddle.net/Laurent514/GyEF3/

下面的代碼被用於通知在其上的項目滴入懸浮窗的ID的用戶。我需要的是一個函數，如果項目1已經放在位置1上，將會阻止用戶將項目2放在位置1上。任何想法？如果一個區域已被一個物品「佔用」，我需要一種防止碰撞的東西。

$(".item").draggable({ 
    snap: ".dropzone", 
    stop: function (event, ui) { 
    var item = this; 
    $('#dropzones li').each(function(){ 
     if($(item).position().left == $(this).position().left) 
      alert($(this).attr('id')); 
    }); 
    } 
}); 

謝謝！

洛朗

Answer 1

您需要可棄添加到您的拖放區的元素。我還添加了對可拖動對象的還原。無論項目是否被「丟棄」，您的位置檢查總是會通過。我使用了out和drop事件的組合來啓用/禁用放下區域後的放置區域。這與使用回覆將得到您想要的結果。還有一些方法可以定製「開箱即用」恢復功能以滿足您的需求。

$(".dropzone").droppable({ 
    disabled: false, 
    out: function (event, ui) { 
     $(this).droppable("option", "disabled", false) 
    }, 
    drop: function(event, ui) { 
     $(this).droppable("option", "disabled", true); 
    } 
}); 

更新jsFiddle