Foros del Web » Programando para Internet » Javascript »

codigo javascript efecto mover arrastrar ventana igual que windows

 Estas en el tema de codigo javascript efecto mover arrastrar ventana igual que windows en el foro de Javascript en Foros del Web. este code lo he desarrollado espero que les guste esta demaciado bueno todavia le faltan mejoras pero es un code bueno crea un efecto parecido ...
  #1 (permalink)  
Antiguo 24/04/2008, 17:29
 
Fecha de Ingreso: abril-2008
Mensajes: 19
Antigüedad: 16 años
Puntos: 1
Desacuerdo codigo javascript efecto mover arrastrar ventana igual que windows
este code lo he desarrollado espero que les guste esta demaciado bueno todavia le faltan mejoras pero es un code bueno crea un efecto parecido a jquerry
bueno aca el code

// JavaScript Document
var ks=0;
var ks2=0;
var delec;
function deselectionar(){
delec=true;
if (delec == true) {
try {
document.getElementById(objeto.idmover).detachEven t("mousemove", mover);

}
catch (err) {

try {
document.getElementById(objeto.idmover).removeEven tListener("onmousemove", mover, true);
}
catch (erre3) {
d();
}
ks2 = null;
ks = null;
}
}
}
function d(){
try {
document.getElementById(objeto.idmover).detachEven t("onmousemove", mover);
}
catch (err2s) {
document.getElementById(objeto.idmover).removeEven tListener("onmousemove", mover, true);
}
delec=false;
}

function selecinar(){
delec = false;
if (delec == false) {
try {
document.getElementById(objeto.idmover).addEventLi stener("mousemove", mover, true);
}
catch (err2) {
document.getElementById(objeto.idmover).attachEven t("onmousemove", mover);
}

}
}
function mover(event){

ks = event.clientY-20;
ks2 = event.clientX-200;
if (delec == false) {
{
document.getElementById(objeto.idmover).style.top = ks + "px";
document.getElementById(objeto.idmover).style.left = ks2 + "px";
}
}if (delec == true){

deselectionar();
}




}


function obtneride(id)
{
var ks= document.getElementById(id);

return ks;
}
function cerrar()
{
}
var objeto=new Object();
objeto.id;
objeto.maximo;
objeto.tamanox;
objeto.child=false;
objeto.childs;
objeto.idmover;


function maximizar()
{
objeto.tamanox+=15;

var doc=document.getElementById(objeto.id);

doc.style.height = objeto.tamanox + "px";

var ks= window.setTimeout("maximizar()",20);
if(objeto.tamanox>objeto.maximo)
{
if(objeto.child==true)
{

document.getElementById(objeto.id).appendChild(obj eto.childs);
}
window.clearTimeout(ks);

}



}

function minimizar()
{
objeto.tamanox-=10;

var doc=document.getElementById(objeto.id);

doc.style.height = objeto.tamanox + "px";

var ks= window.setTimeout("minimizar()",20);
if(objeto.tamanox<objeto.maximo)
{

window.clearTimeout(ks);
}

}
aqui el css
@charset "utf-8";
/* CSS Document */

#boton1{background:url(botones/minimizar.jpg) no-repeat;
width:50px;
background-color:#E6E6E6;
height:49px;
padding:0px;
cursor:pointer; cursor:hand;
border:none;
}
#boton2{background:url(botones/maximizar.jpg) no-repeat;
width:50px;
background-color:#E6E6E6;
height:49px;
padding:0px;
cursor:pointer; cursor:hand;
border:none;
}
#form1{
width:300px;
background-color:#E6E6E6;
border: 1px solid #666;
cursor:move;
}
#b2{
background-color:#CCCCCC;
padding:3px;
border:1px solid #000;
position:absolute;
z-index:1;
top:104px;
left:448px;
width:303px;
height: 270px;
}
#cuerpo{
background:url(botones/cuerpo.gif);
background-color:#FFFFFF;
margin-top:7px;
width:300px;
height:210px;
border: 1px solid #666;
}
#cuerpo #form2{ font-family:"Courier New", Courier, monospace; margin-top:10px; margin-left:70px;
margin-right:30px;}
#cuerpo #form2 #boton3{border:solid #666 1px; background-color:#FFFFFF;
width:63px; height:61px; cursor:pointer; cursor:hand;}

ejemplo coopiar en blog de notas y reemplazar las imagenes con las que ustedes les gusten

