Error instaciando unos objetos

Ang3r · #1 (**permalink**) 27/08/2010, 15:59

Hola estoy tratando de crear ventanas flotantes en javascript y no puedo instanciar los objetos de manera independiente, les dejo el codigo:

Esta es la clase:

Código Javascript:

Ver originalMin.Ventana={
    ventana: window,
    ancho: window.screen.width,
    alto: window.screen.height,
        
    moverCapas: function(el){
        this.naveador=Min.Navegador.obtenerNavegador();
        this.elemento=el;
        this.comenzarMovimiento=function(){
            elMovimiento=document.getElementById(this.elemento);
            elMovimiento.style.position="relative";
            elMovimiento.onmousedown=function(event){
                cursorComienzoX=event.clientX+window.scrollX;
                cursorComienzoY=event.clientY+window.scrollY;
                document.addEventListener("mousemove",enMovimiento, true);
                document.addEventListener("mouseup",finMovimiento, true);
                elComienzoX=parseInt(elMovimiento.style.left);
                elComienzoY=parseInt(elMovimiento.style.top);
                function enMovimiento(event){
                    var xActual, yActual;
                    xActual=event.clientX+window.scrollX;
                    yActual=event.clientY+window.scrollY;
                    elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px";
                    elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px";
                    elMovimiento.style.opacity="0.4";
                    evitaEventos(event);
                }
                
                function finMovimiento(){
                    document.removeEventListener("mousemove", enMovimiento, true);
                    document.removeEventListener("mouseup", finMovimiento, true);
                    elMovimiento.style.opacity="1";
                }
                
                function evitaEventos(){
                    event.preventDefault();
                }
            }
        }
        this.getId=function(){
            return this.elemento;
        }
    }
}

Este es el HTML

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ventanas</title>
<link href="framework.css" rel="stylesheet" type="text/css" />
<script src="framework.js"></script>
<script>
    Min.DOM.DOMCompleto(function(){
        var obj = new Min.Ventana.moverCapas('formulario');
        obj.comenzarMovimiento();
        obj.getId();
        var obj2 = new Min.Ventana.moverCapas('formulario2');
        obj2.comenzarMovimiento();
        obj2.getId();
    }); 
</script>
</head>
<body>
<div class="formulario" id="formulario" style="top:0px;left:0px;">
    <div class="titulo" id="titulo" style="top:0px;left:0px;cursor:move">
        <span class="logo"><img src="images/zebra.gif" /></span>
        <span class="label">Mi Formulario</span>
        <span class="accion">
        <img src="images/minimizar.jpg" />
        <img src="images/max.png" />
        <img src="images/cerrar.jpg" />
        </span>
     </div>
</div>
 
<!-- ############### -->
 
<div class="formulario" id="formulario2" style="top:0px;left:0px;">
    <div class="titulo" id="titulo2" style="top:0px;left:0px;cursor:move">
        <span class="logo"><img src="images/zebra.gif" /></span>
        <span class="label">Mi Formulario</span>
        <span class="accion">
        <img src="images/minimizar.jpg" />
        <img src="images/max.png" />
        <img src="images/cerrar.jpg" />
        </span>
     </div>
</div>
 
</body>
</html>

zerokilled · #2 (**permalink**) 27/08/2010, 16:59

no puedo hacer pruebas con el codigo que has mostrado porque esta incompleto. ahora bien, analizando lo que tienes... en la linea 10 declaras una variable que contiene la referencia al elemento a mover. pero esta variable esta declarada como global de modo que cada vez que invocas el metodo comenzarMovimiento esta variable cambia de valor. ¿que implicaciones tiene? que en el evento onmousedown haces referencia a esa variable y la variable siempre contiene el ultimo elemento definido. solucion, declara la variable como local con el prefijo var. asumo que es ahi donde esta el problema.