Drag visuals do not show when used in a jQuery dialog

[bseddon]

jQuery dialogs are shown with a z-index value starting at 10000. When the exedit code generates the drag visual elements (node proxies and an arrow) for a zTree in a jQuery dialog they are added to the body element without a z-index so are not visible to the user.

A solution is to update visual elements with an appropriate z-index value in the onDrag callback. I'm sharing this in case it helps anyone else using a jQuery dialog or other framework containers that use non-default z-index values.

callback:
{
    onDrag: function(e, treeId,treeNodes) 
    {
        // The drag visuals are added to the body without taking into account the z-index
        // which is 10000 or more when the zTree control is shown in a jQuery dialog
        // Use the treeId to locate the parent dialog element
        var dialog = $('#' + treeId).closest('.ui-dialog');
        // Create a z-index value that is higher than the one used by the dialog
        var zIndex = parseInt(dialog.css('z-index'));
        $('.zTreeDragUL').css('z-index',zIndex);                        
        $('#zTreeMove_arrow_tmp').css('z-index',zIndex);
    }
}

[zTree]

Thank you very much. And you can add custom style to zTreeStyle.css

[bseddon]

Yes, you can add css directives to override the default values. However when using jQuery dialogs, the z-index that is needed may vary. If the zTree is added to the only dialog then the z-index will be 10000. But if the zTree is in a popup window shown over another dialog the z-index will be higher and have a value determined by jQuery.

As a result, the z-index value can only use a static value (in a CSS file) if the developer knows the zTree will only ever appear in the first dialog.