JavaScript Academy · Aula

Tornando elementos arrastáveis

Ative o arraste e trate eventos de arrastar.

Tornando elementos arrastáveis é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 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.

A API HTML de arrastar e soltar

A API nativa de arrastar e soltar permite que os usuários arrastem elementos e os soltem em outro local. Ela é orientada a eventos: os elementos de origem acionam eventos de arraste, e os targets de soltura acionam seus próprios eventos. Nenhuma biblioteca é necessária.

O atributo de arraste

Por padrão, apenas links e imagens podem ser arrastados. Adicione draggable="true" para tornar qualquer elemento arrastável.

<div draggable="true" id="card">Drag me</div>

Configurando o arraste em JS

Você pode alternar esse comportamento pelo script usando a propriedade draggable.

const card = document.getElementById("card");
card.draggable = true;

O evento de início do arraste

dragstart é acionado no momento em que um arraste começa. É nesse ponto que você registra o que está sendo arrastado.

card.addEventListener("dragstart", (e) => {
  console.log("Started dragging", card.id);
});

Transportando dados com dataTransfer

O evento expõe dataTransfer. Use setData(format, value) em dragstart para anexar uma carga útil que acompanhará o arraste.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

O evento de arraste

drag é acionado continuamente enquanto o elemento se move. Use-o com moderação — ele pode ser acionado muitas vezes por segundo.

card.addEventListener("drag", (e) => {
  // fires repeatedly during the drag
});

O evento de término do arraste

dragend é acionado quando o usuário solta o elemento, independentemente de a soltura ter sido bem-sucedida. Use-o para redefinir qualquer estilo aplicado à origem.

card.addEventListener("dragend", (e) => {
  card.classList.remove("dragging");
});

Marcando o elemento de origem

Um padrão comum é adicionar uma classe em dragstart e removê-la em dragend para escurecer ou destacar o item arrastado.

card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));

Efeitos permitidos

Defina effectAllowed em dragstart para declarar quais operações são válidas: "copy", "move", "link" ou combinações.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.effectAllowed = "move";
});

Ressalva sobre dispositivos sensíveis ao toque

A API nativa oferece suporte limitado ao toque em dispositivos móveis. Para aplicativos que priorizam o toque, considere os eventos de ponteiro ou uma biblioteca específica; a API nativa se destaca em computadores.

Desativando a seleção de texto

Arrastar pode selecionar texto acidentalmente. Uma pequena regra de CSS mantém os arrastes sem interferências.

/* CSS */
.draggable { user-select: none; }

Verificação rápida

Teste os fundamentos do arraste.

Recapitulação: tornando elementos arrastáveis

Você habilitou o arraste com draggable="true", tratou dragstart/drag/dragend, anexou uma carga útil com dataTransfer.setData, definiu effectAllowed e estilizou a origem. A seguir: targets de soltura.

Perguntas Frequentes

A aula “Tornando elementos arrastáveis” é grátis?

Sim — o texto completo de “Tornando elementos arrastáveis” é 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 “Tornando elementos arrastáveis”?

Ative o arraste e trate eventos de arrastar. 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 1 de 4.

Quanto tempo leva a aula “Tornando elementos arrastáveis”?

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