Foros del Web - Ver Mensaje Individual

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>