jQuery UI draggable Options zIndex

Z-index for the helper while being dragged.
$("#eleID").draggable({ zIndex: 100  });

Try to drag squares on top of each other then click toggle z-index
to see different results.
ExampleJquery ui draggable options zindex
Source Code Expand
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script>


<!-- CSS -->
<style type="text/css">
.drag {
    width: 100px;
    height: 100px;
    line-height: 100px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    background-color: lightpink;
}
</style>


<!-- Javascript -->
<script>
    $(function () {
        $("#drag1").draggable({            
            zIndex: 0
        });
        
        $("#drag2").draggable({            
            zIndex: 100 
        });
        
        $("input").click(function(){
       		var drag1 = $("#drag1");
            var drag2 = $("#drag2");
            
            if(drag1.draggable("option","zIndex") == 0){
                drag1.draggable("option", "zIndex", 100);
                drag2.draggable("option", "zIndex", 0);
                
            }else{
                drag1.draggable("option", "zIndex", 0);
                drag2.draggable("option", "zIndex", 100);
            }
            
            drag1.text("z-index:" + drag1.draggable("option","zIndex"));
            drag2.text("z-index:" + drag2.draggable("option","zIndex"));        
        });
    });
</script>

<!-- HTML -->
<div id="drag1" class="drag" style="background-color:orange">z-index:0</div>
<div id="drag2" class="drag" style="background-color:lightblue">z-index:100</div>
<input type="button" value="toggle z-index">


comments powered by Disqus