Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Riki_89D en 12 Diciembre 2010, 21:00 pm


Título: Ventana flotante javascript
Publicado por: Riki_89D en 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
  1. <html>
  2. <head>
  3.  
  4. <script lenguage="javascript">
  5.  
  6. function Mover()
  7. {
  8.  
  9. var posicion = window.event;
  10. var pos = posicion.clientX;
  11. var pos2 = posicion.clientY;
  12.  
  13. capa = document.getElementById("Capa");
  14.  
  15. capa.style.marginLeft = pos;
  16. capa.style.marginTop = pos2;
  17.  
  18.  
  19.  
  20.  
  21. }
  22.  
  23.  
  24.  
  25. </script>
  26.  
  27.  
  28. </head>
  29. <body onMouseMove="Mover()">
  30.  
  31. <div id="Capa" style="position:absolute; width: 200px; height: 200px; left: 0px; background-color:black;">
  32. </di>
  33.  
  34. </body>
  35. </html>
  36.  


saludos

Título: Re: Ventana flotante javascript
Publicado por: AFelipeTrujillo en 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
  1. //EVENTO PARA CONTROLAR LA EJECUCIÓN DE UN SCRIPT DESPUÉS DE HABER
  2. //CAGADO TODO EL DOM
  3.  
  4. window.onload = function(){
  5.    capa = document.getElementById("Capa");
  6.    capa.onclick = function(){
  7.     // METE EL CODIGO QUE HACE MOVER AL DIV
  8.    } 
  9. }
  10.  

Título: Re: Ventana flotante javascript
Publicado por: brock en 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 :)

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 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

Título: Re: Ventana flotante javascript
Publicado por: KuraraGNU en 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.

Título: Re: Ventana flotante javascript
Publicado por: brock en 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 :)

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 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?¿

Título: Re: Ventana flotante javascript
Publicado por: ‭lipman en 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

Título: Re: Ventana flotante javascript
Publicado por: KuraraGNU en 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 ^^

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 16 Diciembre 2010, 00:01 am
OK Gracias espro eespuesata

Título: Re: Ventana flotante javascript
Publicado por: KuraraGNU en 16 Diciembre 2010, 01:20 am
Cita de: Riki_89D en 16 Diciembre 2010, 00:01 am
OK Gracias espro eespuesata
Estoy en ello  ¿eh? XD Es que me cuesta, tengo muchas cosas que hacer >.<

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 16 Diciembre 2010, 12:08 pm
Ok trankilo no te apresures amigo :)



gracias :D

Título: Re: Ventana flotante javascript
Publicado por: ~ Yoya ~ en 16 Diciembre 2010, 14:52 pm
Drag & Drop (http://www.formatoweb.com.ar/blog/2007/09/22/drag-drop-arrastrar-y-soltar-simple-en-un-div-con-javascript-sin-librerias/)

Yo ocuparía scriptaculous

Título: Re: Ventana flotante javascript
Publicado por: Spider-Net en 16 Diciembre 2010, 22:03 pm
Podrías usar jquery-ui. Es super sencillo y muy personalizable:
http://jqueryui.com/demos/dialog/

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 17 Diciembre 2010, 00:34 am
no puedo usar el framework JQuery ni ninguno otro,pues es una practica y debo hacerla con JS,y se que se puede por que lo he visto muchas veces pero se trata de entenderlo,osea neceesito de un code sencillito que lo haga i yo hacerlo para la practica,ojala pudieramos usar frameworks


saludos

Título: Re: Ventana flotante javascript
Publicado por: ~ Yoya ~ en 17 Diciembre 2010, 22:08 pm
viste el link que te deje?

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 18 Diciembre 2010, 12:25 pm
Hola yoya,si i el link,no me aclaro mucho la verdad pero intentare de nueo aver que tal,saludos

Título: Re: Ventana flotante javascript
Publicado por: Riki_89D en 23 Diciembre 2010, 14:58 pm
Gracias a todos/as

KuraraGNU hablamos por msn

saludos!


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines