Hola chic@s, me he aquí con un problema complicado de resolver (para mí) con un evento onMouseOver. El tema es que hice un pequeño script de Drag & Drop en el cual tengo únicamente dos capas así:
Al comenzar a arrastrar "Capa uno" hacia "Capa dos" el z-index de "Capa uno" se incrementa para aparecer sobre la otra. El problema viene en que yo necesito detectar el momento en el que el puntero del mouse toca a la "Capa dos" mientras se arrastra la "Capa uno"; esto tengo que hacerlo debido a que en ese momento deseo ejecutar una funcion que haga ciertas tareas. Le puse a "Capa dos" un "onMouseOver" pero este evento nunca se ejcuta; parece ser que al aumentar el z-index de la capa que estoy arrastrando, el puntero siempre estará sobre esta misma capa y nunca sobre la "Capa dos".
He aquí mi cuestión: necesito de alguna forma detectar que el mouse está por encima de "Capa dos" mientras arrastro la "Capa uno" que posee un z-index superior ¿hay alguna forma de hacerlo?
Agradezco de antemano cualquier ayuda u orientación. Adjunto a continuación el código que hice hasta el momento, por si sirve de algo.
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
// Variables globales
enMovimiento=indiceZ=0; posInicial=posFinal=null;
// IE
if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
// Otros
else navegador=1;
function cancelaEventos(event)
{
// Funcion que evita que se ejecuten eventos adicionales
if(navegador==0)
{
window.event.cancelBubble=true;
window.event.returnValue=false;
}
if(navegador==1) event.preventDefault();
}
function getEl(eId)
{
// Un getElementById, pero mas corto
return document.getElementById(eId);
}
function getPos(event)
{
// Obtiene la posicion del cursor en un momento dado
var pos=new Array();
if(navegador==0)
{
pos["x"]=window.event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
pos["y"]=window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop;
}
if(navegador==1)
{
pos["x"]=event.clientX+window.scrollX;
pos["y"]=event.clientY+window.scrollY;
}
return pos;
}
function reOrdena(cId)
{
// Funcion que nunca se ejecuta... HE AQUI MI PROBLEMA
if(enMovimiento==1)
{
alert("aaaaa");
}
}
function comienzaMov(event, cId)
{
enMovimiento=1; capaEnMovimiento=getEl(cId);
posCapaInicial=parseInt(capaEnMovimiento.style.top);
posCapaFinal=posCapaInicial;
posCursorInicial=getPos(event);
if(navegador==0)
{
document.attachEvent("onmousemove", enMov);
document.attachEvent("onmouseup", finMov);
}
if(navegador==1)
{
document.addEventListener("mousemove", enMov, true);
document.addEventListener("mouseup", finMov, true);
}
capaEnMovimiento.style.zIndex=++indiceZ;
cancelaEventos(event);
}
function enMov(event)
{
posCursorActual=getPos(event);
capaEnMovimiento.style.top=(posCapaInicial+posCursorActual["y"]-posCursorInicial["y"])+"px";
cancelaEventos(event);
}
function finMov(event)
{
enMovimiento=0;
capaEnMovimiento.style.top=posCapaFinal+"px";
if(navegador==0)
{
document.detachEvent("onmousemove", enMov);
document.detachEvent("onmouseup", finMov);
}
if(navegador==1)
{
document.removeEventListener("mousemove", enMov, true);
document.removeEventListener("mouseup", finMov, true);
}
}
</script>
<style type="text/css">
#contenedor DIV
{
height:20px;
width:150px;
position:absolute;
border-color:#000000; border-style:solid; border-width:1px;
background:#FFFFFF;
font-family:Verdana; font-size:12px;
padding-top:4px;
margin:5px;
text-align:center;
cursor:move;
}
#contenedor
{
position:absolute;
top:50px;
left:50%;
margin-left:-75px;
}
</style>
</head>
<body>
<div id="contenedor">
<div onMouseOver="reOrdena(this.id)" onMouseDown="comienzaMov(event, this.id)" id="c1" style="top:0px;">Capa uno</div>
<div onMouseOver="reOrdena(this.id)" onMouseDown="comienzaMov(event, this.id)" id="c2" style="top:35px;">Capa dos</div>
</div>
</body>
</html>
Nuevamente gracias.
Saludos.