Foros del Web » Programando para Internet » Javascript »

Mover ventana

Estas en el tema de Mover ventana en el foro de Javascript en Foros del Web. Hola, Trato de mover una ventana con un codigo que estoy haciendo: Código HTML: <style> #ventana_t { position:absolute; width:216px; left:274px; top:72px; visibility:; height: 319px; } ...
  #1 (permalink)  
Antiguo 26/08/2008, 18:09
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 1 mes
Puntos: 101
Mover ventana

Hola,
Trato de mover una ventana con un codigo que estoy haciendo:
Código HTML:
<style> 
#ventana_t {
    position:absolute;
	width:216px; 
	left:274px; 
	top:72px; 
	visibility:;
	height: 319px;
}
.barra_ventana {
	background-color: #DDDDDD;
	border: 1px solid #999999;
}

#prop_it {
	background-color: #F8F8F8;
	border: 1px solid #666666;
}
</style> 
<script language="javascript1.2"> 
var mover_t=false;

function moder_vent(){
if (mover_t){
x_m=x_t+(event.clientX-t_x);
y_m=y_t=+(event.clientY-t_y);
if(x_m>=0 && y_m>=0){
document.all.ventana_t.style.pixelLeft=x_m;
document.all.ventana_t.style.pixelTop=y_m;
}
return false;
}
}

function mover_play(){
t_x=event.clientX;
t_y=event.clientY;
x_t=ventana_t.style.pixelLeft;
y_t=ventana_t.style.pixelTop;
mover_t=true;
document.onmousemove=moder_vent;
}
if (document.all){
document.onmouseup=new Function("mover_t=false");
}
function cerrar_VET(){
if (document.all)
ventana_t.style.visibility="hidden";
else if (document.layers)
document.ventana_t.visibility="hide";
}
</script> 
<div id="ventana_t">
<table border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr onMousedown="mover_play()" style="cursor:move">
    <td height="11"><img src="Images/Ventana/derecha_ventana.gif" alt="-" width="10" height="30" /></td>
    <td background="Images/Ventana/barra_ventana.gif"><span style="color: #FFFFFF; font-weight: bold; font-family:Arial, Helvetica, sans-serif;">Propiedades</span></td>
    <td  background="Images/Ventana/barra_ventana.gif"><a href="#" onClick="cerrar_VET();"><img src="Images/Ventana/cerrar_ventana.gif" alt="Clic para cerrar" width="100" height="25" border="0" /></a></td>
    <td ><img src="Images/Ventana/izquierda_ventana.gif" alt="-" width="10" height="30" /></td>
  </tr>
  <tr class="barra_ventana">
    <td colspan="4" valign="top" id="prop_it"><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br /></td>
  </tr>
</table></div> 
Lo que hace es al arrastrar me lo lleva tope (x 0 | y 0) y despues me lo mueve pero mal.
¿Porque no anda bien?
Gracias
Salu2
__________________
Half Music - www.halfmusic.com
  #2 (permalink)  
Antiguo 26/08/2008, 21:21
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Mover ventana

Tu código no es compatible con los navegadores modernos. Agregué una capa contenedora con posición absoluta y modifiqué el estilo de tu ventana. Fijate si te sirve:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>test</title>
<
style
#container{
    
position:absolute;
    
left:274px
    
top:72px
}
#ventana_t {
    
position:relative;
    
width:216px
    
    
visibility:;
    
height319px;
}
.
barra_ventana {
    
background-color#DDDDDD;
    
border1px solid #999999;
}

#prop_it {
    
background-color#F8F8F8;
    
border1px solid #666666;
}
</
style

<
script>
//inicio lib
function $(id){
    return 
document.getElementById(id);    
}
function 
addEvent(objevTypefnuseCapture){
 
 if (
obj.addEventListener){
    
obj.addEventListener(evTypefnuseCapture);
    
  } else if (
obj.attachEvent){
      
obj[fn+evType]=fn;
    
obj[fn+evType+'n']=function(){obj[fn+evType](window.event);}
    
obj.attachEvent("on"+evTypeobj[fn+evType+'n']);
   
  } else {
   
obj['on'+evType]=fn;
  }
}

function 
removeEvent(objevTypefnuseCapture){
  if (
obj.removeEventListener){
    
obj.removeEventListener(evTypefnuseCapture);
  } else if (
obj.detachEvent){
    
obj.detachEvent("on"+evTypeobj[fn+evType+'n']);
    
obj[fn+evType+'n']=null;
  } else {
    
obj['on'+evType]=function(){};
  }
}

