JavaScript - mover divs con javascript mediante botones

mover divs con javascript mediante botones

Publicado por Sam (106 intervenciones) el 05/10/2013 18:53:46

Hola buenas, veran tengo un problemilla a ver si pueden ayudarme.

Necesito conseguir que varios divs, 3, colocados todos en horizontal en una posicion mas o menos alta en el "top" de la pantalla y que haya un menu de botones (un boton para cada div) en el cual cuando haces un click al boton1 , el div 1 se coloca mas abajo en la pantalla,

cuando se haga click en el boton 2 entonces el div 1 recupere su posicion inicial arriba en el top y baje en su lugar el div 2 , y lo mismo con el 3.

He buscado hasta la saciedad en internet pero solo veo ejemplos de como mediante botones cambiar un solo div en el espacio arriba y abajo a derecha e izquierda sin limite ni tampoco se como añadirles mas divs ni limitar los botones a un solo click.

Os pondre lo que tengo de codigo pero si puedieran ayudarme les estaria muy agradecido.

Gracias de antemano.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr">

<head>

<style type="text/css">

	#parrafo {position:absolute; top:500px; left:300px; width:200px; height:100px; background-color: #99FFFF}

</style>

<script type="text/javascript">

	function MoverTexto(id,d){

		 var bloque=document.getElementById(id);

		 var x=(document.defaultView && document.defaultView.getComputedStyle) ?

				document.defaultView.getComputedStyle(bloque,'').getPropertyValue("top") :

				bloque.currentStyle ? bloque.currentStyle.top : "";

		 var y=(document.defaultView && document.defaultView.getComputedStyle) ?

				document.defaultView.getComputedStyle(bloque,'').getPropertyValue("left") :

				bloque.currentStyle ? bloque.currentStyle.left : "";

		 x= parseInt(x);

		switch(d){

		 case "arriba":  x -=200; break;

		 case "abajo":  x +=200; break;

		bloque.style.top=x+"px";

</script>

</head>

<body>

    <a href="#" onclick="MoverTexto('parrafo', 'arriba');">Arriba<a/>

    <a href="#" onclick="MoverTexto('parrafo', 'abajo');">Abajo<a/>

    <div id="parrafo"></div>

</body>

</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

mover divs con javascript mediante botones

Publicado por xve (2100 intervenciones) el 06/10/2013 12:38:48

Hola Sam, haber si este código hace lo que deseas...

Permite subir y bajar 3 divs por la pantalla. Cuando se mueve un div, los demás se quedan en su posición inicial.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr">

<head>

<style type="text/css">

	#parrafo1, #parrafo2, #parrafo3 {

		position:absolute; top:100px;

		width:100px; height:50px; background-color: #99FFFF;

	#parrafo1 {left:0px;}

	#parrafo2 {left:110px;}

	#parrafo3 {left:220px;}

</style>

<script type="text/javascript">

	function MoverTexto(id,d)

		for(var i=1;i<=3;i++)

			var bloque=document.getElementById("parrafo"+i);

			if(i==id)

				if(d=="arriba")

					bloque.style.top=(bloque.offsetTop-10)+"px";

				else

					bloque.style.top=(bloque.offsetTop+10)+"px";

			}else{

				bloque.style.top="100px";

</script>

</head>

<body>

    <a href="#" onclick="MoverTexto('1', 'arriba');">1 Arriba<a/>

    <a href="#" onclick="MoverTexto('1', 'abajo');">1 Abajo<a/>

    <a href="#" onclick="MoverTexto('2', 'arriba');">2 Arriba<a/>

    <a href="#" onclick="MoverTexto('2', 'abajo');">2 Abajo<a/>

    <a href="#" onclick="MoverTexto('3', 'arriba');">3 Arriba<a/>

    <a href="#" onclick="MoverTexto('3', 'abajo');">3 Abajo<a/>

	<div id="parrafo1"></div>

	<div id="parrafo2"></div>

	<div id="parrafo3"></div>

</body>

</html>

Coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

mover divs con javascript mediante botones

Publicado por Sam (106 intervenciones) el 06/10/2013 16:22:32

Hola Xve, te comento, el codigo es genial!!! era justo lo que necesitaba funciona de maravilla.

Solo hay 2 pequeños detalles en el codigo que no se como modificar ( 2 detalles que tampoco sabia modificar en el codigo mio que tenia al principio de este "asunto".

y es lo siguiente:

a) cuando hago clic en los botones ( imagina, por ejemplo, que hago clic en boton llamado "2 arriba",

y se doy repetidas veces, el cuadrado se desplaza hacia arriba tantas veces como hagamos clic en el boton.

Y claro solo debe subirse o bajarse cada recuadro solo haciendo un clic y no mas.

resumiendo por mucho que haga clic en el boton de subida o bajada solo se subira o bajara una sola vez y no mas.

b) y la otra cosa es que cuando hago clic en los botones , en la url aparece la almoadilla "#", he probado a quitarsela pero entonces los cuadros no se mueven ¿hay alguina menera de que no aparezca la almoadilla en la url ?

Gracias de nuevo por tu gran ayuda, me estar sirviendo de mucho.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

mover divs con javascript mediante botones

Publicado por xve (2100 intervenciones) el 06/10/2013 21:41:09

Hola Sam, haber que te parece así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr">

<head>

<style type="text/css">

    #parrafo1, #parrafo2, #parrafo3 {

        position:absolute; top:100px;

        width:100px; height:50px; background-color: #99FFFF;

    #parrafo1 {left:0px;}

    #parrafo2 {left:110px;}

    #parrafo3 {left:220px;}

    ul {

        padding:0px;

    li {

        float:left;

        list-style-type:none;

        padding-left:10px;

        cursor:pointer;

</style>

<script type="text/javascript">

    function MoverTexto(id,d)

        for(var i=1;i<=3;i++)

            var bloque=document.getElementById("parrafo"+i);

            if(i==id)

                if(d=="arriba")

                    bloque.style.top="90px";

                else

                    bloque.style.top="110px";

            }else{

                bloque.style.top="100px";

</script>

</head>

<body>

    <ul>

        <li onclick="MoverTexto('1', 'arriba');">1 Arriba</li>

        <li onclick="MoverTexto('1', 'abajo');">1 Abajo</li>

        <li onclick="MoverTexto('2', 'arriba');">2 Arriba</li>

        <li onclick="MoverTexto('2', 'abajo');">2 Abajo</li>

        <li onclick="MoverTexto('3', 'arriba');">3 Arriba</li>

        <li onclick="MoverTexto('3', 'abajo');">3 Abajo</li>

    </ul>

    <div id="parrafo1"></div>

    <div id="parrafo2"></div>

    <div id="parrafo3"></div>

</body>

</html>

Si hay alguna cosa que no entiendes comentalo y te explico, ok?

Valora esta respuesta

Comentar

mover divs con javascript mediante botones

Publicado por Sam (106 intervenciones) el 06/10/2013 22:28:54

Hola xve, decir que el código que me has pasado es simplemente genial, se amolda como un guante al gran problema que tenia.

Entiendo todo el código sin problemas, veras estoy empezando a aprender algo de java, javascript y php, y ahora mismo estoy en la fase en que soy capaz de entender el código pero no de generarlo desde 0 todavía.

Sí que consigo modificarlo con mas o menos éxito.

Sin duda me has ayudado en varias veces ya y he aprendido y aprendo mucho de tu ayudas.

(mas que muchos de mis profesores aunque te parezca contradictorio).

Mira he adaptado el código, o personalizado el código un poquillo para adaptarlo a mi web, nah poca cosa. te lo pongo a continuación.

Solo una pregunta mas:

¿hay alguna forma de poder dejar por defecto uno de los rectángulos por defecto en la parte baja es decir como si estuviera activado por defecto en la parte baja , menos el resto de rectángulos que empezarían en su posición en la parte alta?

Ereh un genio (peloteo a parte ;-))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html dir="ltr">

<head>

<style type="text/css">

    #parrafo1, #parrafo2, #parrafo3, #parrafo4, #parrafo5, #parrafo6, #parrafo7, #parrafo8, #parrafo9 {

        position:absolute; top:100px;

        width:100px; height:50px; background-color: #99FFFF;

    #parrafo1 {left:0px;}

    #parrafo2 {left:110px;}

    #parrafo3 {left:220px;}

    #parrafo4 {left:330px;}

    #parrafo5 {left:440px;}

    #parrafo6 {left:550px;}

    #parrafo7 {left:660px;}

    #parrafo8 {left:770px;}

    #parrafo9 {left:880px;}

    ul {

        padding:0px;

    li {

        float:left;

        list-style-type:none;

        padding-left:10px;

        cursor:pointer;

</style>

<script type="text/javascript">

    function MoverTexto(id,d)

        for(var i=1;i<=9;i++)

            var bloque=document.getElementById("parrafo"+i);

            if(i==id)

                if(d=="arriba")

                /*    bloque.style.top="90px";

                else*/

                    bloque.style.top="310px";

            }else{

                bloque.style.top="100px";

</script>

</head>

<body>

    <ul>

        <li onclick="MoverTexto('1', 'arriba');">Opcion 1</li>

       <!-- <li onclick="MoverTexto('1', 'abajo');">1 Abajo</li>-->

        <li onclick="MoverTexto('2', 'arriba');">Opcion 2</li>

       <!-- <li onclick="MoverTexto('2', 'abajo');">2 Abajo</li>-->

        <li onclick="MoverTexto('3', 'arriba');">Opcion 3</li>

       <!-- <li onclick="MoverTexto('3', 'abajo');">3 Abajo</li>-->

        <li onclick="MoverTexto('4', 'arriba');">Opcion 4</li>

        <li onclick="MoverTexto('5', 'arriba');">Opcion 5</li>

        <li onclick="MoverTexto('6', 'arriba');">Opcion 6</li>

        <li onclick="MoverTexto('7', 'arriba');">Opcion 7</li>

        <li onclick="MoverTexto('8', 'arriba');">Opcion 8</li>

        <li onclick="MoverTexto('9', 'arriba');">Opcion 9</li>

    </ul>

    <div id="parrafo1"></div>

    <div id="parrafo2"></div>

    <div id="parrafo3"></div>

    <div id="parrafo4"></div>

    <div id="parrafo5"></div>

    <div id="parrafo6"></div>

    <div id="parrafo7"></div>

    <div id="parrafo8"></div>

    <div id="parrafo9"></div>

</body>

</html>

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

mover divs con javascript mediante botones

Publicado por xve (2100 intervenciones) el 07/10/2013 08:07:01

Hola Sam, muchas gracias por tus comentarios, de verdad muy agradecido...;)

Sobre lo que me preguntas, es tan simple como ponerle en el estilo del parrafo que quieres esto: top:310px;

Por ejemplo, si quieres que sea el parrafo6, en el estilo tienes que poner:

#parrafo6 {left:550px;top:310px;}

Valora esta respuesta

Comentar

Ejemplo de como obtener la posición de un elemento con JavaScript

Como repetir funcion suma en varias filas