The latest version of jqGrid employs jQuery UI for column reordering, that works quite nicely. You may want to look at how they are doing it.
http://www.trirand.com/jqgrid/jqgrid.html Hth, Dave On Nov 12, 11:07 am, Bob Gibilaro <[email protected]> wrote: > Hello, > > I have been working to create a jQuery script that allows for drag and drop > table column re-ordering. > > I have been successful. Basically, when I drag one column onto another it > clones the dragged column and inserts it after the dropped column. However, > once this happens, the cloned column loses the draggable functionality. > > Here is my jQuery code, followed by a link to a working example: > > /* > > ************************************************************************** > DRAGGABLE COLUMN HEADERS: BEGIN > > ************************************************************************** > */ > //set all th elements in the header row to be draggable items... > $(".drag").draggable({ > revert: true, > opacity: 0.50, > helper: 'clone' > }); > > //set all of the table header cells to be droppable targets... > $("tr.rpt_header_row th").not('.ignore-drop').droppable({ > tolerance: 'pointer', > hoverClass: 'ui-state-hover', > greedy: true, > drop: function(event, ui) { > //get the index of the column we want to move and the column we > are placing it after... > var iDraggable = $(ui.draggable).parent().prevAll().length; > var iDroppable = $(this).prevAll().length; > $(ui.helper).remove(); > > //for each table row, find copy the appropriate cell from the > dragged column and insert after the dropped column.... > $('.j-table').add('tr').each( > function() { > > $(this).children('th').eq(iDraggable).clone(true).insertAfter($(this).children('th').eq(iDroppable)); > > $(this).children('td').eq(iDraggable).clone(true).insertAfter($(this).children('td').eq(iDroppable)); > $(this).children('th').eq(iDraggable).hide() > $(this).children('td').eq(iDraggable).hide() > } > ); > } > }); > > /* > > ************************************************************************** > DRAGGABLE COLUMN HEADERS: END > > ************************************************************************** > */ > > See a demo here:http://www.crazymutthosting.com/jQueryTesting/testing2.html > > I would appreciate any assistance. > > Thanks! > > -- > Bob Gibilaro, MCDBA, MCAD > Crazy Mutt Design > Graphic Design, Web Development, > Database & Custom Software Development > (615) 419-7947 > [email protected] -- You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=.
