evitar la colision entre dos capas div al mover con el raton

[ruloxx87]

Buenas tardes, estoy intentando en este codigo que al mover dos capas con el raton no puedan ponerse una encima de la otra o otra opcion seria si una capa se pone encima de la otra haga ke una quede dejabajo de la otra. gracias por la ayuda. os dejo el codigo :

Código PHP:

  <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mover elementos de una página web con JavaScript</title>
<style type="text/css">
.objMovible{position:absolute;cursor:pointer;z-index:1}
</style>
<script type="text/javascript">
//Si el navegador del cliente es Mozilla la variable siguiente valdrá true
var moz = document.getElementById && !document.all;
//Flag que indica si estamos o no en proceso de arrastrar el ratón
var estoyArrastrando = false;
//Variable para almacenar un puntero al objeto que estamos moviendo
var dobj;
 
function arrastrarRaton(e){
if (estoyArrastrando) {
newLeft = moz ? e.clientX : event.clientX;
newTop = moz ? e.clientY : event.clientY;
 
dobj.style.left = newLeft - parseInt(dobj.style.width)/2;
dobj.style.top = newTop - parseInt(dobj.style.height)/2;
 
return false;
}
}
 
 
function soltarBoton(e) {    
estoyArrastrando = false;
}
 
 
function presionarBoton(e) {
//Obtenemos el elemento sobre el que se ha presionado el botón del ratón
var fobj = moz ? e.target : event.srcElement;
 
// Buscamos el primer elemento en la que esté contenido aquel sobre el que se ha pulsado
// que pertenezca a la clase objMovible. 
while (fobj.tagName.toLowerCase() != "html" && fobj.className != "objMovible") {
fobj = moz ? fobj.parentNode : fobj.parentElement;
}
 
// Si hemos obtenido un objeto movible...    
if (fobj.className == "objMovible") {
// Activamos el flag para indicar que se empieza a arrastrar
estoyArrastrando = true;
// Guardamos un puntero al objeto que se está moviendo en la variable global
dobj = fobj;
 
// Devolvemos false para no realizar ninguna acción posterior
return false;
}
}
 
document.onmousedown = presionarBoton;
document.onmouseup = soltarBoton;
document.onmousemove = arrastrarRaton;
 
document.oncontextmenu=new Function("return false");    
</script>
</head>
<body>
<div class="objMovible" style="width: 182px; height: 120px; background-color:#00F; left: 232px; top: 101px;"></div> 
<div class="objMovible" style="width: 182px; height: 120px; background-color:#F00; left: 100px; top: 300px;"></div> 
 
</body></html>