<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
Este material es de libre utilización y modificación bajo la siguiente licencia:
http://creativecommons.org/licenses/by-nc-sa/2.5/
Puedes distribuir estos scripts o colocarlos en tu Sitio siempre y cuando no elimines estos
comentarios y la licencia expuesta sea respetada.
Mas ejemplos y material sobre AJAX en: http://www.formatoweb.com.ar/ajax
Cualquier sugerencia, crítica o comentario son bienvenidos.
Contacto: edanps@gmail.com
-->
<html>
<head>
<script type="text/javascript">
// Variables globales
var indiceZ=0;
var posElInicial
=new Array(); var posElFinal
=new Array(); var posMouseInicial
=new Array(); var elEnMov=null;
// Cargo las posiciones de las capas en el documento
onload=posElsAbs;
onresize=posElsAbs;
// Detecto el navegadoregador
if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0; // IE
else navegador=1; // Otros
function delay()
{
/*
En IE sin un pequeño delay parece haber problemas con la captura de las posiciones de las capas. Lo extraño es que no siempre sucede por lo que este
retraso puede no ser necesario.
*/
}
function posElsAbs()
{
/*
funcion: almacenar las posiciones absolutas de los elementos movibles de la pagina
parametros:
retorno:
*/
setTimeout("delay()", 200);
var el=document.getElementsByTagName("div");
var i=0;
while(el[i])
{
if(el
[i
].id
.substr(0, 4)=="drag") {
el[i].onmousedown=inicioMov;
posEls[el[i].id]=posElAbs(el[i].id);
}
i++;
}
}
function noEventos(event)
{
if(navegador==0)
{
window.event.cancelBubble=true;
window.event.returnValue=false;
}
if(navegador==1) event.preventDefault();
}
function getEl(idEl)
{
/*
funcion: devolver el elemento cuyo id se recibe
parametros: (string) id de elemento
retorno: (objeto) elemento cuyo id se recibe
*/
return document.getElementById(idEl);
}
function copiaArr(arr)
{
/*
funcion: devolver una copia exacta del array que se recibe por parametro
parametros: (array) array a copiar
retorno: (array) duplicado del array recibido
*/
for(var n in arr) tArr[n]=arr[n];
return tArr;
}
function posMouse(event)
{
/*
funcion: devolver la posicion del puntero en un momento determinado
parametros: (objeto) objeto event
retorno: (array=>["x"] - ["y"]) posicion del puntero
*/
if(navegador==0)
{
/* document.body.clientLeft/clientTop es el tamaño del borde (usualmente 2px) que
encierra al documento ya que en IE este no empieza en (0,0) */
pos["x"]=window
.event
.clientX
+document
.body
.clientLeft
+document
.body
.scrollLeft
; pos["y"]=window
.event
.clientY
+document
.body
.clientTop
+document
.body
.scrollTop
; }
if(navegador==1)
{
pos["x"]=event
.clientX
+window
.pageXOffset
; pos["y"]=event
.clientY
+window
.pageYOffset
; }
}
function posElAbs(idEl)
{
/*
funcion: devolver la posicion del elemento con respecto a los bordes del documento
parametros: (string) id del elemento
retorno: (array=>["xInicial"] - ["xFinal"] - ["yInicial"] - ["yFinal"]) posicion del elemento
*/
var el=elP=getEl(idEl);
pos["xInicial"]=pos["yInicial"]=pos["xFinal"]=pos["yFinal"]=0;
do
{
pos["xInicial"]+=elP
.offsetLeft
; pos["yInicial"]+=elP
.offsetTop
; elP=elP.offsetParent;
} while(elP);
pos["xFinal"]=el
.offsetWidth
+pos["xInicial"]; pos["yFinal"]=el
.offsetHeight
+pos["yInicial"];
}
function posElRel(idEl)
{
/*
funcion: devolver la posicion del elemento con respecto a su contenedor (left y top)
parametros: (string) id del elemento
retorno: (array=>["x"] - ["y"]) posicion del elemento
*/
var el=getEl(idEl);
pos["x"]=parseInt
(el
.style
.left
); pos["y"]=parseInt
(el
.style
.top
); }
function reOrdena(posMouse)
{
for(var idEl in posEls)
{
if(idEl!=elEnMov.id)
{
if(posMouse["x"]>=posEls[idEl]["xInicial"] && posMouse["x"]<=posEls[idEl]["xFinal"] &&
posMouse["y"]>=posEls[idEl]["yInicial"] && posMouse["y"]<=posEls[idEl]["yFinal"])
{
// La capa cuyo id es idEl debe posicionarse en la posicion de comienzo de la capa en movimiento
var el=getEl(idEl);
// Intercambio la posicion de la capa estatica por la posicion final de la capa en movimiento
temp["x"]=parseInt(el.style.left);
temp["y"]=parseInt(el.style.top);
el.style.left=posElFinal["x"]+"px";
el.style.top=posElFinal["y"]+"px";
posElFinal=copiaArr(temp);
// Cambio los valores de posicion de la capa estatica y la capa en movimiento en el array de posiciones
temp1=copiaArr(posEls[elEnMov.id]);
posEls[elEnMov.id]=copiaArr(posEls[idEl]);
posEls[idEl]=copiaArr(temp1);
}
}
}
}
function inicioMov(event)
{
if(navegador==0)
{
elEnMov=window.event.srcElement;
document.attachEvent("onmousemove", enMov);
document.attachEvent("onmouseup", finMov);
}
if(navegador==1)
{
elEnMov=event.target;
document.addEventListener("mousemove", enMov, true);
document.addEventListener("mouseup", finMov, true);
}
posElInicial=posElRel(elEnMov.id);
posMouseInicial=posMouse(event);
posElFinal=copiaArr(posElInicial);
elEnMov.style.zIndex=++indiceZ;
noEventos(event);
}
function enMov(event)
{
elEnMov
.style
.left
=posElInicial
["x"]+pos["x"]-posMouseInicial
["x"]+"px"; elEnMov
.style
.top
=posElInicial
["y"]+pos["y"]-posMouseInicial
["y"]+"px";
noEventos(event);
}
function finMov(event)
{
elEnMov.style.left=posElFinal["x"]+"px";
elEnMov.style.top=posElFinal["y"]+"px";
if(navegador==0)
{
document.detachEvent("onmousemove", enMov);
document.detachEvent("onmouseup", finMov);
}
if(navegador==1)
{
document.removeEventListener("mousemove", enMov, true);
document.removeEventListener("mouseup", finMov, true);
}
}
</script>
<style type="text/css">
#contenedor DIV
{
height:20px;
width:150px;
position:absolute;
border-color:#000000; border-style:solid; border-width:1px;
background:#FFFFFF;
font-family:Verdana; font-size:12px;
padding-top:4px;
margin:5px;
text-align:center;
cursor:move;
}
#contenedor
{
position:absolute;
top:50px;
left:50%;
margin-left:-75px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="drag_1" style="top:0px; left:0px;">1</div>
<div id="drag_2" style="top:35px; left:0px;">2</div>
<div id="drag_3" style="top:70px; left:0px;">3</div>
<div id="drag_4" style="top:105px; left:0px;">4</div>
</div>
</body>
</html>