Atributo draggable e evento dragstart

Qualquer elemento se torna uma origem de arrastamento quando você define draggable="true". Links e imagens podem ser arrastados por padrão; todos os outros elementos (divs, lis, spans) exigem o atributo explícito. draggable="false" impede que um elemento seja arrastado nativamente.

Quando o usuário começa a arrastar, o elemento de origem dispara o evento de início do arrastamento. É nesse momento que você inicializa o arrastamento: registre qual item está sendo movido, aplique um estilo opcionalmente e grave dados no objeto dataTransfer que o destino de soltura lerá.

Se você marcar um elemento como arrastável, mas nunca tratar o início do arrastamento, o navegador ainda arrastará uma imagem fantasma, mas nenhum dado será definido; por isso, a maioria dos destinos de soltura recusará a soltura. Sempre associe um atributo de arrastamento a um ouvinte de início do arrastamento que armazene pelo menos um identificador.

e.dataTransfer.effectAllowed = "move" no início do arrastamento restringe a operação: "copy", "move", "link", "copyMove", "all" ou "none". Isso controla o cursor exibido pelo navegador e o dropEffect que o destino poderá definir depois.

Adicione uma classe CSS à origem para que ela apareça esmaecida enquanto é arrastada: card.classList.add("dragging"). Remova a classe no evento de término do arrastamento para que o estilo seja limpo, independentemente de a soltura ter sido bem-sucedida ou cancelada com Esc.

Por padrão, o navegador arrasta uma captura translúcida da origem. Substitua-a por e.dataTransfer.setDragImage(node, offsetX, offsetY) — passe um elemento DOM oculto ou uma imagem para exibir uma prévia personalizada no cursor.

dragend é disparado na origem após a conclusão do arrastamento, seja quando a soltura ocorre com sucesso, em um destino inválido ou quando é cancelada. Use-o para a limpeza — remova a classe de arrastamento, oculte as prévias fantasmas e restaure a opacidade.

Dentro do evento de término do arrastamento, verifique e.dataTransfer.dropEffect. Se o valor for "none", a soltura não aconteceu (o destino a rejeitou, o usuário pressionou Esc ou soltou fora da página). Caso contrário, ele será igual ao efeito escolhido pelo destino de soltura ("move", "copy", "link").

O arrastamento e a soltura nativos priorizam computadores. Em dispositivos sensíveis ao toque, a API quase não funciona sem uma camada de compatibilidade ou uma substituição baseada em eventos de ponteiro. Para interfaces de reordenação compatíveis com dispositivos móveis, prefira bibliotecas como SortableJS ou dnd-kit, que abstraem os dois modelos de eventos.

O arrastamento e a soltura nativos não são acessíveis pelo teclado — usuários que usam apenas o teclado não conseguem reordenar itens. Sempre ofereça uma alternativa: manipuladores de teclas de seta, botões para mover para cima ou para baixo ou um diálogo de reordenação controlado por aria. O arrastamento e a soltura devem complementar, não substituir.

A seleção de texto dentro de elementos arrastáveis pode interferir no arrastamento. Aplique CSS user-select: none e -webkit-user-drag: element à origem para que o navegador arraste o elemento em vez de selecionar o texto dentro dele.

Por que geralmente é necessário associar um ouvinte de início do arrastamento, mesmo que o atributo draggable="true" sozinho torne um elemento arrastável?

Marque as origens com draggable="true" e use o início do arrastamento para preencher dataTransfer, definir effectAllowed e, opcionalmente, uma imagem de arrastamento personalizada. Combine-o com o término do arrastamento para limpar os estilos. Ofereça alternativas pelo teclado para garantir a acessibilidade e considere camadas de compatibilidade para dispositivos sensíveis ao toque.