mover divs con el cursor y guardar su pocision

ignacio_giri · #1 (**permalink**) 11/04/2005, 23:45

quiero algo como esto

http://dhtmlkitchen.com/scripts/drag.../longlist.html

pero no en lista.... sino, digamos divs como tablas y que las pueda mover en una pocision que yo determine tipo como tiene google news o el nuevo servicio de spaces msn para el momento de edicion

ignacio_giri · #2 (**permalink**) 13/04/2005, 10:02

Hola chicos hace 2 días que ando buscando como poder hacer algo como tiene el google news o msn spaces...

está muy bueno y no "parece" tan complicado... alguien me puede dar una mano con esto?

es muy revolucionario

tunait · #3 (**permalink**) 13/04/2005, 10:11

Ignacio porfa, no abras temas nuevos duplicados.

temas unidos

un saludo

ignacio_giri · #4 (**permalink**) 13/04/2005, 10:55

Bueno, pero quiero una idea pofa.

solución, idea

un saludo

caricatos · #5 (**permalink**) 13/04/2005, 12:55

Hola Ignacio:

No es muy difícil mover capas, pero es algo que "hay que currar"...

En las FAQs hay un mensaje que habla de las coordenadas del ratón: http://www.forosdelweb.com/f13/faqs-javascript-105325-post264744/ y para que cambie de posición una capa debe tener estilos específicos: posicion: absolute; left: +/- npx; top: +/-px;...

En un viejo tema hicimos entre algunos foreros algo interesante sobre creación de postales digitales: http://www.pepemolina.com/postales/index.html En los créditos de la página puedes encontrar el enlace donde se desarrolló y "husmeando" podrás ver el código...

Saludos

ignacio_giri · #6 (**permalink**) 13/04/2005, 13:00

si, algo así, pero no así... me refiero a algo como spaces msn... no puede ser tan complicado... mover capas así lo hago con dreamweaver... pero la idea es que al mover tenga un limite de lugar... digamos que la capa se "imante" en varios lugares donde sea posible que se "pegue"...

y luego de allí guardar la posicion de las capas imantadas... a ver si alguien puede ayudarme con esto... es complicado, si, lo se...

derkenuke · #7 (**permalink**) 13/04/2005, 13:41

Ok, veamos que puedes hacer, lo has planteado (digo en codigo)? me molan los retos.

lo de pegar capas es hallar la distancia entre la capa y el elemento a pegar. Si esa distancia por ejemplo es <10 o asi, ponerlas pegadas. de ese problema yo kreo que nos podriamos deshacer rapido.

Plantealo y veremos que hacemos.

ignacio_giri · #8 (**permalink**) 13/04/2005, 13:54

Por acá tenemos cajitas... por eso te decia, mover la cajitas, no parece ser tan complicado:

http://tool-man.org/examples/sorting.html

Ahora para guardar su pocision en una base de datos, con arreglos o con lo que sea, como podríamos hacer...

Saludos.

derkenuke · #9 (**permalink**) 13/04/2005, 15:23

De momento te dejo esto, que me voi a dormir ya.
Funciona en todos los navegadores, salvo que hay que evitar que se seleccione el texto.

Código PHP:

  <html>

 
<head>

<title>Pag1</title>

<style>

    .elemento li{

        position: absolute;

        left:55px;

        width:300px;

        float:left;

        clear:both;

        cursor:move;

        padding:2px;

        border: 1px solid #ccc;

        background-color: #eee;

    }

</style>

</head>

 
<body>

