Javascript-форум - Ограничение передвижения объекта по траектории в области

У меня дан красный квадрат внутри зеленого, а внутри зеленого есть желтый квадрат, так вот, нужно чтобы красный квадрат мог передвигаться только по зеленому не заходя не территорию желтого, пытался сравнивать координаты и через флаги, никак не получается это реализовать
Вот код:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<div id="er"
style="position:absolute;
left:100;top:100;width:500;height:500;background-color:green">
</div>

<div id="er1"
style="position:absolute;
left:150;top:150;width:400;height:400;background-color:yellow">
</div>

<body onload="init(event)">

<div id="kv"
style="position:absolute;
left:150;top:100;width:50;height:50;background-color: red">
<div>

<script>

flag=false;
//Связывание событий с функциями
function init()

{//Если мышка двигается то выполняется ф-ция dragIt

document.all.kv.onmousemove=dragIt

//Если кнопка мышки отпускается, то - ф-ция osvobodi

document.all.kv.onmouseup=osvobodi

document.all.kv.onmousedown=zachvat

}

function dragIt(evt)

{//Параметр evt создаётся самим браузером

sobytie = (evt) ? evt : (window.event) ? window.event : "";

if(flag)

{

document.all.kv.style.top=sobytie.clientY-25;

if(parseInt(document.all.kv.style.top)<parseInt(do cument.all.er.style.top)){
document.all.kv.style.top=document.all.er.style.to p;
}

var t=parseInt(document.all.kv.style.top)+parseInt(doc ument.all.kv.style.height);
var ter=parseInt(document.all.er.style.top)+parseInt(d ocument.all.er.style.height);

if(t>ter){
document.all.kv.style.top=ter-parseInt(document.all.kv.style.height);
}

document.all.kv.style.left=sobytie.clientX-25;
if(parseInt(document.all.kv.style.left)<parseInt(d ocument.all.er.style.left)){
document.all.kv.style.left=document.all.er.style.l eft;
}
var l=parseInt(document.all.kv.style.left)+parseInt(do cument.all.kv.style.width);
var ler=parseInt(document.all.er.style.left)+parseInt( document.all.er.style.width);
if(l>ler){
document.all.kv.style.left=ler-parseInt(document.all.kv.style.width);
}

} }

function osvobodi()

{ flag=false;//устанавливается запрет на перетаскивание

}

function zachvat()

{ flag=true;
//Перетаскивание разрешается

}
</script>

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