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