Código de JavaScript - Mover elementos de un formulario

Mover elementos de un formulariográfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 27 de Junio del 2002 por tecniCam
14.899 visualizaciones desde el 27 de Junio del 2002. Una media de 21 por semana
Permite mover cualquier elemento de un formulario por la pagina web.

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 27 de Junio del 2002gráfica de visualizaciones de la versión: Versión 1
14.900 visualizaciones desde el 27 de Junio del 2002. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<HTML>
<HEAD>
<TITLE> Personalizar un formulario </TITLE>
<STYLE TYPE="text/css">
 INPUT {position:absolute}
 SELECT {position:absolute}
 P {position:absolute; color:green}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
 
function Inic(){
Mover=false
PermisoMov=false
}
 
function Permiso(){
  if (PermisoMov) {
   Mover=!Mover
  }
}
 
function MoverElemento(){
 if (Mover&&PermisoMov){
   Elemento=window.event.srcElement
   Elemento.style.color="red"
   Elemento.style.posTop=window.event.y-15
   Elemento.style.posLeft=window.event.x-15
 }
}
</SCRIPT>
 
</HEAD>
 
<BODY onload="Inic()">
<H3> Todos estos elementos se pueden mover </H3>
<H4> Selecciona uno cualquiera, pulsa el botón izquierdo
     del ratón, mueve a la posición deseada y pulsa
     de nuevo el botón del ratón </H4>
 
<FORM onmousemove="MoverElemento()">
<INPUT STYLE="top:170px" TYPE="button" VALUE="Boton 1" onclick="Permiso()">
<INPUT STYLE="top:210px" TYPE="button" VALUE="Boton 2" onclick="Permiso()">
<INPUT STYLE="top:250px" TYPE="button" VALUE="Boton 3" onclick="Permiso()">
 
<P onclick="Permiso()" STYLE="top:290px; left:10px"> Opción 1 </P>
<INPUT STYLE="top:290px; left:90px" TYPE="radio" NAME="Opciones" onclick="Permiso()">
 
<P onclick="Permiso()" STYLE="top:310px; left:10px"> Opción 2 </P>
<INPUT STYLE="top:310px; left:90px" TYPE="radio" NAME="Opciones" onclick="Permiso()">
 
<P onclick="Permiso()" STYLE="top:330px; left:10px"> Opción 3 </P>
<INPUT STYLE="top:330px; left:90px" TYPE="radio" NAME="Opciones" onclick="Permiso()">
 
<BR><BR><BR>
<INPUT STYLE="top:360px" TYPE="button" VALUE="habilitar/dehabilitar movimientos" onclick="PermisoMov=!PermisoMov">
<INPUT STYLE="top:400px" TYPE="submit" VALUE="Enviar">
 
</FORM>
</BODY>
</HTML>



Comentarios sobre la versión: Versión 1 (3)

Andres Cadena
09 de Marzo del 2008
estrellaestrellaestrellaestrellaestrella
Excelente codigo, muy util, muchas gracias
Responder
Eduardo
10 de Enero del 2009
estrellaestrellaestrellaestrellaestrella
Esta bueno el codigo, pero si uno mueve rapido el mouse, se separa del cursor.
Sabes como hacerlo para que no se separe del cursor
Responder
camilo
07 de Agosto del 2013
estrellaestrellaestrellaestrellaestrella
No sirve en chrome
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s239