How to sort th in a thead row using jQuery UI sortable?

Question

Hello everyone!

I'm trying to make a very simple grid plugin myself. My problem starts when I want to allow the user to change the columns order (not sort the table rows, change, e.g. the first column to show at the all right of the table). I'm using jQuery UI sortable but I found out that when the user starts dragging a th, jquery ui adds a new th in the thead. That makes the last th (the one wich is more to the right of the table) get out the table horizontally!!

When I drop the th I'm dragging, the added th is removed, but in Chrome the last th (the one moved to the right, out of the table) does not get back into the table. In IE and FF it does get back into the table, but still the effect while dragging is very uggly.

My code:

table.find("thead>tr").sortable({
    axis: "x",
    placeholder: "ui-state-highlight",
    handle: ".sortable",
    start: function(event, ui) {
        /* I'm doing some stuff */
    },
    update: function(event, ui) {
        /* I'm doing some stuff */
    }
});

Sorry for my bad english, thanks in advance.

Diego

Update:

Please if the post is not clear tell me and I'll try to change it. Thanks!