Question

Below is the code where I am binding a table row as draggable. However the dragged item appears below the splitter (http://methvin.com/splitter/splitter.js) This issue seems to be with the z-index. I tried multiple ways to set the z-index of dragged item. However this does not seem to work. The bindDragAndDrop method is triggered with the mouse is hovered over the table. Could some one point me what might be the issue ?

function bindDragAndDrop(){

    var table = $('TABLE .dataTable');
        table.find('TR TD.columnClass').bind('mousedown', function() {
            table.disableSelection();
        }).bind('mouseup', function() {
            table.enableSelection();
        }).draggable({
         helper: function(event) {
         return $('<div div="dragDiv" class="drag-table-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone())
 .end().insertAfter(table);
            },
            cursorAt: {
                left: -5,
                bottom: 5
            },
            cursor: 'move',
            distance: 10,
            delay: 100,
            scope: 'cart-item',
            revert: 'invalid'
        });         
 }

Answer 1

I tried setting the zIndex multiple ways it did not work. As shown below the appendTo(“body”) resolved this issue

 return $('<div class="drag-table-item"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end().insertAfter(table).appendTo("body");