I’m using jQuery to drive my AJAX UI. I have a table of data, and I want to allow the user to reorder the columns in the table by dragging and dropping them. I’d like the user to be able to grab the header for a column and move it. The row of data underneath should follow. Note that I’m not interested in sorting the data or in reordering rows, but in allowing the user to change the order of the columns.
Is there an existing solution? I tried using the standard jQuery sortable call on the <th> elements, but of course that doesn’t work. I browsed through the jQuery plugins site and didn’t find anything. Will I need to write a jQuery plugin?
Edit: Note that jQuery, Dojo, etc. (the free ones) are really the only option for a JS framework. I can’t get a license for anything commercial like ExtJS.
If you are willing to pay for a license you might try Ext JS instead of just jQuery. There are some pretty powerful grid features that include what you are trying to do.
http://www.extjs.com/deploy/dev/examples/grid/array-grid.html