<!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=utf-8" />
<title>loginplantilla</title>
<link href="miks.css" rel="stylesheet" type="text/css" />
<script src="formulariologin.js" type="text/javascript"></script>
<script type="text/javascript">

function min()
{
objeto.id="b2";
objeto.maximo=60;
objeto.tamanox=300;
var form=obtneride("boton1");
form.disabled=true;
var form=obtneride("boton2");
form.disabled=false;
minimizar();
var ob=obtneride("cuerpo");
document.getElementById("b2").removeChild(ob);
}
function max()
{
objeto.id="b2";
objeto.maximo=260;
objeto.tamanox=75;
objeto.child=true;

var hijodos=document.createElement("form");
var hijotres=document.createElement("input");
var hijocuatro=document.createElement("input");
var hijocinco=document.createElement("input");

var brs=document.createElement("br");
var brs2=document.createElement("br");
var brs3=document.createElement("p");
var brs4=document.createElement("br");

var textou="ID";
var textod="Password";
var textouno=document.createTextNode(textou);
hijodos.appendChild(textouno);
hijodos.appendChild(brs);
var texto2=document.createTextNode(textod);

hijotres.setAttribute("name","uno");
hijotres.setAttribute("id","uno");
hijotres.setAttribute("type","text");

hijocinco.setAttribute("name","boton");
hijocinco.setAttribute("id","boton3");
hijocinco.setAttribute("type","submit");
hijocinco.setAttribute("value","Enviar");


hijodos.appendChild(hijotres);
hijodos.appendChild(brs4);
hijodos.appendChild(texto2);
hijodos.appendChild(brs2);

hijocuatro.setAttribute("name","dos");
hijocuatro.setAttribute("id","tres");
hijocuatro.setAttribute("type","text");

hijodos.appendChild(hijocuatro);

hijodos.setAttribute("name","form2");
hijodos.setAttribute("id","form2");
hijodos.setAttribute("method","post");

hijodos.appendChild(brs3);
hijodos.appendChild(hijocinco);

var hijo=document.createElement("div");
hijo.setAttribute("id","cuerpo");
hijo.appendChild(hijodos);
objeto.childs=hijo;

var form=obtneride("boton1");
form.disabled=false;
var form=obtneride("boton2");
form.disabled=true;

maximizar();

}

window.onload=function(){
var form=obtneride("boton2");
form.disabled=true;
objeto.idmover="b2";
}
function ver(event){

var ksj=event.clientY;
var ks2j=event.clientX;
document.getElementById("unoxk").innerHTML="Y "+ksj+"px X "+ks2j+"ppx";




}



</script>
</head>

<body onmousemove="ver(event);" >
<p id="unoxk">sdsadads</p>
<div id="b2">
<div>
<form id="form1" name="form1" onmousedown="selecinar();" onmouseup="deselectionar();" method="post" action="">
<label>
<input type="button" name="button" onclick="min();" id="boton1" />
</label>
<input type="button" name="boton" onclick="max();" id="boton2" />
</form>
</div>
<div id="cuerpo">
<form id="form2" name="form2" method="post" action="">
<label>ID<br />
<input type="text" name="uno" id="uno" />
<br />
Password<br />
</label>
<label>
<input type="text" name="dos" id="dos" />
</label>
<p>
<label>
<input type="button" name="boton" id="boton3" value="Enviar" />
</label>
</p>
</form>
</div>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 25/04/2008, 10:39
Avatar de rogoelpra  
Fecha de Ingreso: abril-2007
Ubicación: Bucaramanga
Mensajes: 246
Antigüedad: 17 años
Puntos: 2
Re: codigo javascript efecto mover arrastrar ventana igual que windows
Hola AnthraxlegenXD, estuve tratando de implementar tu codigo y sale con errores.

Podrias Corregirlo...

Suena Interesante.

Gracias.
  #3 (permalink)  
Antiguo 25/04/2008, 14:48
Avatar de [NiRVaNa]  
Fecha de Ingreso: abril-2004
Ubicación: Someplace In The Middle Of Nowhere!
Mensajes: 325
Antigüedad: 20 años
Puntos: 6
Re: codigo javascript efecto mover arrastrar ventana igual que windows
Trata de poner cada parte del codigo (JS, CSS, HTML) por separado, dentro de las etiquetas "CODE" o "HTML" o "PHP" que posee el editor del foro.

Y podria ser un buen aporte, porque lo separe rapido en 3 archivos, y todavia no funciona...

Suerte!
  #4 (permalink)  
