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

Imágen de perfil
Val: 2.211
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

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


JavaScript

estrellaestrellaestrellaestrellaestrella(8)
Actualizado el 28 de Septiembre del 2018 por xve (Publicado el 30 de Octubre del 2017)
6.145 visualizaciones desde el 30 de Octubre del 2017
Este código muestra como es posible arrastras un elemento por la pantalla por encima de cualquier otro elemento.

arrastras-y-soltar


Aquí tienes la versión para móviles y tablets:
https://www.lawebdelprogramador.com/codigo/JavaScript/4846-Arrastrar-y-soltar-un-elemento-por-la-pantalla-para-moviles-y-tablets-con-JavaScript.html

Requerimientos

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

Versión 1.0
estrellaestrellaestrellaestrellaestrella(8)

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
6.146 visualizaciones desde el 30 de Octubre del 2017
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 (8)

Imágen de perfil
30 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
31 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
31 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
31 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Y encima explicado...
Gracias por la contribucion.
Responder
Imágen de perfil
31 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Excelente...
Responder
7 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Muchas gracias por el aporte
Responder
Imágen de perfil
21 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Gracias Brother, contigo aprendo full........
Responder
28 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Excelente trabajo!!!
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