dragAndDrop.html

<!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>