Estoy creando un scrip y necesito un cable * Primera parte: SQL
una tabla sql que contenga los ID de los div "div's que veremos mas adelante para q son"
* Segunda parte: PHP
un php que llame a la sql y saque en un while los ID de los div
/
el while tendria algo asi
$buscar_id=mysql_query(select * from divs where id order by id);
while($cual_id=mysql_fetch_array($buscar_id)){
<div id="$cual_id[id]"></div>
}
* Tercera parte: JavaScript
- pondre un script que e copiado de una web como ejemplo para que entendais lo que quiero hacer
Código PHP:
<script type="text/javascript">
var indiceZ=0;
var posElInicial=new Array();
var posElFinal=new Array();
var posEls=new Array();
var posMouseInicial=new Array();
var elEnMov=null;
onload=posElsAbs;
onresize=posElsAbs;
if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
else navegador=1;
function delay()
{
}
function posElsAbs()
{
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)
{
return document.getElementById(idEl);
}
function copiaArr(arr)
{
var tArr=new Array();
for(var n in arr) tArr[n]=arr[n];
return tArr;
}
function posMouse(event)
{
var pos=new Array();
if(navegador==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)
{
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)
{
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"])
{
var el=getEl(idEl);
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);
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>
<style type="text/css">
body
{
background:#330000;
}
#contenedor DIV
{
width:98%;
position:absolute;
border-color:#000000; border-style:solid; border-width:1px;
background:#666666;
font-family:Verdana; font-size:12px;
padding-top:4px;
text-align:center;
cursor:move;
}
#contenedor
{
position:absolute;
background:#333333;
width:100%;
top:50px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="drag_1" style="top:0px; left:0px;height:35px;">Capa uno</div>
<div id="drag_2" style="top:50px; left:0px;height:35px;">Capa dos</div>
<div id="drag_3" style="top:100px; left:0px;height:35px;">Capa tres</div>
<div id="drag_4" style="top:150px; left:0px;height:35px;">Capa cuatro</div>
<div id="drag_5" style="top:200px; left:0px;height:35px;">Capa cinco</div>
<div id="drag_6" style="top:250px; left:0px;height:35px;">Capa seis</div>
<div id="drag_7" style="top:300px; left:0px;height:35px;">Capa siete</div>
</div>
lo que quiero es algo parecido y no se como hacerlo
un script que ... permita mover los divs y cuando mueva los div que van a resultar del while que puse antes aga el mismo efecto que este que si pongo el div 4 entre el 1 y el 2 estos le agan sitio.. pero que no se oriente por top si no que cambie directamente las coordenadas en base al tamaño de este xq si yo tuviera 3 div's el primero mide 100de alto el segundo 200 de alto y el tercero 100 de alto
cuando muevo el segundo al lugar del primero el primero solo se movia en ese ejemplo 100... y kedaba x debajo del 2 lo que quisiera es que al moverlos se moviera bien y que me mandara a la sql la nueva posicion de todos los divs
si no se pudiera con un while no importa se hace sin while
pero que al moverlo me guarde la posicion en la sql y que se muevan bien no cm en ese ejemplo que solo funciona si todos miden lo mismo
pido muchisimo lo se ! pero es que llevo dias probando mil formas a mi manera y nada a resultado yo solo e podido crear que mover un div y guarde su posicion pero me kedaba x encima de los otros asi que decidi buscar en google y encontre ese ejemplo q se aproxima al efecto que quiero dar pero no a la funcionalidad xD
