Question

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!

Answer 1

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