Ver Mensaje Individual
  #5 (permalink)  
Antiguo 23/03/2008, 07:47
codigojavascript
 
Fecha de Ingreso: diciembre-2007
Ubicación: Argentina
Mensajes: 151
Antigüedad: 17 años, 3 meses
Puntos: 2
Re: Drag-n-Drop dentro de <div>

flanagan44: El problema de que mueve mueve las capas a la posicion (0,0) ya esta solucionado.

Probá este código para verlo:

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;
	left:693px;
	top:66px;
	width:165px;
	height:319px;
	z-index:4;
	overflow:scroll;
}
 </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 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;
	}
}

document.onmousedown = selectmouse;
document.onmouseup = new Function("isdrag=false");

</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">
  <div id="Div1" class="arrastrarIMG"></div>
  <div id="Div2" class="arrastrarIMG"></div>
  <div id="Div3" class="arrastrarIMG"></div>
  </div>
  
</BODY>  
  </HTML>
El otro tema de que no saca los div del div contenedor lo estoy probando.

Saludos