[AYUDA][javascript] Soy muy nuevo en JS y necesito ayuda con este codogo

Noxware · 30 Septiembre 2014, 03:58 AM

Hola a todos, antes de empezar quiero decir q soy requeterecontra nuevo en JS (no dominos CSS y se lo basico de HTML5).... soy nuevo en todo lo q refiere a desarrolo web....

hace poco para comprobar si habia aprendido bien JS me puse una prueba....

tengo una ventanita y quiero arrastrarla....... eso es todo...... pero no me funciona ni da errores..... les dejo el codigo del archivo "index.html" y "mecha.js"

index.html:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>

<html>
<head>
 <title>My JS Desktop</title>
 <script type="text/javascript" src="mecha.js"></script>
</head>

<body background="wallpaper.jpg">



 <div style="text-align: right; background: white;">
  mouse_x: <span id="mouse_x"></span>
  mouse_y: <span id="mouse_y"></span>
 </div>

 <a onMouseDown="get_mouse_pos(event)" onMouseUp="mouse_break()"><img src="title_bar.jpg" width="500px" height="25px" style="position:absolute; top: 100px; left: 500px"></img></a>
 <iframe src="program_test.html" width="496px" height="500px" style="position:absolute; top: 125px; left: 500px"></iframe>



</body>
</html>

mecha.js:

Código (javascript) [Seleccionar]

press = false;

function get_mouse_pos(event){
 press = true;
 
 while (press == true){
  var x = event.clientX;
  var y = event.clientY;
  document.getElementById("mouse_x").innerHTML = x;
  document.getElementById("mouse_y").innerHTML = y;
 }
}

function mouse_break(){
 press = false;
}

por cierto.... title bar no es mas q una imagen gradiante q uso como barra de titulo para el ieframe....... por ahora solo quiero mover la barra de titulo y nada mas....

como podran ver soy muy nuevo principalmente en todo lo q refiere a la web (suelo programar en Python y VB6)

BlackM4ster · 30 Septiembre 2014, 08:48 AM

Así de forma rápida, he hecho ésto. Funciona correctamente

Código (html4strict) [Seleccionar]

<html>
<head>
 <title>Buenas</title>
 <script language="javascript">
  etc
 </script>
</head>
<body>

 HOLA!
 <div id="ventana" onMouseDown="clicked=true" onMouseUp="clicked=false"
      style="position: absolute; left: 50px; top: 150px; background-color: orange; width: 150px; height: 

75px;"></div>
</body>
</html>

Código (javascript) [Seleccionar]

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;

var tempX = 0;
var tempY = 0;

var clicked = false;

function getMouseXY(e) {

 if(clicked){

  if (IE) {
   tempX = event.clientX + document.body.scrollLeft;
   tempY = event.clientY + document.body.scrollTop;
  } else {
   tempX = e.pageX;
   tempY = e.pageY;
  }  

  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;}

  document.getElementById("ventana").style["left"] = tempX - document.getElementById("ventana").offsetWidth/2;
  document.getElementById("ventana").style["top"] = tempY - document.getElementById("ventana").offsetHeight/2;

 }
}

trig0 · 30 Septiembre 2014, 10:20 AM

A mí me venía bien refrescarlo, y de forma lenta intenté hacerlo así...

Código (javascript) [Seleccionar]


<!DOCTYPE html>
 
<html>
 <head>
  <title>My JS Desktop</title>
  <style type="text/css">
   #barraMover {
    position:absolute;
    top: 100px;
    left: 500px;
   }
   
   iframe{
    position:absolute;
    top: 125px;
    left: 500px;
   }
  </style>
  
  <script type="text/javascript">
   function mover(){
    var div = document.getElementById('barraMover');
    document.addEventListener('mousemove',function(barra) {
    
     x = barra.pageX+"px";
     y = barra.pageY+"px";
     
     div.style.left = x;
     div.style.top = y;
     
     document.getElementById("mouse_x").value = x;
     document.getElementById("mouse_y").value = y;
    });
   }
  </script>
 </head>
 
 <body background="wallpaper.jpg">
  <div id="contenedor">
   <div style="text-align: right; background: white;">
    mouse_x: <input type="text" id="mouse_x"/>
    mouse_y: <input type="text" id="mouse_y"/>
   </div>
   
   <div id="barraMover" onMouseDown="mover()">
    <img onMouseDown="return false" src="title_bar.jpg" width="500px" height="25px"/>
   </div>
   
   <iframe src="program_test.html" width="496px" height="500px"/>
  </div>
 </body>
</html>

Como funcionar funciona, pero no tiene el onMouseUp para que suelte el div

Test Foro de elhacker.net SMF 2.1

[AYUDA][javascript] Soy muy nuevo en JS y necesito ayuda con este codogo

Noxware

BlackM4ster

trig0