Lista prática com reordenação por arrastar
Crie uma lista reordenável com a API de arrastar e soltar.
Lista prática com reordenação por arrastar é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 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 HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Visão geral do padrão
Para criar uma lista que permita reordenar itens por arrasto, torne cada item arrastável, armazene o identificador do item arrastado em dataTransfer durante o início do arrasto e, ao soltar, insira o elemento arrastado antes ou depois do alvo. O DOM e o modelo permanecem sincronizados se a ordem for reconstruída a partir do DOM após cada soltura.
Marcação
Renderize uma lista simples na qual cada li contenha draggable="true" e um data-id. Manter os identificadores nos elementos significa que os manipuladores de arrasto não precisam consultar um armazenamento de estado separado para identificar os itens — o próprio elemento é a fonte de verdade.
<ul id="list">
<li draggable="true" data-id="1">Item 1</li>
<li draggable="true" data-id="2">Item 2</li>
<li draggable="true" data-id="3">Item 3</li>
</ul>Início do arrasto Registra a origem
No início do arrasto, armazene o identificador arrastado em dataTransfer e aplique uma classe "dragging" para fornecer retorno visual. effectAllowed="move" informa ao navegador que se trata de uma reordenação, e não de uma cópia, portanto o cursor e dropEffect refletem uma operação de movimentação.
list.addEventListener("dragstart", (e) => {
const li = e.target.closest("li");
if (!li) return;
e.dataTransfer.setData("text/plain", li.dataset.id);
e.dataTransfer.effectAllowed = "move";
li.classList.add("dragging");
});Arrasto sobre o alvo Permite a soltura
Escute na lista (delegação de eventos), chame preventDefault e defina dropEffect como "move". Utilize e.target.closest("li") para encontrar a linha sobre a qual o cursor está, de modo que o mesmo manipulador funcione para a lista inteira.
Calculando a posição de inserção
Para decidir se o item arrastado deve ficar acima ou abaixo da linha sob o cursor, compare a coordenada Y do cursor com o ponto médio vertical da linha: const before = (e.clientY - rect.top) < rect.height / 2. before=true significa inserir antes usando insertBefore; false significa inserir depois usando insertAfter.
function getInsertBefore(target, clientY) {
const rect = target.getBoundingClientRect();
return clientY < rect.top + rect.height / 2;
}Soltura Reordena o DOM
No manipulador de soltura, procure o elemento arrastado pelo identificador e a linha-alvo sob o cursor. Chame list.insertBefore(dragged, target) ou list.insertBefore(dragged, target.nextSibling), dependendo de qual metade do alvo estava sob o cursor.
Fim do arrasto Limpa os estilos
Independentemente de a soltura ter sido bem-sucedida ou de o usuário ter pressionado Escape, o fim do arrasto sempre ocorre na origem. Utilize-o para remover a classe "dragging" e quaisquer destaques do alvo da soltura, fazendo a lista voltar ao estado inativo.
list.addEventListener("dragend", () => {
list.querySelectorAll(".dragging, .over").forEach((el) => {
el.classList.remove("dragging", "over");
});
});Indicador visual de soltura
Mostre uma linha fina no local onde o item ficará usando um pseudo-elemento CSS na linha sob o cursor, ativado pelas classes "over-top" ou "over-bottom" que o manipulador de arrasto sobre o alvo define com base na posição do cursor. O usuário vê o ponto de inserção antes de soltar o item.
Sincronizando o modelo
Após a soltura, derive a nova ordem a partir do DOM: const order = Array.from(list.children).map((li) => li.dataset.id). Envie essa matriz ao servidor ou armazene-a no estado — nunca tente manter um índice paralelo ao DOM, pois ele fica desatualizado durante arrastos rápidos.
Alternativa pelo teclado
Adicione manipuladores para Para cima/Para baixo que movam o item em foco usando insertBefore. Anuncie a movimentação por meio de uma região aria-live ("Item movido para cima, para a posição 2"). Usuários do teclado obtêm a mesma capacidade sem precisar realizar o arrasto visual, o que é essencial para a acessibilidade.
Alternativa compatível com toque
Em dispositivos móveis, substitua o arrasto nativo por Eventos de ponteiro: em pointerdown, capture a linha; em pointermove, mova-a usando a propriedade transform do CSS; em pointerup, faça o teste de colisão com a linha subjacente e reordene-a. Bibliotecas como SortableJS encapsulam esse padrão para diferentes tipos de entrada.
Verificação de conhecimento
Por que calculamos a posição de inserção a partir da posição do cursor em relação ao ponto médio vertical da linha sob o cursor?
Resumo
Uma lista robusta de reordenação combina draggable="true" + dragstart (registrar o identificador, effectAllowed=move) + dragover (preventDefault + posição do indicador) + drop (insertBefore no espaço derivado do ponto médio) + dragend (limpeza). Sempre derive a nova ordem a partir do DOM após a soltura e ofereça uma alternativa pelo teclado para garantir a acessibilidade.
Perguntas Frequentes
A aula “Lista prática com reordenação por arrastar” é grátis?
Sim — o texto completo de “Lista prática com reordenação por arrastar” é 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 HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Lista prática com reordenação por arrastar”?
Crie uma lista reordenável com a API de arrastar e soltar. Você pratica HTML 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 HTML Academy?
Nenhuma experiência prévia é necessária. HTML 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 4 de 4.
Quanto tempo leva a aula “Lista prática com reordenação por arrastar”?
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 HTML Academy?
Sim. Cada aula de HTML 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
- Atributo draggable e evento dragstart
- Eventos dragover e drop
- Objeto dataTransfer
- Lista prática com reordenação por arrastar