Código de JavaScript - Mover elementos de un formulario

sin imagen de perfil

Mover elementos de un formulariográfica de visualizaciones


JavaScript

Publicado el 27 de Junio del 2002 por Tecnicam (22 códigos)
17.293 visualizaciones desde el 27 de Junio del 2002
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
17.294 visualizaciones desde el 27 de Junio del 2002
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)

9 de Marzo del 2008
estrellaestrellaestrellaestrellaestrella
Excelente codigo, muy util, muchas gracias
Responder
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
7 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s239