Bueno, que aun sigo peleandome con el Drag de los huevos.
Hasta aqui lo que tengo echo:
Código:
<HTML>
<HEAD>
<STYLE type="text/css">
#.arrastrarIMG{
position:relative;
}
#Div1 {
position:relative;
width:140px;
height:140px;
z-index:1;
background-color: #FF0000;
}
#Div2 {
position:relative;
width:140px;
height:140px;
z-index:2;
background-color: #0000FF;
}
#Div3 {
position:relative;
width:140px;
height:140px;
z-index:3;
background-color: #000000;
}
</STYLE>
<STYLE type="text/css">
#cont {
position:absolute;
width:165px;
height:319px;
z-index:4;
}
#Lcont {
position:absolute;
z-index:2;
background-color: #FFFFCC;
}
</STYLE>
<script language="javascript">
<!-- Created by: elouai.com -->
<!-- Revised by: Silly_TomcaT -->
var ie = document.all;
var nn6 = document.getElementById&&!document.all;
var isdrag = false;
var x,y;
var xi;
var yi;
var dobj;
function movemouse(e) {
if (isdrag) {
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e) {
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "arrastrarIMG") {
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className == "arrastrarIMG") {
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left + 0,10);
ty = parseInt(dobj.style.top + 0,10);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove = movemouse;
return false;
}
}
function exitmouse(e) {
//posiciones top de las capas
var top=dobj.style.top;
var conteTop=document.getElementById("cont").style.top;
//posiciones left de las capas
var left=dobj.style.left;
var conte=document.getElementById("cont").style.left;
//left.indexOf("p") devuelve la posicion donde empieza el px
left=left.substring(0,(left.indexOf("p")));
conte=conte.substring(0,(conte.indexOf("p")));
top=top.substring(0,(top.indexOf("p")));
conteTop=conteTop.substring(0,(conteTop.indexOf("p")));
xi=parseInt(conte)+parseInt(left); //posicion X de la capa al soltarla
yi=parseInt(conteTop)+parseInt(top); //posicion Y de la capa al soltarla
//posicion de la capa destino
var xc=document.getElementById("Lcont").style.left;
xc=parseInt(xc.substring(0,(xc.indexOf("p"))));
var yc=document.getElementById("Lcont").style.top;
yc=parseInt(yc.substring(0,(yc.indexOf("p"))));
//tamaño de la capa destino
var amp=document.getElementById("Lcont").style.width;
amp=parseInt(amp.substring(0,(amp.indexOf("p"))));
var alt=document.getElementById("Lcont").style.height;
alt=parseInt(alt.substring(0,(alt.indexOf("p"))));
// no entra a dins de l'IF
yi=yi+amp;
//alert("if("+yi+">="+yc+" && "+yi+"<="+(yc+alt)+")");
if(yi>=yc && yi<=(yc+alt) && xi>=xc && xi<=(xc+amp) )
{
//si entra aqui es porque hemos dejado la capa dentro de otra contenedora
alert("dentro");
}
isdrag=false;
return false;
}
document.onmousedown = selectmouse;
document.onmouseup = exitmouse;
</script>
</HEAD>
<BODY>
<!-- Agregamos las imágenes que queramos dándoles el
valor 'arrastrarIMG' a la propiedad class.
De esta manera podremos hacer Drag and Drop con cada una de ellas -->
<div id="cont" style="left:693px; top:66px;">
<div id="Div1" class="arrastrarIMG"></div>
<div id="Div2" class="arrastrarIMG"></div>
<div id="Div3" class="arrastrarIMG"></div>
</div>
<div id="Lcont" style="left:48px; top:55px; width:150px; height:150px;">
<p>izq 48px</p>
<p>sup 55px</p>
</div>
</BODY>
</HTML>
Esto mismo lo podeis encontrar colgado en:
http://www.rutinaonline.com/prova2_.html
Errores que me da:
- Solo me funciona con la capa Azul, y no tengo ni idea de porque
- Me falta poder centrar la capa en la capa contenedora
si podeis echarme una mano con eso me hariais un favor.
Muchas gracias a todos y un saludo