draggable div z-index not working when drop in asp panel

draggable div z-index not working when drop in asp panel

i was trying to drag a div to a asp:panel
i'm having an issue of draggable div is always under the panel

html code :
<div class="control_panel">
<div class="control_panel_title">
Weekly Templates
</div>
<div id="weekly-templates">
</div>
</div>
</div>
<asp:Panel ID="dataview" runat="server" ScrollBars="Vertical"
BackColor="white">
<div id="calendar" style="width: 100%;">
</div>
</asp:Panel>
javascript code
$('#daily-templates div.external-event,
#weekly-templates div.external-event').each(function (index, value) {
$(this).draggable({ zIndex: 100000000000000000000000000000000000000000000,
revert: true, revertDuration: 0 }); });
i have tried to change the panel z-index to -10X millions and it didn't work
Question
how can i make this draggable div over the panel