function 
stopEvent(e) {
    if (!
ewindow.event;
    if (
e.stopPropagation) {
        
e.stopPropagation();
    } else {
        
e.cancelBubble true;
    }
}
function 
cancelEvent(e) {
    if (!
ewindow.event;
    if (
e.preventDefault) {
        
e.preventDefault();
    } else {
        
e.returnValue false;
    }
}



function 
getNextHighestDepth(){
    var 
tCol=document.getElementsByTagName('*');
    var 
z=0;
        for(var 
i=0;i<tCol.length;i++){
            if(
tCol[i].style.zIndex>z){
                
z=tCol[i].style.zIndex;
            }
            
        }
    return ++
z;
}

//fin lib

arrastrable={};

function 
mover(e){
    
arrastrable.c2x=e.clientX;
    
arrastrable.c2y=e.clientY;
    
this.style.left=arrastrable.c2x-arrastrable.c1x+arrastrable.o1x+'px';
    
this.style.top=arrastrable.c2y-arrastrable.c1y+arrastrable.o1y+'px';
    
cancelEvent(e);
    
stopEvent(e);
}

function 
detener(){
    
removeEvent(this'mousemove'moverfalse);
    
removeEvent(this'mouseup'detenerfalse);
}

function 
i(e){
    if(
this.position!="relative"||!this.style.position){
        
this.style.position="relative";
        
this.style.cssFloat="none";
        
this.style.zIndex=getNextHighestDepth();
    }
    
arrastrable.c1x=e.clientX;
    
arrastrable.c1y=e.clientY;
    
arrastrable.o1x=!isNaN(parseInt(this.style.left))?parseInt(this.style.left):0;
    
arrastrable.o1y=!isNaN(parseInt(this.style.top))?parseInt(this.style.top):0;
    
addEvent(this'mousemove',moverfalse);
    
addEvent(this'mouseup',detenerfalse);
    
addEvent(this'mouseout',detenerfalse);
    
cancelEvent(e);
    
stopEvent(e);
}

function 
makeDraggable(){
    for(var 
j=0;j<arguments.length;j++){
        $(
arguments[j]).style.cursor='move';
        
addEvent($(arguments[j]), 'mousedown',ifalse);
    }
}
function 
cerrar_VET(){
    $(
'ventana_t').style.visibility="hidden";
}

window.onload=function(){
    
makeDraggable('ventana_t');
}
</script>
</head>

<body>
<div id="container">
<div id="ventana_t">
<table border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="11"><img src="Images/Ventana/derecha_ventana.gif" alt="-" width="10" height="30" /></td>
    <td background="Images/Ventana/barra_ventana.gif"><span style="color: #FFFFFF; font-weight: bold; font-family:Arial, Helvetica, sans-serif;">Propiedades</span></td>
    <td  background="Images/Ventana/barra_ventana.gif"><a href="#" onClick="cerrar_VET();"><img src="Images/Ventana/cerrar_ventana.gif" alt="Clic para cerrar" width="100" height="25" border="0" /></a></td>
    <td ><img src="Images/Ventana/izquierda_ventana.gif" alt="-" width="10" height="30" /></td>
  </tr>
  <tr class="barra_ventana">
    <td colspan="4" valign="top" id="prop_it"><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br /></td>
  </tr>
</table></div></div>
</body>
</html> 

Última edición por Panino5001; 26/08/2008 a las 21:58
  #3 (permalink)  
Antiguo 27/08/2008, 12:56
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 1 mes
Puntos: 101
Respuesta: Mover ventana

Hola,
Funciona de 10.
Pero yo solo quiero que para mover la ventana, se tega que apretar en la parte de arriba (como en Windows).
Igual muchas gracias.
Salu2
PD: Ese codigo (primer post) lo ise sin conocimientos de como se hace.
__________________
Half Music - www.halfmusic.com
  #4 (permalink)  
Antiguo 27/08/2008, 14:24
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Mover ventana

Con una pequeña modificación entonces (tratá de entender cómo funciona):
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>test</title>
<
style
#container{
    
position:absolute;
    
left:274px
    
top:72px
}
#ventana_t {
    
position:relative;
    
width:216px
    
    
visibility:;
    
height319px;
}
.
barra_ventana {
    
background-color#DDDDDD;
    
border1px solid #999999;
}

#prop_it {
    
background-color#F8F8F8;
    
border1px solid #666666;
}
</
style

