Cómo crear elementos de arrastrar y soltar con Vanilla JavaScript y HTML

HTML y JavaScript se pueden combinar para crear animaciones y efectos sorprendentes y llamativos en la página web. Hay millones de sitios web disponibles en Internet, y no desea que su sitio web se olvide en medio de estos sitios web. Uno de los efectos más simples que puede dar a un elemento en una página web es el efecto de arrastrar y soltar. Para mover y colocar un elemento en cualquier punto en la página web. En esta publicación, le mostraremos cómo hacer que un elemento sea arrastrable y solto en la página web.

Elemento arrastrable y drogado con HTML y JavaScript

Cree un nuevo elemento HTML y dentro de la etiqueta corporal del archivo HTML, cree un nuevo elemento DIV con las siguientes líneas de código:

Arrastrar y soltarme

Esto creará la siguiente página web:

Para peinar un poco este elemento, escriba el siguiente código fuera del etiqueta:

Al cambiar este estilo, obtiene la siguiente salida en la página web:

Para el código de script, cree un nuevo etiqueta de guión , El JavaScript nos colocaremos dentro de esta etiqueta de script. Para la parte de JavaScript, primero vamos a crear un nuevo varilla que luego usará la referencia del elemento para cambiar su posición en la página web:

var dragValue;

A continuación, vamos a crear una función llamada mover() que usaremos para mover el elemento. Lo primero que vamos a hacer dentro de esta función de movimiento es obtener la referencia de nuestro elemento dentro de una variable con la siguiente línea de código:

elemento var = documento.getElementById ("Dragelement");

No es que tengamos nuestra referencia, vamos a establecer la posición de este elemento en absoluto. A medida que avanzamos el elemento con nuestra elección, queremos colocarlo exactamente donde queremos, no en relación con otro elemento:

elemento.estilo.posición = "absoluto";

Cuando hacemos clic en este elemento, queremos pasar la referencia de nuestro elemento a la "Dragvalue" variable para que podamos manipular su posición:

elemento.onmousedown = function ()
dragValue = elemento;
;

Ahora, que tenemos la referencia de nuestro elemento almacenado en el dragón Variable, ahora lo vamos a colocar en la ubicación del mouse utilizando las siguientes líneas de código:

documento.onmouseMove = function (e)
var x = e.Pagex;
var y = e.Pagey;
dragón.estilo.izquierda = x + "px";
dragón.estilo.top = y + "px";
;

Cuando soltamos el botón del mouse, queremos eliminar la referencia de nuestro elemento de la "Dragvalue" variable:

elemento.onMouseUp = function ()
dragValue = nulo;
;

El último paso es invocar esto mover() función con la siguiente línea de código:

mover();

El código de script completo será:

Guarde el archivo y ejecute el HTML, y obtendrá el siguiente resultado en su navegador:

Y ahí lo tienes; Has hecho un elemento de arrastrar y soltar en Vanilla JavaScript

Conclusión

Uno de los efectos más simples que puede crear utilizando el JavaScript de Vanilla junto con HTML es el elemento dragable y drogado en su página web. Entre el medio de millones de sitios web, desea que su página web se destaque. Para eso, la página web debe ser súper atractiva e interactiva. Hay múltiples formas de hacer un efecto o animación particular gracias a las cantidades cada vez mayores de las bibliotecas de JavaScript. Pero hoy nos centramos en crear algo interactivo usando Vanilla JavaScript.