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

Introducción

Arrastrar y soltar es una interacción de usuario común que puede encontrar en muchas interfaces gráficas de usuario.

Existen bibliotecas de JavaScript preexistentes para agregar una función de arrastrar y soltar a su aplicación. Sin embargo, puede haber situaciones en las que una biblioteca no esté disponible o introduzca una sobrecarga o dependencia que su proyecto no necesita. En estas situaciones, el conocimiento de las API disponibles en los navegadores web modernos puede ofrecer soluciones alternativas.

La API de arrastrar y soltar HTML se basa en el modelo de eventos del DOM para obtener información sobre lo que se arrastra o suelta y para actualizar ese elemento al arrastrarlo o soltarlo. Con los controladores de eventos de JavaScript, puede convertir cualquier elemento en un elemento que se pueda arrastrar o soltar.

En este tutorial, crearemos un ejemplo de arrastrar y soltar utilizando la API de arrastrar y soltar HTML con JavaScript básico para usar los controladores de eventos.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Un navegador web moderno que admita la API de arrastrar y soltar (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Paso 1: creación del proyecto y marcado inicial

Nuestro proyecto constará de un contenedor con dos tipos de elementos secundarios:

• Elementos secundarios que puedes arrastrar
• Elementos secundarios en los que se pueden colocar elementos

Primero, abra su ventana de terminal y cree un nuevo directorio de proyecto:

mkdir drag-and-drop-example

A continuación, navegue hasta ese directorio:

cd drag-and-drop-example

Luego, crea un index.htmlarchivo en ese directorio:

nano index.html

A continuación, agregue el código repetitivo para una página web HTML:

índice.html

!DOCTYPE htmlhtml  head    titleMy Drag-and-Drop Example/title    link rel="stylesheet" href="style.css" /  /head  body  /body/html

Y entre las bodyetiquetas agrega tu draggableartículo y tu dropzone(destino de colocación):

índice.html

div  div    div                    draggable    /div  /div  div         dropzone  /div/div

Guarde y cierre el archivo. Luego, cree un style.cssarchivo:

nano style.css

A continuación, agregue estilos para los elementos en nuestro index.htmlarchivo:

estilo.css

.example-parent {  border: 2px solid #DFA612;  color: black;  display: flex;  font-family: sans-serif;  font-weight: bold;}.example-origin {  flex-basis: 100%;  flex-grow: 1;  padding: 10px;}.example-draggable {  background-color: #4AAE9B;  font-weight: normal;  margin-bottom: 10px;  margin-top: 10px;  padding: 10px;}.example-dropzone {  background-color: #6DB65B;  flex-basis: 100%;  flex-grow: 1;  padding: 10px;}

Esto agregará algo de formato a la aplicación. Ahora puedes verla index.htmlen el navegador y observar que esto produce un draggable divy un dropzone div.

A continuación, haremos explícitamente el primer divobjeto arrastrable agregando el draggableatributo:

índice.html

div  div    div                draggable="true"          draggable    /div  /div  div         dropzone  /div/div

Guarde y cierre el archivo.

Por último, index.htmlvolvemos a visualizarlo en el navegador. Si hacemos clic en él draggable divy lo arrastramos por la pantalla, debería aparecer una indicación visual de que se está moviendo.

El valor predeterminado del draggableatributo es auto. Esto significa que si el elemento se puede arrastrar o no se determinará según el comportamiento predeterminado de su navegador. Por lo general, esto significa que las selecciones de texto, las imágenes y los enlaces se pueden arrastrar sin especificar draggable="true".

Ahora tienes un archivo HTML con un elemento arrastrable. Vamos a pasar a agregar oneventcontroladores.

Paso 2: Manejo de eventos de arrastrar y soltar con JavaScript

Actualmente, si soltamos el ratón mientras arrastramos el elemento arrastrable, no ocurre nada. Para activar una acción al arrastrar o soltar elementos del DOM, necesitaremos utilizar la API de arrastrar y soltar:

• ondragstart:Este controlador de eventos se adjuntará a nuestro draggableelemento y se activará cuando dragstartse produzca un evento.
• ondragover:Este controlador de eventos se adjuntará a nuestro dropzoneelemento y se activará cuando dragoverse produzca un evento.
• ondrop:Este controlador de eventos también se adjuntará a nuestro dropzoneelemento y se activará cuando dropocurra un evento.

Nota: Hay ocho controladores de eventos en total: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstarty ondrop. Para nuestro ejemplo, no los necesitaremos todos.

Primero, hagamos referencia a un nuevo script.jsarchivo en nuestro index.html:

índice.html

body  ...  script src="script.js"/script/body

A continuación, crea un nuevo script.jsarchivo:

nano script.js

El DataTransferobjeto mantendrá un registro de la información relacionada con el arrastre actual. Para actualizar nuestro elemento al arrastrarlo y soltarlo, necesitamos acceder directamente al DataTransferobjeto. Para ello, podemos seleccionar la dataTransferpropiedad desde el elemento DOM DragEvent.

Nota: El DataTransferobjeto puede rastrear técnicamente la información de varios elementos que se arrastran al mismo tiempo. En nuestro ejemplo, nos centraremos en arrastrar un elemento.

El método dataTransferdel objeto setDatase puede utilizar para establecer la información del estado de arrastre del elemento que se arrastra actualmente. Acepta dos parámetros:

• una cadena que declara el formato del segundo parámetro
• los datos reales que se transfieren

Nuestro objetivo es mover nuestro draggableelemento a un nuevo elemento padre. Necesitamos poder seleccionar nuestro draggableelemento con un único id. Podemos establecer el iddel elemento arrastrado con el setDatamétodo para que pueda usarse más adelante.

Revisemos nuestro script.jsarchivo y creemos una nueva función para usar setData:

script.js

function onDragStart(event) {  event    .dataTransfer    .setData('text/plain', event.target.id);}

Nota: Se informa que Internet Explorer 9 a 11 tiene problemas con el uso de 'text/plain'. El formato debe ser el adecuado 'text'para ese navegador.

Para actualizar el estilo CSS del elemento arrastrado, podemos acceder a sus estilos usando nuevamente el evento DOM y configurando los estilos que queramos para el currentTarget.

Agreguemos a nuestra función y cambiemos backgroundColora yellow:

script.js

function onDragStart(event) {  event    .dataTransfer    .setData('text/plain', event.target.id);  event    .currentTarget    .style    .backgroundColor = 'yellow';}

Nota: Si desea estilos que solo se puedan arrastrar, deberá actualizar manualmente cualquier estilo que cambie al soltarlo. Si cambia algo cuando comienza a arrastrar, el elemento arrastrado conservará ese nuevo estilo a menos que lo cambie nuevamente.

Ahora tenemos nuestra función de JavaScript para cuando comienza el arrastre.

Podemos añadir ondragstartal draggableelemento en index.html:

índice.html

div  div    div                draggable="true"      ondragstart="onDragStart(event);"          draggable    /div  /div  div    dropzone  /div/div

Visualízalo index.htmlen tu navegador. Si intentas arrastrar el elemento ahora, se aplicará el estilo declarado en nuestra función:

Sin embargo, no ocurrirá nada cuando sueltes el clic.

El siguiente controlador de eventos que se activa en esta secuencia es ondragover.

El comportamiento de soltar predeterminado para ciertos elementos DOM como divs en los navegadores normalmente no acepta soltar. Este comportamiento interceptará el comportamiento que estamos intentando implementar. Para asegurarnos de obtener el comportamiento de soltar deseado, aplicaremos preventDefault.

Revisemos nuevamente el script.jsarchivo y creemos una nueva función para usar preventDefault. Agregue este código al final del archivo:

script.js

function onDragOver(event) {  event.preventDefault();}

Ahora, podemos agregar ondragovera nuestro dropzoneelemento index.html:

índice.html

div  div    div                draggable="true"      ondragstart="onDragStart(event);"          draggable    /div  /div  div       ondragover="onDragOver(event);"      dropzone  /div/div

En este punto, aún no hemos escrito el código que se encargará de la eliminación real. El último controlador de eventos que se activa en esta secuencia es ondrop.

Revisemos nuestro script.jsarchivo y creemos una nueva función.

Podemos hacer referencia a los datos que guardamos anteriormente con el método dataTransferdel objeto setData. Usaremos el método dataTransferdel objeto getData. Los datos que configuramos fueron id, por lo que eso es lo que nos devolverán:

script.js

function onDrop(event) {  const id = event    .dataTransfer    .getData('text');}

Seleccione nuestro draggableelemento con el que idrecuperamos:

script.js

function onDrop(event) {  // ...  const draggableElement = document.getElementById(id);}

Seleccione nuestro dropzoneelemento:

script.js

function onDrop(event) {  // ...  const dropzone = event.target;}

Añade nuestro draggableelemento a dropzone:

script.js

function onDrop(event) {  // ...  dropzone.appendChild(draggableElement);}

Restablecer nuestro dataTransferobjeto:

script.js

function onDrop(event) {  // ...  event    .dataTransfer    .clearData();}

Ahora, podemos agregar ondropa nuestro dropzoneelemento index.html:

índice.html

div  div    div                draggable="true"      ondragstart="onDragStart(event);"          draggable    /div  /div  div       ondragover="onDragOver(event);"    ondrop="onDrop(event);"      dropzone  /div/div

Una vez hecho esto, tenemos la función de arrastrar y soltar completa. Visualice index.htmlen su navegador y arrastre el draggableelemento al dropzone.

Nuestro ejemplo maneja el escenario de un solo elemento arrastrable y un solo destino para soltar. Puede tener varios elementos arrastrables, varios destinos para soltar y personalizarlos con todos los demás controladores de eventos de la API de arrastrar y soltar.

Paso 3: creación de un ejemplo avanzado con varios elementos arrastrables

He aquí un ejemplo más de cómo podrías utilizar esta API: una lista de tareas pendientes con tareas que se pueden arrastrar y mover de una "To-do"columna a "Done"otra.

Para crear tu propia lista de tareas pendientes, agrega más elementos arrastrables con idsímbolos únicos a index.html:

índice.html

div  h1To-do list/h1  div    To-do    div                draggable="true"      ondragstart="onDragStart(event);"          thing 1    /div    div      id="draggable-2"      class="example-draggable"      draggable="true"      ondragstart="onDragStart(event);"          thing 2    /div    div      id="draggable-3"      class="example-draggable"      draggable="true"      ondragstart="onDragStart(event);"          thing 3    /div    div      id="draggable-4"      class="example-draggable"      draggable="true"      ondragstart="onDragStart(event);"          thing 4    /div  /div  div       ondragover="onDragOver(event);"    ondrop="onDrop(event);"      Done  /div/div

Visualice index.htmlen su navegador y arrastre los elementos de la columna Tareas pendientes a la columna Listo . Ha creado una aplicación de tareas pendientes y ha probado su funcionalidad.

Conclusión

En este artículo, creó una aplicación de tareas pendientes para explorar la funcionalidad de arrastrar y soltar que está disponible en los navegadores web modernos.

La API de arrastrar y soltar ofrece múltiples opciones para personalizar las acciones que se realizan más allá de arrastrar y soltar. Por ejemplo, puede actualizar el estilo CSS de los elementos arrastrados. Además, en lugar de mover el elemento, puede elegir copiar el elemento arrastrable para que se replique al soltarlo.

Tenga en cuenta que, si bien muchos navegadores web admiten esta tecnología, es posible que no pueda confiar en ella si su audiencia utiliza dispositivos que no admiten esta funcionalidad.

Para obtener más información sobre todo lo que puede soltar con la API de arrastrar y soltar, consulte la documentación de MDN al respecto.