当jqueryUI中的其他元素覆盖时，防止droppable接受？

Question

我已经定位了2个容器，这样容器一个覆盖另一个。但是当我将一个物品放到容器上时，丢弃的物品进入两个容器。我如何限制？

//JS Code: 
    $("div.draggable").draggable({ 
     helper: "clone", 
     cursor: "move", 
     containment: 'body' 
    }); 


    $("div.droppable").droppable({ 
     addClasses: false, 
     drop: function (event, ui) { 
     var $draggable = $(ui.draggable), 
      $droppable = $(this); 

     $droppable.html($draggable.clone()); 
     } 
    }); 

演示：http://jsfiddle.net/HL8VR/

Answer 1

感谢@Nal但没有为我工作，所以我创造了这个技巧。

一旦项目被放到它上面，我就会用元素存储一些数据。不幸的是，数据存储在两个Droppables中，我无法隔离。

$("div.droppable").droppable({ 
    addClasses: false, 
    drop: function (event, ui) { 
    var $draggable = $(ui.draggable), 
     $droppable = $(this); 

    $droppable.data({'drop': true, 'draggable': $draggable}); 
    } 
}); 

但是，一旦该项目被删除，我可以找出哪些可放开我徘徊。

$('div.droppable').hover(function() { 
    if ($(this).data('drop') === true) { 
     $(this).html($($(this).data('draggable')).clone()); 

     // Clears the data from both droppables to avoid duplicating the item in them 
     $('div.droppable').data({'drop': false, 'draggable': false}); 
    }   
}); 

演示：http://jsfiddle.net/codef0rmer/AVQVs/