Alguien me ayuda a mejorar esto

korg1988 · #1 (**permalink**) 19/07/2008, 19:34

Hola estoy armando un codigo para mover un objeto, y bueno, lo esstoy armando intentando no copiar ningun codigo.
Esto es lo que tengo hecho hasta ahora

Código PHP:

  <html>
<head>
    <style>
        #capa
        {
            width: 30px;
            height: 30px;
            background-color: #000000;
        }
    </style>
    
    <script>
        var activado = false;
        function activar()
        {
            activado = !activado;
        }
        function mover(obj, e)
        {
            if(activado == true)
            {
                obj.style.marginTop = (e.clientY-15)+"px";
                obj.style.marginLeft = (e.clientX-15)+"px";
            }
        }
    </script>
</head>

<body>
    <div id="capa" onclick="activar();" onmousemove="mover(this, event);"></div>
</body>
</html>

El problema es que si muevo el mouse muy rapido el script deja de andar porque ya se va de adentro del objeto y el onmousemove pierde efecto!

Alguna ayudita?jaja

gracias! saludos!

marcopoloaz06 · #2 (**permalink**) 19/07/2008, 20:26

hola,
que tal
si lo pones
así:

Código HTML:

<body onmousemove="mover(document.getElementById('capa'), event);">
    <div id="capa" onclick="activar();"></div>
</body>

saludos
:]

korg1988 · #3 (**permalink**) 19/07/2008, 22:07

jaja si lo habia hecho asi en un momento! asi lo habia pensado pero sabes que ahora que vos me lo mostras, habia puesto mal el valor del argumento "obj" en la funcion :P porque lo habia copiado con el "this" del div y no habia hecho la modificacion de ponerle document.getElement.bla bla bla...AJAJ
Que despistado! jaja

gracias master! ;)
suerte

korg1988 · #4 (**permalink**) 19/07/2008, 22:45

ahora como podria hacer para que tengan que mantener el boton apretado ? y se mueva mientras tengan el boton apretado del mouse?

marcopoloaz06 · #5 (**permalink**) 20/07/2008, 01:07

hola,
de nuevo
ps muy fácil

Código HTML:

<body onmousemove="mover(document.getElementById('capa'), event);" onmousedown="activar();" onmouseup="activar();">

saludos
:]

korg1988 · #6 (**permalink**) 20/07/2008, 16:26

gracias, el tema seria si tengo mas de un objeto, justamente por eso yo habia usado el argumento obj en la funcion mover!
como hago para que eso resulte para cada uno de los objetos en los que yo clicke

marcopoloaz06 · #7 (**permalink**) 20/07/2008, 23:46

hola,
ps aver
si esto te
funciona ....

Código HTML:

<html>
<head>
    <style>
        #capa1
        {
            width: 35px;
            height: 35px;
            background-color: #000000;
            position:absolute;
        }
        #capa2
        {
            width: 30px;
            height: 30px;
            background-color: red;
            position:absolute;
        }
    </style>
    
    <script>
    function Mover(obj){
        this .obj = document.getElementById(obj);
        this .activado = false;
        this .activar = function(){
            this .activado = !this .activado;
        };
        this .mover = function( e){
            if(this .activado == true){
                this .obj.style.marginTop = (e.clientY-15)+"px";
                this .obj.style.marginLeft = (e.clientX-15)+"px";
            }
        };
        
    }
    
    var capa1,capa2;
    onload = function(){
    
        capa1 = new Mover("capa1");
        capa2 = new Mover("capa2");
        
    };
    
    </script>
</head>

<body onmousemove="capa1.mover( event);  capa2.mover( event);">
    <div id="capa1" onmousedown="capa1.activar();" onmouseup="capa1.activar();"></div>
    <div id="capa2" onmousedown="capa2.activar();" onmouseup="capa2.activar();"></div>
</body>

</html>

bueno saludos
:]

korg1988 · #8 (**permalink**) 22/07/2008, 14:22

gracias amigo! sos un master, con eso que me ayudaste me enseñaste y me diste a entender muchas cosas y me aclaraste muchisimas cosas

gracias che!

ahora te muestro como deje el codigo le agregue una funcion mas a ver que te parece

Código PHP:

  <html>
<head>
    <style>
        #capa
        {
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        #cabecera
        {
            background-color: #000000;
            text-align: right;
        }
    </style>
    
    <script>
        function Movimiento(obj)
        {
            /*    variables    */
            this.obj         =    document.getElementById(obj);
            this.activado    =    false;
            this.maximizado    =    false;
            this.ancho        =    300;
            this.alto        =    200;
            
            /*    funciones    */
            this.activar    =    function() {
                this.activado = !this.activado;
            }
            this.mover         =     function(e) {
                if(this.activado == true) {
                    this.obj.style.marginTop    =    (e.clientY-15)+"px";
                    this.obj.style.marginLeft    =    (e.clientX-150)+"px";
                }
            }
            this.maximizar    =    function() {
                this.maximizado = !this.maximizado;
                if(this.maximizado == true) {
                    this.obj.style.width        =    "100%";//document.width+"px";
                    this.obj.style.height        =    "100%";//document.height+"px";
                    this.obj.style.marginTop    =    "0px";
                    this.obj.style.marginLeft    =    "0px";
                } else {
                    this.obj.style.width        =    this.ancho+"px";
                    this.obj.style.height        =    this.alto+"px";
                }
                document.body.focus();
            }
        }

        window.onload = function()
        {
            capa1 = new Movimiento("capa");
        }
    </script>
</head>

<body onmousemove="capa1.mover(event);" onmousedown="capa1.activar();" onmouseup="capa1.activar();">
    <div id="capa" onclick="" ondblclick="capa1.maximizar();">
        <div id="cabecera"><img src="botones.jpg" /></div>
    </div>
</body>
</html>

marcopoloaz06 · #9 (**permalink**) 22/07/2008, 14:49

ps,
esta muy
muy bien ee
puedes hacer mas
métodos como cerrar o
escribir.

saludos

korg1988 · #10 (**permalink**) 22/07/2008, 14:59

ahaha hablando de escribir
quise hacerlo, estuve buscando en internet como detectar el codigo ascii de la tecla pulsada pero no supe como hacerlo!, no pude encontrarlo!...
algo como para hacer una comprobacion de la tecla presionada para saber si se presiono el ENTER o alguna otra tecla como TAB
alguna idea de eso ?
bueno, se que el cursor lo tengo que hacer con un Pipe ( | )

David · #11 (**permalink**) 22/07/2008, 15:06

En las FAQ's hay un ejemplo.

korg1988 · #12 (**permalink**) 22/07/2008, 15:22

gracias david, voy a verlo