Foros del Web » Programando para Internet » Javascript »

Estoy creando un scrip y necesito un cable

Estas en el tema de Estoy creando un scrip y necesito un cable en el foro de Javascript en Foros del Web. Bueno planteo mi idea y aver que se os ocurre =D * Primera parte: SQL una tabla sql que contenga los ID de los div ...
  #1 (permalink)  
Antiguo 13/04/2011, 10:04
 
Fecha de Ingreso: abril-2011
Mensajes: 1
Antigüedad: 11 años, 4 meses
Puntos: 0
Pregunta Estoy creando un scrip y necesito un cable

Bueno planteo mi idea y aver que se os ocurre =D

* 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")>=0navegador=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(04)=="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==1event.preventDefault();
}
function 
getEl(idEl
{
    return 
document.getElementById(idEl); 
}
function 
copiaArr(arr

    var 
tArr=new Array();
    for(var 
n in arrtArr[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"enMovtrue);
        
document.addEventListener("mouseup"finMovtrue);
    }
    
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"enMovtrue);
        
document.removeEventListener("mouseup"finMovtrue); 
    }
}
</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> 
Bueno si copiais ese script vereis que se ordenan al moverse pero solo quiero algo similar ya que si tu en lugar de todos medir 35px midieran distintos al moverlos se veria que el top no cambia en los demas bien osea queda mal

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

Etiquetas: cables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:38.