JavaScript Academy · Aula

Feedback visual durante o arraste

Estilize elementos durante operações de arraste.

Feedback visual durante o arraste é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Por que o retorno visual é importante

Um bom recurso de arrastar e soltar informa ao usuário o que está acontecendo: qual item está sendo movido, onde ele pode ser colocado e se a soltura é válida. Sem esse retorno, a interação parece estar com defeito.

Aplicando estilo ao item arrastado

Reduza a opacidade ou aplique uma escala à origem em dragstart para que o usuário veja o que selecionou.

item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));

O evento de entrada do arrasto

dragenter é disparado quando o item arrastado entra em um possível destino. Use-o para destacar a zona.

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  zone.classList.add("drag-over");
});

O evento de saída do arrasto

dragleave é disparado quando o item sai do destino. Remova o destaque aqui.

zone.addEventListener("dragleave", () => {
  zone.classList.remove("drag-over");
});

O problema da oscilação

dragenter/dragleave também são disparados para elementos filhos, causando oscilação. Um contador ou uma verificação de relatedTarget mantém o destaque estável.

let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });

Redefinindo ao soltar

Sempre limpe o estado de destaque no manipulador de soltura, pois dragleave pode não ser disparado quando a soltura é concluída com sucesso.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  depth = 0;
  zone.classList.remove("drag-over");
});

Personalizando a imagem de arrasto

setDragImage(element, offsetX, offsetY) em dragstart substitui o fantasma padrão por qualquer elemento.

item.addEventListener("dragstart", (e) => {
  const ghost = document.getElementById("custom-ghost");
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

Cursor por meio de dropEffect

O cursor (sinal de mais para copiar, seta para mover, símbolo de soltura não permitida) é controlado por dropEffect, definido em dragover. Rejeite solturas inválidas com "none".

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});

Exibindo um marcador de soltura

Em listas ordenáveis, insira um elemento marcador na posição de soltura prevista para que os usuários vejam exatamente onde o item será colocado.

function showPlaceholder(beforeEl) {
  list.insertBefore(placeholder, beforeEl);
}

Calculando a posição de inserção

Compare a coordenada Y do ponteiro com o ponto médio vertical de cada item para decidir se a soltura deve ocorrer antes ou depois dele.

function getAfterElement(container, y) {
  const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
  return items.find((el) => {
    const box = el.getBoundingClientRect();
    return y < box.top + box.height / 2;
  });
}

Retorno acessível

Indicações visuais sozinhas excluem usuários de teclado e leitores de tela. Combine arrastar e soltar com anúncios dinâmicos ARIA e uma alternativa de teclado para garantir a acessibilidade.

Verificação rápida

Teste o retorno visual.

Recapitulação: retorno visual

Você aplicou estilo ao item arrastado, destacou zonas com dragenter/dragleave, resolveu a oscilação com um contador de profundidade, personalizou a imagem de arrasto, controlou o cursor por meio de dropEffect e exibiu marcadores de soltura. A seguir: arrastar arquivos para dentro.

Perguntas Frequentes

A aula “Feedback visual durante o arraste” é grátis?

Sim — o texto completo de “Feedback visual durante o arraste” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Feedback visual durante o arraste”?

Estilize elementos durante operações de arraste. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Feedback visual durante o arraste”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy