zindex manipulation jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
http://js/jquery-1.7.1.min.js
http://js/jquery-ui-1.8.17.custom.min.js

$(function() {
$( ".layer" ).draggable({
start: function( event, ui ) {
setZindex($(this).attr("id"))
}
});
});

function setZindex(ui){
var index_highest = 0;

$(".layer").each(function() {
// always use a radix when using parseInt
var index_current = parseInt($(this).css("zIndex"), 10);
if(index_current > index_highest) {
index_highest = index_current;
}
});

$("#"+ui).css("zIndex", parseInt(index_highest)+1);

}

<style>
.layer{
width:50px;
height:50px;
border:1px solid #000000;
background-color:red;
}
</style>
</head>

<body>


1

3

</div>
</body>
</html>