JavaScript - Drag-n-drop con capas

   
Vista:

Drag-n-drop con capas

Publicado por QKRacha (1 intervención) el 25/03/2008 14:12:30
Buenas, tengo una capa cotnenedora con otras capas dentro.

Las de dentro se pueden mover y arrastrar, el problema es que no me las deja sacar de la capa contenedora, y a mi me interesaria poder moverlas hacia otra capa contenedora

Aqui el codigo:

<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>

gracias y un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder