У меня дан красный квадрат внутри зеленого, а внутри зеленого есть желтый квадрат, так вот, нужно чтобы красный квадрат мог передвигаться только по зеленому не заходя не территорию желтого, пытался сравнивать координаты и через флаги, никак не получается это реализовать
Вот код:
<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>