-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdragAndDrop.html
95 lines (83 loc) · 2.58 KB
/
dragAndDrop.html
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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>
<button onclick="move()">Go</button>
<div id="arrastrar" class="arrastrarte" style="left:0;top:0;">Arrastrame por la pantalla!!</div>
<div id="arrastrar1" class="arrastrarte" 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"
function move() {
//div = document.getElementById("arrastrar")
var div = document.createElement('div');
div.id = "title";
div.className = 'card text-white mb-3 arrastrar';
div.style="width: 18rem;";
document.body.appendChild(div);
//div1 = document.getElementById("arrastrar1")
var recu1 = new movimiento(div);
//recu1 = new movimiento(div1);
}
</script>