当它被jqueryUI中的另一个元素覆盖时防止droppable接受？

【问题标题】：Prevent droppable from accepting when it is overlaid by another element in jqueryUI?当它被jqueryUI中的另一个元素覆盖时防止droppable接受？
【发布时间】：2012-09-21 09:37:59
【问题描述】：

我已经定位了 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/

【问题讨论】：

标签： jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

感谢@Nal，但没有什么对我有用，所以我创建了这个 hack。

一旦将项目拖放到元素上，我就会将一些数据与元素一起存储。不幸的是，数据与我无法隔离的两个 Droppables 一起存储。

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

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

但是一旦物品被丢弃，我就可以确定我悬停在哪个 droppable 上。

$('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/

【讨论】：