javascript - 如何让两个 Javascript div 在彼此重叠时可以拖动？

Question

我有几个 div 彼此重叠。最上面的需要是可拖动的，下面的应该仍然是可点击的。我附上下面的图片，以便您可以更多地理解我的意思:

绿色的 div 位于其中一个单元格中。当我点击其中一个单元格时，我会看到上面的菜单。我希望能够抓取绿色 div，如果我在 mouseclick 事件的内部单击，将在父 div 后面的单元格上触发。

这是 div 的 html，以便您更好地理解结构:

<!-- Spot 00,30 --->
<div id="2_0" class="spot"> </div>

<!-- Spot 15,45 --->
<div id="2_0_1" class="spot"> </div>
<!-- Spot 00,30 --->
<div id="2_1" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 15,45 --->
<div id="2_1_1" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 00,30 --->
<div id="2_2" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 15,45 --->
<div id="2_2_1" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 00,30 --->
<div id="2_3" class="spot" style="background: none repeat scroll 0% 0% transparent;">
<div class="wc-event green ui-draggable" ondblclick="showAppointment(20)" style="display: block; height: 210px;" data-id="20" data-type="booking">
</div>
<!-- Spot 15,45 --->
<div id="2_3_1" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 00,30 --->
<div id="2_4" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 15,45 --->
<div id="2_4_1" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 00,30 --->
<div id="2_5" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 15,45 --->
<div id="2_5_1" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>
<!-- Spot 00,30 --->
<div id="2_6" class="spot" style="background: none repeat scroll 0% 0% transparent;"> </div>

这是深绿色 div。

我怎样才能使顶部的 div 可以拖动，而底部的 div 仍然可以点击？

Answer 1

虽然您可以使用事件委托(delegate)在一个地方捕获多个元素上的事件，但是您将无法触发被另一个元素遮挡的 div 的点击事件。