Código de JavaScript - Arrastrar y soltar un elemento por la pantalla con JavaScript

Imágen de perfil

Arrastrar y soltar un elemento por la pantalla con JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 30 de Octubre del 2017 por xve
2.203 visualizaciones desde el 30 de Octubre del 2017. Una media de 49 por semana
Este código muestra como es posible arrastras un elemento por la pantalla por encima de cualquier otro elemento.

arrastras-y-soltar

Requerimientos

Se ha probado con IE11, Edge, Firefox, Chrome y Opera

Versión 1.0
estrellaestrellaestrellaestrellaestrella(7)

Actualizado el 31 de Diciembre del 2017 (Publicado el 30 de Octubre del 2017)gráfica de visualizaciones de la versión: Versión 1.0
2.205 visualizaciones desde el 30 de Octubre del 2017. Una media de 49 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Arrastrar y soltar un elemento por la pantalla con JavaScript</title>
	<style>
	#arrastrar {
		text-align:center;
		width:100px;
		height:100px;
		border:5px solid #808080;
		color:red;
		border-radius:5px;
		position:relative;
		cursor:pointer;
	}
	</style>
</head>
<body>
	<h1>Arrastrar y soltar un elemento por la pantalla con JavaScript</h1>
	<div id="arrastrar" style="left:0;top:0;">Arrastrame por la pantalla!!</div>
</body>
</html>
 
<script>
// Clase para gestionar el movimiento de cualquier elemento
movimiento=function(div)
{
	// Estas variables obtienen la diferencia en pixels entre el punto del raton
	// pulsado dentro del div y el top y left del elemento. Es para que cuando 
	// realizemos el movimiento, el cursor del raton siempre este en la misma
	// posición dentro del div que mueve.
	difX=0;
	difY=0;
 
	// Creamos el evento en el div para controlar la pulsación sobre el elemento
	// cuando se pulsa sobre el elemento se ejecuta la funcion inicio()
	div.addEventListener('mousedown',inicio,false);
 
	// Iniciamos el arrastre
	function inicio(e)
	{
		// Obtenemos la posición del raton
		var eX=e.pageX;
		var eY=e.pageY;
		// Obtenemos los valores de la posicion left y top del elemento
		var oX=parseInt(div.style.left);
		var oY=parseInt(div.style.top);
		// Calculamos la diferencia entre la posicion del div con la del raton.
		difX=oX-eX;
		difY=oY-eY;
 
		// Cremos los eventos mousemove y mouseup
		document.addEventListener('mousemove',mover,false);
		document.addEventListener('mouseup',soltar,false);
	}
 
	// Movemos el elemento por la pantalla cada vez que se mueve el cursor
	function mover(e)
	{
		var tY=e.pageY+difY+'px';
		var tX=e.pageX+difX+'px'
		div.style.top=tY;
		div.style.left=tX;
	}
 
	// Funcion que se ejecuta el botón del ratón
	function soltar(e)
	{
		// Eliminamos los eventos creados en la funcion inicio
		document.removeEventListener('mousemove',mover,false);
		document.removeEventListener('mouseup',soltar,false);
	}
}
 
// Inicializamos el movimiento del div con id "arrastrar"
var recu1=new movimiento(document.getElementById("arrastrar"));
</script>



Comentarios sobre la versión: Versión 1.0 (7)

Imágen de perfil
kip
30 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
ScriptShow
31 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
abzerox
31 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
miguel
31 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Y encima explicado...
Gracias por la contribucion.
Responder
Imágen de perfil
Hernan Jose
31 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Excelente...
Responder
José Ortiz Sánchez
07 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Muchas gracias por el aporte
Responder
Imágen de perfil
Pablo
21 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Gracias Brother, contigo aprendo full........
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4285  
Revisar política de publicidad