Ventana flotante javascript

Riki_89D · 12 Diciembre 2010, 21:00 PM

Hola cracks como estais?¿

Vereis intento crear una ventana flotante (un DIV) que se pueda mover,la verdad es que lo he conseguido,puedo mover ese DIV lo que pasa es que no se controlar los eventos,la ventana solo se mueve cuando muevo el raton por el documento sin pulsar boton ni nada i claro no puedo fijarla en un sitio siemrpe se muee co el raton y nose como decirle a JS que al pulsar el boton y moverlo a la vez encima de la capa se mueva con el raton,vamos lo que seria arrastrar la capa,tengo esto:

Código (javascript) [Seleccionar]


<html>
<head>

<script lenguage="javascript">

function Mover()
{

var posicion = window.event;
var pos = posicion.clientX;
var pos2 = posicion.clientY;

capa = document.getElementById("Capa");

capa.style.marginLeft = pos;
capa.style.marginTop = pos2;




}



</script>


</head>
<body onMouseMove="Mover()">

<div id="Capa" style="position:absolute; width: 200px; height: 200px; left: 0px; background-color:black;">
</di>

</body>
</html>

saludos

AFelipeTrujillo · 13 Diciembre 2010, 14:08 PM

Primero quite el evento onMouseMove del BODY y asignesele al DIV un onClick de esta forma, para que se vea limpio el HTML

Código (javascript) [Seleccionar]


//EVENTO PARA CONTROLAR LA EJECUCIÓN DE UN SCRIPT DESPUÉS DE HABER
//CAGADO TODO EL DOM

window.onload = function(){
   capa = document.getElementById("Capa");
   capa.onclick = function(){
    // METE EL CODIGO QUE HACE MOVER AL DIV
   } 
}

brock · 14 Diciembre 2010, 09:06 AM

Veo que editas el Margin, yo cree hace tiempo una ventana de esté tipo y cambiaba el postion y no el margin... Si necesitas ayuda me lo dices, es facil de hacer

Riki_89D · 14 Diciembre 2010, 09:09 AM

Hola brock,me salvas la vida amigo,si necesito ayuda,pues tienes razon no me di cuenta del position :S es que aisn me funciona pero nose como hacer que me funcione en plan arrastrar xd apretar boton mover i dejar me vendria uy bien tu ayuda gracias

KuraraGNU · 14 Diciembre 2010, 10:04 AM

Buenas yo no se mucho, pero bueno intentaré ayudar. ¿Por qué no haces que el evento onclick llame al evento onMouseOver? De forma que hasta que no hagas el click no haga nada aunque pases el ratón.

brock · 14 Diciembre 2010, 10:18 AM

http://www.locualo.net/programacion/mover-capas-otros-elementos-html-javascript-utilizando-raton/00000101.aspx

Mirate eso

, si tienes alguna duda me lo dices y te ayudo

Riki_89D · 14 Diciembre 2010, 13:54 PM

Bueno ese ejempo ya lo vi,pero no entendi muy bien,es que esto de llamar un evento desde otro es para mi xino alguna sugerencia?¿

‭lipman · 15 Diciembre 2010, 11:37 AM

Es mucho más fácil de lo que parece:

http://delanover.com/foro/page/css/menu-flotante.htm

KuraraGNU · 15 Diciembre 2010, 11:49 AM

lipman, creo que el enlace que pasaste no hace lo que busca el autor de este post. Lo que quiere es mover un DIV cuando se pulse y arrastre el ratón ¿no? Voy a mirarte esta tarde cómo hacerlo para que pinches y salte el evento del mouseOver y luego vuelvas a pinchar y se quite o algo así, que eso de arrastrar no se cómo sería posible hacer, es que yo javascript lo vi muy por encima el año pasado, pero como quiero aprender esta tarde te lo miro que estoy en clase ahora ^^

Riki_89D · 16 Diciembre 2010, 00:01 AM

OK Gracias espro eespuesata