<
script>
//inicio lib
function $(id){
    return 
document.getElementById(id);    
}
function 
addEvent(objevTypefnuseCapture){
 
 if (
obj.addEventListener){
    
obj.addEventListener(evTypefnuseCapture);
    
  } else if (
obj.attachEvent){
      
obj[fn+evType]=fn;
    
obj[fn+evType+'n']=function(){obj[fn+evType](window.event);}
    
obj.attachEvent("on"+evTypeobj[fn+evType+'n']);
   
  } else {
   
obj['on'+evType]=fn;
  }
}

function 
removeEvent(objevTypefnuseCapture){
  if (
obj.removeEventListener){
    
obj.removeEventListener(evTypefnuseCapture);
  } else if (
obj.detachEvent){
    
obj.detachEvent("on"+evTypeobj[fn+evType+'n']);
    
obj[fn+evType+'n']=null;
  } else {
    
obj['on'+evType]=function(){};
  }
}

function 
stopEvent(e) {
    if (!
ewindow.event;
    if (
e.stopPropagation) {
        
e.stopPropagation();
    } else {
        
e.cancelBubble true;
    }
}
function 
cancelEvent(e) {
    if (!
ewindow.event;
    if (
e.preventDefault) {
        
e.preventDefault();
    } else {
        
e.returnValue false;
    }
}



function 
getNextHighestDepth(){
    var 
tCol=document.getElementsByTagName('*');
    var 
z=0;
        for(var 
i=0;i<tCol.length;i++){
            if(
tCol[i].style.zIndex>z){
                
z=tCol[i].style.zIndex;
            }
            
        }
    return ++
z;
}

//fin lib

arrastrable={};

function 
mover(e){
    
arrastrable.c2x=e.clientX;
    
arrastrable.c2y=e.clientY;
    
this.parentNode.parentNode.parentNode.style.left=arrastrable.c2x-arrastrable.c1x+arrastrable.o1x+'px';
    
this.parentNode.parentNode.parentNode.style.top=arrastrable.c2y-arrastrable.c1y+arrastrable.o1y+'px';
    
cancelEvent(e);
    
stopEvent(e);
}

function 
detener(){
    
removeEvent(this'mousemove'moverfalse);
    
removeEvent(this'mouseup'detenerfalse);
}

function 
i(e){
    if(
this.parentNode.parentNode.parentNode.position!="relative"||!this.parentNode.parentNode.parentNode.style.position){
        
this.parentNode.parentNode.parentNode.style.position="relative";
        
this.parentNode.parentNode.parentNode.style.cssFloat="none";
        
this.parentNode.parentNode.parentNode.style.zIndex=getNextHighestDepth();
    }
    
arrastrable.c1x=e.clientX;
    
arrastrable.c1y=e.clientY;
    
arrastrable.o1x=!isNaN(parseInt(this.parentNode.parentNode.parentNode.style.left))?parseInt(this.parentNode.parentNode.parentNode.style.left):0;
    
arrastrable.o1y=!isNaN(parseInt(this.parentNode.parentNode.parentNode.style.top))?parseInt(this.parentNode.parentNode.parentNode.style.top):0;
    
addEvent(this'mousemove',moverfalse);
    
addEvent(this'mouseup',detenerfalse);
    
addEvent(this'mouseout',detenerfalse);
    
cancelEvent(e);
    
stopEvent(e);
}

function 
makeDraggable(){
    for(var 
j=0;j<arguments.length;j++){
        $(
arguments[j]).style.cursor='move';
        
addEvent($(arguments[j]), 'mousedown',ifalse);
    }
}
function 
cerrar_VET(){
    $(
'ventana_t').style.visibility="hidden";
}

window.onload=function(){
    
makeDraggable('esto');
}
</script>
</head>

<body>
<div id="container">
<div id="ventana_t">
<table border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr id="esto">
    <td height="11"><img src="Images/Ventana/derecha_ventana.gif" alt="-" width="10" height="30" /></td>
    <td background="Images/Ventana/barra_ventana.gif"><span style="color: #FFFFFF; font-weight: bold; font-family:Arial, Helvetica, sans-serif;">Propiedades</span></td>
    <td  background="Images/Ventana/barra_ventana.gif"><a href="#" onClick="cerrar_VET();"><img src="Images/Ventana/cerrar_ventana.gif" alt="Clic para cerrar" width="100" height="25" border="0" /></a></td>
    <td ><img src="Images/Ventana/izquierda_ventana.gif" alt="-" width="10" height="30" /></td>
  </tr>
  <tr class="barra_ventana">
    <td colspan="4" valign="top" id="prop_it"><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br /></td>
  </tr>
</table></div></div>
</body>
</html> 
  #5 (permalink)  
Antiguo 07/01/2009, 14:55
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 550
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Mover ventana

=D
muy bueno
pero yo prefiero usar este
miren aki dejo los codigos

-----------------------------------------------------------------------------------------
index.html
-----------------------------------------------------------------------------------------
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="ES" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<body class="mensajeflotante" onload="staticbar('barraregistro','fromRight','frombottom','0','15','15'); return false">
<script src="float.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div style="visibility:visible"  id="barraregistro"><div id="darkcheats">

<div align="right"><a href="#" onclick="closebar('barraregistro','0'); return false">
<img src="http://www.darkcheats.org/foros/darkcheats/gfx/floatcerrar.gif" border=0/></a>&nbsp;&nbsp;</div>
</div>
  <table class="floatmensaje" width="100%" border="0">
    <tr>
      <td width="25%" height="80"><img src="http://www.darkcheats.org/foros/darkcheats/gfx/floatlogo.gif"></td>
      <td class="floatmensaje" width="80%">
<center><img src="http://www.darkcheats.org/foros/darkcheats/famfamfam/atencion.gif"> 
<font color="#FF6600"><b>ATENCION: Este Es Un Ejemplo</b></font></center>
<br>
<b>www.SisiumWeb.com.ar</b>
<br>Disfruta De Este Float =D

<br><br>
<br>De Parte De Strikefay</td>
    </tr>
  </table>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html> 
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
style.css
-----------------------------------------------------------------------------------------
Código HTML:
.mensajeflotante #barraregistro {
	position: absolute;
	font-size: 8x;
	height: 120px;
	width: 440px;
	background-color: #3B87CA;
	font-size: 8px;
}
.mensajeflotante #barraregistro #sitiumweb {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8x;
	color: #C4E27A;
	background-color: #C4E27A;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #F2F1DA;
	background-repeat: repeat-y;
	font-weight: bold;
}
.floatmensaje
{
	background: #F2F1DA;
	font: 9pt tahoma,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	color: #36444F;
}
-----------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------

