如何让因父容器overflow:hidden隐藏的jQuery UI元素不可放置？

我们通过给父容器设置height:0px和overflow:hidden来隐藏可放置（droppable）元素列表，但这些隐藏的元素仍然位于下一个可见元素列表的下方。当把可拖拽（draggable）元素拖到第二个可见的可放置列表时，drop事件会触发两次：先触发隐藏元素的事件，再触发目标可见元素的事件。

目前我用的临时办法是在drop()函数里检查事件目标的父容器高度是否为0px，但这种方式太笨拙，希望能让隐藏元素的drop事件完全不触发。

复现代码 #

<style>
.container {
  overflow:hidden;
}

.child {
  height:24px;
  border:solid 1px black;
}
.movable { 
  padding: 0.5em; 
  float: left; 
  margin: 10px 10px 10px 0;
  border:solid 1px red;
}
</style>

<div class="movable">
Hello World
</div>
<div class="container" style="height:0px">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<div class="container" style="height:auto">
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>

<script>
$( function() {
  $('.movable').draggable();
  $('.child').droppable ({
    accept: '.movable',
    drop: function(event, ui) {
      var kid = $(event.target).html();
      alert("dropping movable div onto div " + kid);
    }
  });
});
</script>

解决方案 #

方案1：初始化时只给可见容器内的元素绑定droppable #

直接在绑定事件的时候筛选掉父容器高度为0的child元素，从根源上不给隐藏元素绑定事件：

$(function() {
  $('.movable').draggable();
  
  // 筛选出父容器高度不为0的child，再绑定droppable
  $('.child').filter(function() {
    return $(this).parent('.container').height() !== 0;
  }).droppable({
    accept: '.movable',
    drop: function(event, ui) {
      var kid = $(event.target).html();
      alert("dropping movable div onto div " + kid);
    }
  });
});

方案2：动态禁用隐藏元素的droppable功能 #

如果后续父容器的高度可能动态变化（比如从0改成auto），可以先给所有child绑定事件，再禁用隐藏容器内的元素：

$(function() {
  $('.movable').draggable();
  
  // 先给所有child绑定droppable
  $('.child').droppable({
    accept: '.movable',
    drop: function(event, ui) {
      var kid = $(event.target).html();
      alert("dropping movable div onto div " + kid);
    }
  });
  
  // 禁用父容器高度为0的child的droppable
  $('.child').filter(function() {
    return $(this).parent('.container').height() === 0;
  }).droppable('disable');
  
  // 后续如果容器高度变化，比如把第一个container改成height:auto，只需要调用：
  // $('.container:first .child').droppable('enable');
});

这两种方案都能避免隐藏元素触发drop事件，比在drop回调里判断要更优雅彻底。

内容的提问来源于stack exchange，提问作者Paul L