Saludos de nuevo.
Buscando por ahí he encontrado un código mejor para mi aplicación. En este caso los elementos DIV movibles sólo se pueden mover encima de elemento DIV movible haciendo que intercambien posiciones.
Como creo que el valor de los DIV no se puede recoger en un formulario, lo que he ideado es meter un input oculto dentro de estos DIV movibles de manera que, al mover el DIV, el input también se mueva junto con su valor.
Es decir, tendríamos algo así:
<form>
<div id="movible1"><input value="te"/></div>
<div id="movible2"><input value="hola"/></div>
<div id="movible3"><input value="como"/></div>
<div id="movible4"><input value="va"/></div>
</form>
Y se podría mover de manera que quedase:
<form>
<div id="movible2"><input value="hola"/></div>
<div id="movible3"><input value="como"/></div>
<div id="movible1"><input value="te"/></div>
<div id="movible4"><input value="va"/></div>
</form>
Mi pregunta es como podría recoger los valores de esos input en el orden en que el usuario los establezca, en este caso movible2,movible3,movible1,movible4), para poder introducirlos a una bbdd en ese orden.
Os dejo el código para complementar un poco
Este es el javascript para mover los elementos y reordenarlos
Código:
<script type="text/javascript">
// Variables globales
var indiceZ=0;
var posElInicial=new Array();
var posElFinal=new Array();
var posEls=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
*/
var tArr=new Array();
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
*/
var pos=new Array();
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;
}
return pos;
}
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);
var pos=new Array();
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"];
return pos;
}
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);
var pos=new Array();
pos["x"]=parseInt(el.style.left);
pos["y"]=parseInt(el.style.top);
return pos;
}
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
var temp=new Array();
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
var temp1=new Array();
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)
{
var pos=posMouse(event);
reOrdena(pos);
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>
El estilo
Código:
<style type="text/css">
#contenedor DIV
{
height:15px;
width:29px;
position:absolute;
border-color:#000000; border-style:solid; border-width:1px;
background:#FF2070;
font-family:Verdana; font-size:12px;
padding-top:4px;
margin:5px;
text-align:center;
cursor:pointer;
z-index:2;
}
#contenedor
{
position:absolute;
top:189px;
left:118px;
margin-left:-75px;
}
</style>
Y estos son los elementos movibles
Código:
<div id="contenedor">
<div id="drag_1" style="top:-151px; left:100px;">cuadrado<input type="hidden" value="cuadrado" /></div>
<div id="drag_2" style="top:-151px; left:150px;">circulo<input type="hidden" value="circulo" /></div>
<div id="drag_3" style="top:-151px; left:200px;">triangulo<input type="hidden" value="triangulo" /></div>
<div id="drag_4" style="top:-151px; left:250px;">rombo<input type="hidden" value="rombo" /></div>
</div>
En este caso los valores a recoger serían cuadrado, circulo, triangulo, rombo. Quiero que al cambiarlos de orden al moverlos se sigan recogiendo en ese orden de arriba a abajo.
Se me ocurre que quizás se podría hacer creando una función para que cuando dos DIV se intercambien (y en este caso también sus respectivos inputs) estos inputs intercambien sus nombres de manera que el input1 siempre quede arriba y sólo sea su valor lo que cambie. Pero no tengo ni idea de como hacer esto.
Gracias por todo y disculpen mi ignorancia
