Atributo draggable y evento dragstart

Cualquier elemento se convierte en un origen de arrastre cuando establece draggable="true". Los enlaces y las imágenes se pueden arrastrar de forma predeterminada; todo lo demás (divs, lis, spans) requiere el atributo explícito. draggable="false" excluye un elemento del arrastre nativo.

Cuando el usuario comienza a arrastrar, el elemento de origen emite dragstart. Aquí es donde debe inicializar el arrastre: registre qué elemento se está moviendo, aplíquele estilos opcionales y escriba los datos en el objeto dataTransfer que leerá la zona de destino.

Si marca un elemento como arrastrable pero nunca gestiona dragstart, el navegador sigue arrastrando una imagen fantasma, pero no se establecen datos, por lo que la mayoría de las zonas de destino rechazan la operación. Asocie siempre el atributo draggable a un listener de dragstart que almacene al menos un identificador.

e.dataTransfer.effectAllowed = "move" en dragstart restringe la operación: "copy", "move", "link", "copyMove", "all" o "none". Esto determina el cursor que muestra el navegador y el dropEffect que la zona de destino puede establecer posteriormente.

Añada una clase CSS al elemento de origen para que aparezca atenuado mientras se arrastra: card.classList.add("dragging"). Quite la clase en el evento dragend para borrar los estilos tanto si la operación se completó correctamente como si se canceló con Escape.

De forma predeterminada, el navegador arrastra una instantánea translúcida del elemento de origen. Sustitúyala con e.dataTransfer.setDragImage(node, offsetX, offsetY): pase un elemento DOM oculto o una Image para mostrar una vista previa personalizada junto al cursor.

dragend se emite en el elemento de origen cuando termina el arrastre, tanto si se soltó correctamente como si se soltó en una zona no válida o se canceló. Úselo para la limpieza: quitar la clase de arrastre, ocultar las vistas previas fantasma y restaurar la opacidad.

Dentro de dragend, compruebe e.dataTransfer.dropEffect. Si el valor es "none", la operación de soltar no se produjo (la zona de destino la rechazó, el usuario pulsó Escape o soltó el elemento fuera de la página). De lo contrario, equivale al efecto que eligió la zona de destino ("move", "copy", "link").

La función nativa de arrastrar y soltar está diseñada principalmente para ordenadores de escritorio. En dispositivos táctiles, la API apenas funciona sin un polyfill o una alternativa basada en Pointer Events. Para interfaces de reordenación adaptadas a móviles, prefiera bibliotecas como SortableJS o dnd-kit, que abstraen ambos modelos de eventos.

La función nativa de arrastrar y soltar no es accesible mediante el teclado: los usuarios que solo utilizan el teclado no pueden reordenar elementos. Proporcione siempre una alternativa: controladores para las teclas de flecha, botones para subir o bajar elementos, o un diálogo de reordenación controlado mediante aria. Arrastrar y soltar debe mejorar la experiencia, no sustituirla.

La selección de texto dentro de elementos arrastrables puede interferir con el arrastre. Aplique CSS user-select: none y -webkit-user-drag: element al elemento de origen para que el navegador arrastre el elemento en lugar de seleccionar el texto que contiene.

¿Por qué debe asociar normalmente un listener de dragstart aunque el atributo draggable="true" por sí solo haga que un elemento se pueda arrastrar?

Marque los elementos de origen con draggable="true" y use dragstart para rellenar dataTransfer, establecer effectAllowed y, opcionalmente, una imagen de arrastre personalizada. Combínelo con dragend para limpiar los estilos. Proporcione alternativas de teclado por motivos de accesibilidad y considere usar polyfills para dispositivos táctiles.