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:
<!DOCTYPE html>
<body background="wallpaper.jpg">
<div style="text-align: right; background: white;">
<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>
mecha.js:
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)
Así de forma rápida, he hecho ésto. Funciona correctamente :)
<script language="javascript"> etc
HOLA!
<div id="ventana" onMouseDown="clicked=true" onMouseUp="clicked=false" style="position: absolute; left: 50px; top: 150px; background-color: orange; width: 150px; height:
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;
}
}
A mí me venía bien refrescarlo, y de forma lenta intenté hacerlo así... :rolleyes: :rolleyes:
<!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 ;-)