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

ruloxx87 · #1 (**permalink**) 23/03/2012, 11:07

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 pues una quede dejabajo de la otra. gracias por la ayuda. os dejo el codigo :

<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>

ruloxx87 · #2 (**permalink**) 24/03/2012, 12:34

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>

Panino5001 · #3 (**permalink**) 24/03/2012, 13:36

Fijate si esto es lo que querías (procuré preservar tu código lo más posible):

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;

if(dobj && dobj.style){

    dobj.style.zIndex=1;

}

if(fobj && fobj.style){

    fobj.style.zIndex=2;

}

// 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>

Y por favor no reabras mensajes si se trata del mismo tema.

ruloxx87 · #4 (**permalink**) 25/03/2012, 08:31

ok gracias pero te pido disculpas porque creo creo ke me he explicado un poco mal, lo que queria decir es que las dos capas no colisionen entre ellas, es decir que no se junten ni se posicionen en el mismo lugar, gracias por todo.