Drag-n-Drop dentro de <div>

flanagan44 · #1 (**permalink**) 22/03/2008, 06:24

Buenas a todos,hacia muchos dias que no entraba por aqui, y entro para ver si alguno de ustedes me puede ayudar con un problema que me ha surgido.

Haber si me se explicar:

Tengo una capa contenedora que pongo en un lateral de la pagina, y en su interior pongo varias capas mas con su contenido, estas capas tienen implementado un drag-n-drop para poder moverlas, pero el problema esta al moverlas, me las desplaza solo por dentro de la capa contenedora, y me interesaria que pudieran salir de ahy.

Para ver lo que esta implementado:

http://www.rutinaonline.com/prova.html

(de momento solo funciona en IExplorer)

si os fijais en la capa que esta suleta funciona bien.

Gracias por todo, y un saludo

codigojavascript · #2 (**permalink**) 22/03/2008, 08:52

flanagan44: aca te dejo un ejemplo bastante bueno y simple que realiza un drag and drop sobre las imagenes que definamos nosotros. Creo que no sería dificil hacer que el drag and drop se haga sobre un DIV.

Lo bueno es que es compatible con Firefox y IE

Bueno, fijate si te sirve este ejemplo y haber que podemos armar con él para amoldarlo a tus necesidades.

El enlace: Drag and Drop: Arrastrar imágenes con el Mouse

Saludos

flanagan44 · #3 (**permalink**) 22/03/2008, 10:07

Perfecto, muy interesante la verdad

Cuando llegue a mi casita voy a probarlo, la verdad es que hasta el codigo es mas entendedor jejejeje

El tema sera ver si poniendolo dentro de una capa me funcionara, haber si hoy mismo lo intento y asi puedo seguir con este hilo.

De nuevo gracias, y un coordial saludo

flanagan44 · #4 (**permalink**) 22/03/2008, 11:56

Bueno un par de cosas:

El codigo me hace algo que no se como arreglarlo, al empezar a mover las capas me cambia las coordenadas a (0,0) mientras que con las imagenes no lo hace.

Y el problema con la capa contenedora sigue igual, al tenerlas dentro de una capa contenedora con scroll no me deja sacarlo de ahy.

Bueno, haber si hay suerte y se puede hacer de esa forma jejejej.

Venga un saludo y gracias

(el ejemplo www.rutinaonline.com/prova.html )

codigojavascript · #5 (**permalink**) 23/03/2008, 07:47

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

flanagan44 · #6 (**permalink**) 23/03/2008, 14:14

Muchas gracias, yo tambien me estoy peleando un poco jejejeje

a parte estaba mirando con mas atencion este foro y la verdad vale mucho la pena, la cantidad de codigos interesantes que hay desperdigados por ahy jejejej.

Bueno, si lo sacas o lo saco (de la capa contenedora) aqui pondre la respuesta jejejeje

gracias de nuevo

flanagan44 · #7 (**permalink**) 23/03/2008, 14:32

Haber si puedo traducir esto bien, pero parese interesante, y me ha parecido que dice algo de contendores jejejeje

joder que mal tengo el ingles...

http://www.tutorialspoint.com/script.aculo.us/scriptaculous_drag_drop.htm

y un ejemplo usando esas librerias

http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=scriptaculous_12

tengo que mirarlo, pero me parece que me serivra, os mantendre informado

flanagan44 · #8 (**permalink**) 26/03/2008, 02:20

Bueno
Rescato este tema porque aun no lo he solucionado jejejeje

por el momento he descubierto por donde muere el pez, que ya es mucho.

El problema me lo da el

overflow:scroll;

de la capa contenedora (tiene logica, le dice que si algo sale de la capa monte un scroll jejejej)

alguien sabe si hay forma de que al arrastrar el contenido no le haga caso a esa regla CSS??

gracias de antemano y un saludo

D_Z · #9 (**permalink**) 16/11/2008, 14:17

bueno no se si ya te interesara el tema o no o si ya lo habras solucionado
pero me parece que para poder arrastar la capa fuera de la campa contenedora bastaria que cambiaras en el css

<STYLE type="text/css">
#.arrastrarIMG{
position:relative;
}

por position:absolute

flanagan44 · #10 (**permalink**) 17/11/2008, 02:11

Cita:

Iniciado por D_Z

bueno no se si ya te interesara el tema o no o si ya lo habras solucionado
pero me parece que para poder arrastar la capa fuera de la campa contenedora bastaria que cambiaras en el css

<STYLE type="text/css">
#.arrastrarIMG{
position:relative;
}

por position:absolute

Pues la verdad es que lo di por impòsible, mirare de rescatarlo, haber si me funciona jejeje

gracias y un saludo