如何在拖动时使Draggable元素在屏幕中的所有元素上显示？

Question

我需要在SAPUI5表和树表中实现拖放功能。

我有一个表，其中包含一组用户应该能够拖动的名称和一个应该接受拖动的树表对象，因此它被定义为 drop 区域。

我使用JqueryUI将控件设置为拖放，这样可以正常工作。

问题是，当我将名称拖向树表时，它会隐藏在桌子后面，这会让用户感到困惑。

当我查看代码时，我发现此问题是由于与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

默认情况下，拖动的项目会设置类＆＃34; ui-draggable-dragging＆＃34; （自己在控制台中查看）。

所以，你只需要改变css中的z-index：

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

Answer 2

在拖动过程中操纵拖动对象的dragstart上的z-index CSS属性，然后将其重新放回。

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

Answer 3

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。