How to make header of a table "draggable"

I have a table. The top row has 2 columns - "header" and "close" but开发者_Python百科ton. I can make the entire table "draggable". How can I make the "header" to be the only element that user can drag in order to move the entire table around?

UPDATED: As tagged, I need to use jQuery. This is what's not working:

$(tblElement).draggable({ handle: "tdDialogHeader" });

I'll assume you're using the jQuery UI. Then you're looking for the "handle" option.

$( "#draggable" ).draggable({ handle: "thead" });

If the solution suggested by Sinetheta doesn't work for you, that means your table doesn't have "tHead" tag as its header. jQuery is not great with tables, especially if they are malformed. Replace the "TR" tag of the first row in your table with "tHead" and try the Sinetheta's code. Should work.