Draggable search pane

<table>
<tr>
<td valign="top">&nbsp;</td>
<td id='gridTD' style="vertical-align:top;">
<iframe name="exportIF" id="exportIF" src="" style="visibility:hidden;" width="0" height="0"></iframe>

<div id='reportmain' style="position:relative;">
<div id="advancedsearch" class="ui-jqgrid ui-widget ui-corner-all"
style="margin:35px; padding:10px; position: absolute; left:0px;
top:75px; font-size:8pt; z-index:99;
background-color:#DDECF7; color:#0E539E; width:600px">
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=left>
<div onmouseover='$("#advancedsearch").draggable("enable");' onmouseout='$("#advancedsearch").draggable("option","disabled",true)'
style='cursor:move; width:20px; height:20px;'>
<img src="images/move.png"/>
</div>
</td>

<td align="right">
<span class='ui-jqgrid ui-icon ui-icon-circle-close'
style="left:" onclick='toggleAdvancedSearch();'>
</span>
</td>
</tr>
</table>
<div style="padding:5px; height:300px; background-color:#DDECF7;
color:#0E539E; font-size:9pt;">
<form id="advancedsearchform">
<table class="ui-jqgrid ui-widget">

<tr>
<td align='center'>
<input type="button" style='border:1px solid #0E539E;
background-color:#FFF;' name='Apply' value='Apply Filter'
onclick='applyAdvSearch();'>&nbsp;&nbsp;&nbsp;&nbsp;
<b>All Demographics</b>&nbsp;
^{<input name='all_check' type=checkbox
onclick="if(this.checked==true){
selectNoneorAllAdvSrch(null,'all');
}
else{
selectNoneorAllAdvSrch(null,'none');
}">}
</td>

</tr>
<tr>
<td>
<div style="overflow-y:auto; overflow-x:hidden; height:275px;
width:575px; border:1px solid #555;">
<table class="advsearch" id="advsearchbox">
</table><!-- table gender -->
</div>
</td>
</tr>
</table><!-- table adv_search_demo_outer-->



I've tried the following:

$("#advsearchbox").draggable({disabled: false});
$("#advsearchbox").draggable();

and nothing works.

The box starts as hidden and then appears after link is clicked. I just want to drag the box.

It's invisible I think because there's nothing within the table, so you can't see it to drag it. If I add some code into your table:


<table class="advsearch" id="advsearchbox">
<tr>
<td>Some text</td>
</tr>
</table><!-- table gender -->


then it's draggable with:


$(document).ready(function(){
$("#advsearchbox").draggable();
})

The table starts as invisible, but we can click a link to get it to pop up.

That works. But when it pops up, it's not draggable.