How to make the Draggable element to get visible on top of all the element in the screen while dragging?

Question

I need to to implement the drag and drop feature in SAPUI5 Table and Tree Table.

I have a table with a set of names which a user should be able to drag and a Tree Table which should accept the dragging object, so it is defined as a drop area.

I used JqueryUI to make the controls as drag and drop, which is working fine.

The problem is when I drag the name towards the Tree Table it is getting hidden behind the table which makes the user confused.

When I go through the code, I found out that this issue occurs due to the position related to CSS, which is applied default in SAPUI5.

Code for drag and drop:

var oMemberId;
$(".selector Table").draggable({
        helper: "clone",
        cursor: "pointer",
        revert: "invalid",  
        zIndex: 9999,
        start: function(event) {
            oSelectedId = this.parentNode.previousSibling.firstChild.childNodes[0].value;
                }
}).disableSelection();           

$(".selector treetable").droppable({ 
    drop: function(event){
        var dataLevel=(this.attributes["data-sap-ui-level"].value);
        var oDropAreaId = this.childNodes[2].textContent;
    }
}).disableSelection();

How can I prevent the dragged item from hiding?

Answer 1

var oMemberId; $(".selector Table").draggable({ helper: "clone", cursor: "pointer", revert: "invalid",
zIndex: 9999, containment:"window", start: function(event, ui) { oMemberId = this.parentNode.previousSibling.firstChild.childNodes[0].value; }, drag:function(event, ui) { $(".selector div.sapUiTableCnt,.selector div.sapUiTableCtrlScr").css("overflow","visible"); } }).disableSelection();

I am over writing the css on drag.

Answer 2

By default, the dragged item gets set the class "ui-draggable-dragging" (check by yourself in the console).

So, you just need to alter the z-index in css:

.ui-draggable-dragging {
    z-index:99999;
}

Answer 3

Manipulate the z-index CSS property on dragstart of the dragged object for during the drag and then put it back afterwards.

Javascript:

$( ".selector" ).on( "dragstart", function( event, ui ) {
    $(ui.helper).css('z-index', '100000');
} );

$( ".selector" ).on( "dragstop", function( event, ui ) {
    $(ui.helper).css('z-index', '1');
} );