jQuery ui draggable table by single row

Question

I have a draggable table which all working fine, though I want to be able to drag it from the <th> row inside the table, not from all the <td>'s.

<table id="draggable">
<tr>
<th id="drag">header (can drag table from here)</th>
</tr>
<tr>
<td>normal column (can't drag the table from here)</td>
</tr>
</table>
<script type="text/javascript">
    $( "#draggable" ).draggable({ opacity: 0.5 });
</script>

How can I deal this one?

Answer 1

Hiya working Demo here: http://jsfiddle.net/rAzL8/ & http://jsfiddle.net/rAzL8/1/

Cooleos, so all you need to use :handle property on th tag on your table with draggable and bingo it will just handle the th tag of your table. hope this helps, CHeers

Jquery Code

    $( "#draggable" ).draggable({ opacity: 0.7, handle:'#drag' });

 ​

HTML

<table id="draggable">
<tr>
<th id="drag">header (can drag table from here)</th>
</tr>
<tr>
    <td>normal column (can't drag the table from here) ;)</td> <td>another</td>
</tr>

    <tr>
<td>normal column (can't drag the table from here) ;) </td>
</tr>

    <tr>
<td>normal column (can't drag the table from here);) </td>
</tr>
</table>​