我有几个divs 在彼此之上。顶部的需要可拖动，而其下方的仍应可单击。我附上下面的图片，以便您可以更多地理解我的意思：
绿色div的 s 在其中一个单元格中。当我单击其中一个单元格时，我会得到上面的菜单。我希望能够抓取绿色 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 是可拖动的，而底部的仍然是可点击的？