How to show two different icons for the drop, if drop possible show the arrow icon else show close icon

[AnanthGopal]

In the below image i highlighted some nodes in a black color box, we can't drop any node to that highlighted box. If the drop is possible we will show an arrow icon(highlighted in blue color), if not possible to drop the node we need to show a different icon

How to show two different icons for the drop, if drop possible show the arrow icon else show close icon

[AnanthGopal]

I did the above option,

Step 1: Remove existing css(span.tmpzTreeMove_arrow) from zTreeStyle.css file ----- span.tmpzTreeMove_arrow this css available in zTreeStyle.css file

Step 2: We need to separate classes or styles for drop possible nodes and node possible node.

For example See below code zNodes variable have the data, if the node drop is possible, i provide the data like font:{'color':'black !important'}not possible font:{'color':'red !important'} Full example

        <!--
        var setting = {
            view: {
                fontCss: getFont,
                nameIsHTML: true
            }
        };

        var zNodes =[
            { name:"Possible Drop", font:{'color':'black !important'}},
            { name:"Possible Drop", font:{'color':'black !important'}},
            { name:"Not Possible Drop, font:{'color':'red !important'}}
        ];

        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->

Step 3: Based on custom font i will show the different icon. add the below code in zTreeStyle.css file.

a[class*="tmpTargetNode"][style*="color:black !important;"]:hover:before{
        width:16px; 
        height:16px; 
        display: inline-block; 
        padding:0; 
        margin:2px 0 0 1px; 
        border:0 none; 
        position:absolute;  
        font-family: "Font Awesome 5 Free";
        margin-left: -18px;
        font-weight:bolder;
        font-size:15px;
        z-index:10000; 
        background-color: white !important;
        content: "\f0a9";
        color:#7caf44;      
    } 

For not possible drop

a[class*="tmpTargetNode"][style*="color:red !important;"]:hover:before{
        width:16px; 
        height:16px; 
        display: inline-block; 
        padding:0; 
        margin:2px 0 0 1px; 
        border:0 none; 
        position:absolute;  
        font-family: "Font Awesome 5 Free";
        margin-left: -18px;
        font-weight:bolder;
        font-size:15px;
        z-index:10000; 
        margin-top: -1px;
        content: "\f05e";
        color:red; 
    }    

[AnanthGopal]

@zTree If you have a different idea to achieve this option, please share it