Div kollision

Anacondi

Erfahrenes Mitglied
Hallo. ich hoffe bin hier richtig in der rubrik
ich habe 2 div . eines davon steht fest und das andere wird über buttons position gesteuert, kann man also per buttons bewegen.
gibts ne möglichkeit, das , wenn das verschiebbare div an das feste stößt, man in die richtung des festen div nicht weiter verschieben kann, und das ne meldung erscheint "Hier gehts nicht weiter.
Hier mein bisheriger code
HTML:
<html>
<head>

<script type="text/javascript">
                         

var x=100,y=100;               

function domove()
{
  if (document.all)          
  {
    document.all.mobilbox.style.left=x; 
    document.all.mobilbox.style.top=y; 
  }
  else
  if (typeof(document.getElementById)=="function")
                             
  {
    document.getElementById("mobilbox").style.left=x; 
    document.getElementById("mobilbox").style.top=y; 
  }
  else
  if (document.mobilbox)       
  {
    document.mobilbox.left=x;  
    document.mobilbox.top=y;   
  }
  else                        
    alert("Dein bloeder Browser kann das nicht machen.");
}

function moverel(xm,ym)

{
  x+=xm;                       
  y+=ym;                      
  domove();                 
}

function moveabs(xn,yn)

{
  x=xn;                
  y=yn;                      
  domove();                    
}


</script>                      

<style type="text/css">
#rand1 {
	position:absolute;
	width:53px;
	height:352px;
	z-index:1;
	top: 132px;
	left: 391px;
	border: thick ridge #666;
}
</style>
</head>
<body onLoad="domove();">


<br>
<br>
<br>
<form> 
<input type=button value="hoch" onClick="moverel(0,-10)"><br>
<input type=button value="links" onClick="moverel(-10,0)"><br>
<input type=button value="rechts" onClick="moverel(10,0)"><br>
<input type=button value="runter" onClick="moverel(0,10)"><br>
<br>
<input type=button value="Ausgangsposition" onClick="moveabs(100,100)">
  <!-- das waren die Buttons -->

</form>
<div name="mobilbox" id="mobilbox"
     style="position:relative; left:80px; top:100px; width:100px; height:80px">
<table cellpadding="20"><tr><th style="background:#F0D000">
<span style="white-space:nowrap;">BOX - beweg mich!</span><br>
</th></tr></table>
</div>
<div id="rand1"></div> 

</body>
</html>
 

Neue Beiträge

Zurück