Antiguo 25/04/2008, 15:43
 
Fecha de Ingreso: febrero-2005
Ubicación: 101% Paraguayo
Mensajes: 57
Antigüedad: 19 años, 2 meses
Puntos: 0
Re: codigo javascript efecto mover arrastrar ventana igual que windows
Hola ordene un poco el codigo:
Este es el Primer Script lo inserto asi porque no entendi bien.. y me da un error
veo apra corregirlo pero mientras lo ordeno.

Primer Script
Código: 
<script>
// JavaScript Document
// JavaScript Document
var ks = 0;
var ks2 = 0;
var delec;
function deselectionar(){
    delec = true;
    if (delec == true) {
        try {
            document.getElementById(objeto.idmover).detachEven t("mousemove", mover);

        }
        catch (err) {

            try {
                document.getElementById(objeto.idmover).removeEven tListener("onmousemove", mover, true);
            }
            catch (erre3) {
                d();
            }
            ks2 = null;
            ks = null;
        }
    }
}
function d(){
    try {
        document.getElementById(objeto.idmover).detachEven t("onmousemove", mover);
    }
    catch (err2s) {
        document.getElementById(objeto.idmover).removeEven tListener("onmousemove", mover, true);
    }
    delec = false;
}

function selecinar(){
    delec = false;
    if (delec == false) {
        try {
            document.getElementById(objeto.idmover).addEventLi stener("mousemove", mover, true);
        }
        catch (err2) {
            document.getElementById(objeto.idmover).attachEven t("onmousemove", mover);
        }

    }
}
function mover(event){

    ks = event.clientY - 20;
    ks2 = event.clientX - 200;
    if (delec == false) {
        {
            document.getElementById(objeto.idmover).style.top = ks + "px";
            document.getElementById(objeto.idmover).style.left = ks2 + "px";
        }
    }
    if (delec == true){

        deselectionar();
    }
}


function obtneride(id)
{
    var ks = document.getElementById(id);

    return ks;
}
function cerrar()
{
}
var objeto = new Object();
objeto.id;
objeto.maximo;
objeto.tamanox;
objeto.child = false;
objeto.childs;
objeto.idmover;


function maximizar()
{
    objeto.tamanox += 15;

    var doc = document.getElementById(objeto.id);

    doc.style.height = objeto.tamanox + "px";

    var ks = window.setTimeout("maximizar()", 20);
    if(objeto.tamanox > objeto.maximo)
    {
        if(objeto.child == true)
        {

            document.getElementById(objeto.id).appendChild(obj eto.childs);
        }
        window.clearTimeout(ks);

    }
}

function minimizar()
{
    objeto.tamanox -= 10;

    var doc = document.getElementById(objeto.id);

    doc.style.height = objeto.tamanox + "px";

    var ks = window.setTimeout("minimizar()", 20);
    if(objeto.tamanox < objeto.maximo)
    {

        window.clearTimeout(ks);
    }
}
</script>
Este es un 2º script
Código: 
<script type="text/javascript">
function min()
{
    objeto.id = "b2";
    objeto.maximo = 60;
    objeto.tamanox = 300;
    var form = obtneride("boton1");
    form.disabled = true;
    var form = obtneride("boton2");
    form.disabled = false;
    minimizar();
    var ob = obtneride("cuerpo");
    document.getElementById("b2").removeChild(ob);
}
function max()
{
    objeto.id = "b2";
    objeto.maximo = 260;
    objeto.tamanox = 75;
    objeto.child = true;

    var hijodos = document.createElement("form");
    var hijotres = document.createElement("input");
    var hijocuatro = document.createElement("input");
    var hijocinco = document.createElement("input");

    var brs = document.createElement("br");
    var brs2 = document.createElement("br");
    var brs3 = document.createElement("p");
    var brs4 = document.createElement("br");

    var textou = "ID";
    var textod = "Password";
    var textouno = document.createTextNode(textou);
    hijodos.appendChild(textouno);
    hijodos.appendChild(brs);
    var texto2 = document.createTextNode(textod);

    hijotres.setAttribute("name", "uno");
    hijotres.setAttribute("id", "uno");
    hijotres.setAttribute("type", "text");

    hijocinco.setAttribute("name", "boton");
    hijocinco.setAttribute("id", "boton3");
    hijocinco.setAttribute("type", "submit");
    hijocinco.setAttribute("value", "Enviar");


    hijodos.appendChild(hijotres);
    hijodos.appendChild(brs4);
    hijodos.appendChild(texto2);
    hijodos.appendChild(brs2);

    hijocuatro.setAttribute("name", "dos");
    hijocuatro.setAttribute("id", "tres");
    hijocuatro.setAttribute("type", "text");

    hijodos.appendChild(hijocuatro);

    hijodos.setAttribute("name", "form2");
    hijodos.setAttribute("id", "form2");
    hijodos.setAttribute("method", "post");

    hijodos.appendChild(brs3);
    hijodos.appendChild(hijocinco);

    var hijo = document.createElement("div");
    hijo.setAttribute("id", "cuerpo");
    hijo.appendChild(hijodos);
    objeto.childs = hijo;

    var form = obtneride("boton1");
    form.disabled = false;
    var form = obtneride("boton2");
    form.disabled = true;

    maximizar();

}

