Hello, I am having an issue with a jQuery UI script I am trying to write that will allow me to do drag and drop re-ordering of a table's columns. (I am a big of a jQuery noob, so excuse if I am missing anything obvious).
You can see the issue I am having if you go to http://www.crazymutthosting.com/jQueryTesting/testing2.html. Try dragging one of the column headers (defined as draggable) over one of the yellow column separators (defined as droppable). The column is moved after the droppable target (cloned and inserted, actually) and, currently, the original column is simply hidden, although I plan to remove it all together in the final version. However, you will notice that they header is moved far off to the right. It is almost as if when it clones the column header, it is also cloning the offset value and applying that to the new one. Here is my jQuery code: //set all th elements in the header row to be draggable items... $("tr.rpt_header_row th").not('.sep').draggable({ revert: 'valid' }); $(".sep").droppable({ tolerance: 'touch', hoverClass: 'ui-state-hover', over: function(event, ui) { $(this).css('width', ''+$(ui.draggable).width()+'px'); }, out: function(event, ui) { $(this).css('width', '1px'); }, 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).prevAll().length + 1; var iDroppable = $(this).prevAll().length; $('tblTest').add('td:nth-child(' + iDraggable + '),th:nth- child(' + iDraggable + ')').each( function() { $(this).prev().add($(this)).clone (false).insertAfter($(this).parent().children('td,th').eq(iDroppable - 1)); $(this).hide(); $(this).prev('td,th').hide(); } ); } }); Any help would be greatly appreciated. Bob Gibilaro -- 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=.