<script LANGUAGE="JavaScript">

    /* DRAG & DROP */

    // Original:  Randy Bennett ([email protected])

    // Web Site:  http://home.thezone.net/~rbennett/sitemap.htm

    // (modificado)

    N = (document.all) ? 0 : 1;

    var ob;

    document.onmousedown=function(e) {

        if (N) {

            ob = document.layers[e.target.name];

            X=e.x;

            Y=e.y;

            return false;

        }

        else {

            ob = event.srcElement.style;

            //X=event.offsetX;

            Y=event.offsetY;

        }

    }

    document.onmousemove=function(e) {

        if (ob) {

            if (N)

                ob.moveTo((e.pageX-X), (e.pageY-Y));

            else {

                //ob.pixelLeft = event.clientX-X + document.body.scrollLeft;

                ob.pixelTop = event.clientY-Y + document.body.scrollTop;

                return false;

              }

           }

    }

    document.onmouseup=function() {

        ob = null;

    }

    

    if (N)

        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

</script>

 
 
<ul class="elemento">

<li style="top:5px;">uno</li>

<li style="top:30px;">dos</li>

<li style="top:55px;">tres</li>

<li style="top:80px;">cuatro</li>

<li style="top:105px;">cinco</li>

<li style="top:130px;">seis</li>

</ul>

 
 
</body>

 
</html>

Ahora te toca mover ficha a ti

Entre todos poco a poco lo sacaremos, ya lo veras.

[Se podia haber copiado el script de esa pagina, pero si no no lo considero interesante, y ademas asi se simplifica]

liberfg · #10 (**permalink**) 22/08/2005, 13:12

Hola,

estoy hace dias buscando el codigo qeu me permita mover capas en IE y en Mozilla, crei haberlo encontrado pero este code en mozilla me da error:

document.layers has no properties
a que se debe??

Saludos y gracias.

derkenuke · #11 (**permalink**) 22/08/2005, 13:54

document.layers no existe mas que en Netscape. No lo probé en mozilla, ya me puedes perdonar.

Creo que me he cargado ahora que funcione en Netscape, no lo tengo instalado en esta máquina. Si puedes probarlo me dices. Funciona en Firefox 1.0.6 y en Opera 8.1 (en IE6 tambien).

Código PHP:

  <html> 

 
<head> 

<title>Pag1</title> 

<style> 

    .elemento li{ 

        position: absolute; 

        left:55px; 

        width:300px; 

        float:left; 

        clear:both; 

        cursor:move; 

        padding:2px; 

        border: 1px solid #ccc; 

        background-color: #eee; 

        list-style-type: none;

    } 

</style> 

</head> 

 
<body> 

<script LANGUAGE="JavaScript"> 

    /* DRAG & DROP */ 

    // Original:  Randy Bennett ([email protected]) 

    // Web Site:  http://home.thezone.net/~rbennett/sitemap.htm 

    // (modificado) 

    N = (document.all) ? 0 : 1; 

    var ob,X,Y; 

    document.onmousedown=function(e) { 

        if (N) {

            ob = document.getElementById(e.target.id).style; 

            Y=e.clientY-parseInt(ob.top);

        }

        else {

            ob = event.srcElement.style; 

            Y=event.offsetY;

        }

        return false;

    } 

    document.onmousemove=function(e) { 

        if (ob) { 

            if (N)

                ob.top=(e.clientY-Y)+"px";

            else

                ob.pixelTop = (event.clientY-Y+document.body.scrollTop); 

              return false;

        } 

    } 

    document.onmouseup=function() { 

        ob = null; 

    } 

     

    if (N) 

        document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); 

 
 
</script> 

 
 
<ul class="elemento"> 

    <li id="uno" style="top:5px;">uno</li> 

    <li id="dos" style="top:30px;">dos</li> 

    <li id="tres" style="top:55px;">tres</li> 

    <li id="cuatro" style="top:80px;">cuatro</li> 

    <li id="cinco" style="top:105px;">cinco</li> 

    <li id="seis" style="top:130px;">seis</li> 

</ul> 

 
 
</body> 

 
</html>

Ademas le he quitado los puntos de la lista, que me parecia que quedaban feos ;P

A ver si funciona en Netscape..

liberfg · #12 (**permalink**) 22/08/2005, 21:23

gracias derkenuke, mañana te comento como me fue! Saludos.