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

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 */
    }
});

Sor开发者_JAVA技巧ry 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!

I had the same problem, and finally found a workaround. Basically, JQuery UI Sortable checks the orientation of an element when it is first created. However, if the element does not have any items in it to begin with, it will never be considered a horizontal element. The solution is to destroy and re-create the sortable object every time an item is dropped in to it. Specific code can be found on my blog:

http://www.judeosborn.com/post/5751510741/jquery-sortable-droppable-orientation-problem

I've reported this issue to the devs as well:

http://bugs.jqueryui.com/ticket/6702#comment:15

Issue #1: The Chrome(i.e. webkit browser) bug is not fixed yet, but is documented here: - http://bugs.jqueryui.com/ticket/4765

Issue #2: Sortable using axis: 'x', is improved with jQuery 1.8.12, but still has a bug that prevents it from detecting that axis: 'x' was specified. I have submitted solution here: - http://bugs.jqueryui.com/ticket/6702

Not a solution (yet) but a hack:

$var.sortable({
    placeholder: '.my-placeholder'
});

css:
.my-placeholder {
    display: none;
}

I'm now looking at hiding the placeholder during certain events or trying to conditionally display it. I'll update if I get anywhere but this hack stops the 'extra column' problem somewhat.