JavaScript Academy · Aula

Alvos de soltura e dataTransfer

Aceite solturas e transfira dados.

Alvos de soltura e dataTransfer é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 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.

O que caracteriza um target de soltura?

Por padrão, os elementos rejeitam solturas. Para aceitar uma soltura, você precisa impedir o comportamento padrão em dragover e drop. Esse é o problema mais comum.

Permitindo uma soltura com arrastar sobre

O navegador bloqueia a soltura, a menos que você chame preventDefault() no manipulador de dragover. Sem isso, o evento de soltura nunca é disparado.

const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
  e.preventDefault(); // REQUIRED to allow drop
});

O evento de soltura

Quando o usuário solta o item sobre um destino válido, o evento de soltura é disparado. Impeça o comportamento padrão aqui também (isso impede que o navegador abra arquivos ou URLs soltos) e leia os dados.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  console.log("Dropped", id);
});

Lendo dataTransfer

getData(format) recupera o que foi armazenado em dragstart. A string de formato deve corresponder ao valor definido.

const payload = e.dataTransfer.getData("text/plain");

Movendo um elemento

Um uso clássico é anexar o nó arrastado à zona de soltura usando o identificador transferido.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  zone.appendChild(dragged);
});

Vários formatos de dados

dataTransfer pode conter vários formatos ao mesmo tempo — por exemplo, text/plain e application/json — e o destino lê aquele que entende.

e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));

Definindo dropEffect

Em dragover, defina dropEffect como "copy", "move" ou "link" para controlar o cursor e a semântica da operação.

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

effectAllowed versus dropEffect

effectAllowed (definido pela origem) declara o que é permitido; dropEffect (definido pelo destino) escolhe uma dessas opções. Eles trabalham juntos para exibir o cursor correto.

Reordenando uma lista

Combine a posição de soltura com a inserção para reordenar os itens. Determine se deve inserir antes ou depois do elemento sob o cursor.

list.addEventListener("drop", (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData("text/plain");
  const dragged = document.getElementById(id);
  list.insertBefore(dragged, e.target);
});

Identificando o destino da soltura

Use e.target (o elemento sob o ponteiro) e closest() para encontrar o contêiner relevante quando os destinos estão aninhados.

zone.addEventListener("drop", (e) => {
  const slot = e.target.closest(".slot");
  if (slot) slot.appendChild(getDragged(e));
});

Limpando dados

dataTransfer.clearData() esvazia os dados armazenados; passar um formato limpa apenas esse formato. De qualquer forma, o armazenamento é redefinido automaticamente após o arrasto.

e.dataTransfer.clearData("text/plain");

Verificação rápida

Teste os destinos de soltura.

Recapitulação: destinos de soltura e dataTransfer

Você criou zonas de soltura chamando preventDefault() em dragover e na soltura, leu a carga com getData, moveu e reordenou elementos, definiu dropEffect e tratou destinos aninhados. A seguir: retorno visual.

Perguntas Frequentes

A aula “Alvos de soltura e dataTransfer” é grátis?

Sim — o texto completo de “Alvos de soltura e dataTransfer” é 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 “Alvos de soltura e dataTransfer”?

Aceite solturas e transfira dados. 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 2 de 4.

Quanto tempo leva a aula “Alvos de soltura e dataTransfer”?

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