Código de JavaScript - Arrastrar y soltar un elemento por la pantalla para móviles y tablets con JavaScript

Imágen de perfil
Val: 2.205
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 para móviles y tablets con JavaScriptgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 28 de Septiembre del 2018 por xve
1.539 visualizaciones desde el 28 de Septiembre del 2018
Este código muestra como es posible arrastras un elemento por la pantalla de un smartphone (móvil) o tablet por encima de cualquier otro elemento utilizando touch.

arrastrar-movil-touch


Aquí tienes la versión para navegador de escritorio:
https://www.lawebdelprogramador.com/codigo/JavaScript/4285-Arrastrar-y-soltar-un-elemento-por-la-pantalla-de-un-PC-con-JavaScript.html

Puedes obtener mas información sobre los eventos touch en: https://developer.mozilla.org/es/docs/DOM/Touch_events

Requerimientos

Se ha probado con Firefox, Chrome y Opera

Versión 1.0
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 28 de Septiembre del 2018gráfica de visualizaciones de la versión: Versión 1.0
1.540 visualizaciones desde el 28 de Septiembre del 2018
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
79
80
81
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Arrastrar y soltar un elemento por la pantalla con JavaScript</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<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 de un móvil 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('touchstart',inicio,false);
 
	// Iniciamos el arrastre
	function inicio(e)
	{
        e.preventDefault();
		// Obtenemos la posición del raton
		var eX=e.changedTouches[0].pageX;
		var eY=e.changedTouches[0].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('touchmove',mover,false);
		document.addEventListener('touchend',soltar,false);
	}
 
	// Movemos el elemento por la pantalla cada vez que se mueve el cursor
	function mover(e)
	{
		var tY=e.changedTouches[0].pageY+difY+'px';
		var tX=e.changedTouches[0].pageX+difX+'px'
		div.style.top=tY;
		div.style.left=tX;
	}
 
	// Funcion que se ejecuta el botón del ratón
	function soltar(e)
	{
        e.preventDefault();
		// Eliminamos los eventos creados en la funcion inicio
		document.removeEventListener('touchmove',mover,false);
		document.removeEventListener('touchend',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 (3)

30 de Septiembre del 2018
estrellaestrellaestrellaestrellaestrella
Maravilloso amigo, excelente muy agradecido!!!!!!!!!!
Responder
Emmanuel
13 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Hola, excelente, me funcionó, lo que sucede es que desde el dispositivo movil ésta función de tocar y arrastrar deja inutilizables los enlaces que estan dentro del contenedor, en mi caso mi contenedor tiene adentro 3 enlaces, pero no puedo tocar sobre ellos cuando hago que todo el contenedor sea arrastrable, de la PC si, pero del teléfono no, mi sitio es http://127.0.0.1:49816/1/index.html , y el objeto que cito dentro del sitio es la tarjeta con 3 fotos en la parte superior
Responder
Emmanuel
13 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Perdón, el link que pase está mal, el correcto es http://www.diazcortez.com.ar/clubes-de-barrio/vm76/1/index.html
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/s4846