How to make a Draggable element get visible on top of the whole element on the screen when dragging and dropping?

Question

I need to implement the drag and drop function in the table table and the SAPUI5 tree .

I have a table with the set of names that the user must have drag and drop, and the table of the tree that should accept the drag and drop object, so it is defined as the drop area .

I used JqueryUI to make the controls like drag and drop, which works fine.

The problem is that I drag the name into the tree table, which is hidden behind the table, which makes the user embarrassed.

, , - , CSS, SAPUI5.

:

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();

?

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();

css .

Answer 2

"ui-draggable-dragging" ( ).

, z-index css:

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

Answer 3

CSS z-index dragstart , .

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');
} );