Drag-n-Drop Ampliacion

flanagan44 · #1 (**permalink**) 27/03/2008, 05:46

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