window.onload = function(){
    var form = obtneride("boton2");
    form.disabled = true;
    objeto.idmover = "b2";
}
function ver(event){

    var ksj = event.clientY;
    var ks2j = event.clientX;
    document.getElementById("unoxk").innerHTML = "Y " + ksj + "px X " + ks2j + "ppx";

}
</script>
Ahora veo que hay una llamada a un JS que no se si se refiere al mismo.
Código: 
<script src="formulariologin.js" type="text/javascript"></script>
El Style
Código: 
<style>
@charset "utf-8";
/* CSS Document */

#boton1 {
	background:url(botones/minimizar.jpg) no-repeat;
	width:50px;
	background-color:#E6E6E6;
	height:49px;
	padding:0px;
	cursor:pointer;
	cursor:hand;
	border:none;
}
#boton2 {
	background:url(botones/maximizar.jpg) no-repeat;
	width:50px;
	background-color:#E6E6E6;
	height:49px;
	padding:0px;
	cursor:pointer;
	cursor:hand;
	border:none;
}
#form1 {
	width:300px;
	background-color:#E6E6E6;
	border: 1px solid #666;
	cursor:move;
}
#b2 {
	background-color:#CCCCCC;
	padding:3px;
	border:1px solid #000;
	position:absolute;
	z-index:1;
	top:104px;
	left:448px;
	width:303px;
	height: 270px;
}
#cuerpo {
	background:url(botones/cuerpo.gif);
	background-color:#FFFFFF;
	margin-top:7px;
	width:300px;
	height:210px;
	border: 1px solid #666;
}
#cuerpo #form2 {
	font-family:"Courier New", Courier, monospace;
	margin-top:10px;
	margin-left:70px;
	margin-right:30px;
}
#cuerpo #form2 #boton3 {
	border:solid #666 1px;
	background-color:#FFFFFF;
	width:63px;
	height:61px;
	cursor:pointer;
	cursor:hand;
}
 ejemplo coopiar en blog de notas y reemplazar las imagenes con las que ustedes les gusten <!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=utf-8" /> <title>loginplantilla</title> <link href="miks.css" rel="stylesheet" type="text/css" />
</style>
Y por Ultimo el HTML espero alguien pueda corregir el error.
Código HTML:
<body onmousemove="ver(event);" >
<p id="unoxk">aqui</p>
<div id="b2">
  <div>
    <form id="form1" name="form1" onmousedown="selecinar();" onmouseup="deselectionar();" method="post" action="">
      <label>
      <input type="button" name="button" onclick="min();" id="boton1" />
      </label>
      <input type="button" name="boton" onclick="max();" id="boton2" />
    </form>
  </div>
  <div id="cuerpo">
    <form id="form2" name="form2" method="post" action="">
      <label>ID<br />
      <input type="text" name="uno" id="uno" />
      <br />
      Password<br />
      </label>
      <label>
      <input type="text" name="dos" id="dos" />
      </label>
      <p>
        <label>
        <input type="button" name="boton" id="boton3" value="Enviar" />
        </label>
      </p>
    </form>
  </div>
</div>
</body>
</html>
  #5 (permalink)  
Antiguo 25/04/2008, 17:48
 
Fecha de Ingreso: abril-2008
Mensajes: 19
Antigüedad: 16 años
Puntos: 1
Re: codigo javascript efecto mover arrastrar ventana igual que windows
bueno manes le subi a mega upload para que lo puedan correr lo que pasa es que soy new hehehe en este foro
aqui el link esta megaupload no premiun
http://www.megaupload.com/?d=2DQ3VF9K
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

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:36.