当两个Javascript div相互重叠时，如何使它们都可以拖动？

我有几个

div

s在彼此之上。上面的那个需要拖拽，下面的那个应该仍然可以点击。我附上下面的图片，以便您能更好地理解我的意思：

绿色的

div

s位于其中一个单元格内。当我点击其中一个单元格时，我会看到上面的菜单。我希望能够抓取绿色的div，如果我在

鼠标单击事件的内部单击，则会对后面的单元格而不是父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仍然可以单击？
虽然您可以使用事件委派在一个位置捕获多个元素上的事件，但您将无法触发被另一个元素遮挡的div的单击事件