jQuery UI Drag and Drop: Cloned Item Loses Functionality
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
**************************************************************************
*/<br clear="all">
See a demo here:
<a href="http://www.crazymutthosting.com/jQueryTesting/testing2.html">http://www.crazymutthosting.com/jQueryTesting/testing2.html</a>
I would appreciate any assistance.
Thanks!
--
Bob Gibilaro, MCDBA, MCAD
Crazy Mutt Design
Graphic Design, Web Development,
Database & Custom Software Development
(615) 419-7947
<a href="mailto:bob@crazymuttdesign.com">bob@crazymuttdesign.com</a>
--