Search code examples
jquerydrag-and-dropclone

How to create 'ghost' image of table row on drag

I created a basic jQuery script to allow dragging and dropping table rows to reorder them. Everything is working great - the only thing that I can't figure out is how to create a 'ghost' image of the row while it is being dragged.

I tried cloning the row

$(this).clone().addClass('dragClone');

With the following CSS

.dragClone{opacity:0.4;position:absolute;z-index:1500;}

But nothing showed up. Figuring that the TR may need to exist within a table, I cloned the entire table, emptied the rows and appended the selected TR as follows:

$('.dragTable').clone().addClass('dragClone');$('.dragClone').find('tbody').empty().append($('.origZone'));

(origZone is the class that's given to the TR being dragged)

Still nothing is showing up.

I've never used clone before, so I have no idea if I am even close, or on the right track at all! The goal is to create a ghost image similar to the one used in the Redips_drag plugin (http://www.redips.net/javascript/drag-and-drop-table-row/)

Solution

  • I was able to solve this problem by doing the following:

    Creating an empty div on the page:

    if($('#dragContain').length<1){$('body').append('<div id="dragContain"style="width:96%;height:1px"></div>');}

    Saved the containing table to a variable, cloned it, removed the tbody contents and hid the thead, appended the row, which was saved as a variable, appended it to the previously mentioned div

    $table=$(this).closest('.dragTable');$row=$(this).closest('tr').clone();

$table.find('tbody').remove();$table.find('thead').hide();$table.append($row);$('#dragContain').addClass('dragClone').append($table);

    I'm not sure if this was the best way to accomplish it, but it works.

    FYI - I had to use the following CSS to allow the hover affect to work on the underlying rows

    #dragContain{pointer-events:none;}

    Hope that this helps someone!