float.js
-----------------------------------------------------------------------------------------
Código HTML:
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(IdLayer,persistclose){
if (persistclose)
document.cookie="remainclosed=0"
document.getElementById(IdLayer).style.visibility="hidden"
}

function staticbar(IdLayer, horizontalpos, verticalpos, persistclose, startX, startY){
   try {
       barheight = document.getElementById(IdLayer).offsetHeight
       var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
       var d = document;
       function ml(id){
           var el = d.getElementById(id);
           if (!persistclose || persistclose && get_cookie("remainclosed") == "")
               el.style.visibility = "visible"
           if (d.layers)
               el.style = el;
           if (horizontalpos == "fromRight") {
               el.sP = function(x, y){
                   this.style.right = x + "px";
                   this.style.top = y + "px";
               };
           }
           else {
               el.sP = function(x, y){
                   this.style.left = x + "px";
                   this.style.top = y + "px";
               };
           }
           el.x = startX;
           if (verticalpos == "fromtop")
               el.y = startY;
           else {
               el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
               el.y -= startY;
           }
           return el;
       }
       window.stayTopLeft = function(){
           if (verticalpos == "fromtop") {
               var pY = ns ? pageYOffset : iecompattest().scrollTop;
               ftlObj.y += (pY + startY - ftlObj.y) / 8;
           }
           else {
               var pY = ns ? pageYOffset + innerHeight - barheight : iecompattest().scrollTop + iecompattest().clientHeight - barheight;
               ftlObj.y += (pY - startY - ftlObj.y) / 8;
           }
           ftlObj.sP(ftlObj.x, ftlObj.y);
           setTimeout("stayTopLeft()", 10);
       }
       ftlObj = ml(IdLayer);
       stayTopLeft();
   } catch (e) {
          }
}

if (window.addEventListener)
   window.addEventListener("load", staticbar, false)
else
   if (window.attachEvent)
       window.attachEvent("onload", staticbar)
   else
       if (document.getElementById)
           window.onload = staticbar 


saludoz
  #6 (permalink)  
Antiguo 14/04/2009, 09:53
Avatar de rickyper  
Fecha de Ingreso: abril-2009
Mensajes: 182
Antigüedad: 15 años, 7 meses
Puntos: 10
Respuesta: Mover ventana

Hola miren este ejemplo

//proyectokimera.co.cc/wp-content/uploads/2009/03/recetas-er.png

estos objetos se mueven al antojo quiero saber como hacerlo con javascript
ya se como mover obejtos pero no se como hacen para juntar mas de dos objetos de esta manera y moverlos a nuestro antojo saludos...!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:31.