Перемещение блока внутри другого блока
Подскажите, пожалуйста, как сделать так, чтобы красный квадрат при перемещении не заходил за пределы серого.
<html>
<head>
<title></title>
</head>
<body onload="init(event)">
<div id="er" style="position:absolute;left:0;top:0;width:500px;height:500px;background-color:#C0C0C0"></div>
<div id="kv" style="position:absolute;left:10;top:10;width:50px;height:50px;background-color:red"></div>
<script>
flag=false;
function init()
{
document.all.kv.onmousemove=dragIt
document.all.kv.onmouseup=osvobodi
document.all.kv.onmousedown=zachvat
}
function dragIt(evt)
{
sobytie = (evt) ? evt : (window.event) ? window.event : "";
if(flag)
{ document.all.kv.style.top=sobytie.clientY-25;
document.all.kv.style.left=sobytie.clientX-25;
}
}
function osvobodi()
{ flag=false;//устанавливается запрет на перетаскивание
}
function zachvat()
{ flag=true;
//Перетаскивание разрешается
}
</script>
</body>
</html>