evitar la colision entre dos capas div movidas con el raton
Publicado por rulox (1 intervención) el 23/03/2012 18:07: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>
<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>
Valora esta pregunta
0