Guia de Ordenação em JavaScript: Arrays, Tabelas e Arrastar e Soltar com SortableJS

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

A funcionalidade de ordenação baseada em JavaScript é extremamente útil para gerenciar dinamicamente dados em tabelas e listas.
Neste artigo, explicamos de forma abrangente tudo, desde os recursos nativos de ordenação do JavaScript até implementações intuitivas de arrastar e soltar.

Ao ler este artigo, você será capaz de:

• Entender como ordenar arrays usando os recursos padrão do JavaScript.
• Implementar funcionalidade de ordenação para tabelas e listas HTML.
• Implementar ordenação por arrastar e soltar usando o SortableJS.
• Adquirir habilidades práticas aplicáveis a projetos reais por meio de exemplos e casos de uso.

Percorreremos cada tópico passo a passo, portanto, acompanhe e tente implementar os exemplos por conta própria.

2. Entendendo os Recursos Nativos de Ordenação do JavaScript

2.1 Métodos Básicos de Ordenação

No JavaScript, você pode ordenar facilmente dados de arrays usando a funcionalidade de ordenação incorporada.
Esta seção explica tudo, desde o uso básico até exemplos avançados, completos com amostras de código.

Exemplo de Ordenação de Strings

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

Exemplo de Ordenação Numérica

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

Ao ordenar números, é importante usar uma função de comparação.
Sem ela, os valores são ordenados lexicograficamente (como strings), o que pode levar a resultados inesperados.

2.2 Exemplos Avançados Usando Funções de Comparação Personalizadas

Ao ordenar arrays de objetos, você pode ordenar com base em uma propriedade específica.

Exemplo de Ordenação de Array de Objetos

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

Como mostrado acima, usar uma função de comparação permite implementar lógica de ordenação altamente personalizada.

2.3 Dicas de Otimização de Desempenho

Ao trabalhar com grandes conjuntos de dados, considere os seguintes pontos:

1. Otimizar funções de comparação

• Evitar cálculos pesados dentro das funções de comparação.

1. Reduzir a quantidade de dados a serem ordenados

• Filtrar dados desnecessários antes de executar a ordenação.

1. Usar Web Workers

• Executar operações de ordenação em segundo plano para melhorar o desempenho geral.

3. Exemplo de Implementação: Ordenando uma Tabela HTML

3.1 Funcionalidade Básica de Ordenação de Tabela

Aqui, implementaremos um recurso em JavaScript que ordena os dados de uma tabela HTML ao clicar no cabeçalho de uma coluna.

Código HTML

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

Código JavaScript

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

Esta é uma implementação simples que permite ordenar cada coluna apenas clicando.

3.2 Exemplo Avançado Combinado com Filtragem

Ao combinar ordenação com filtragem, você também pode ordenar resultados de busca em tempo real.

Exemplo de Código JavaScript

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

Isso habilita um recurso onde os usuários podem pesquisar e ordenar os dados ao mesmo tempo.

4. Ordenação por Arrastar e Soltar com SortableJS

4.1 O que é SortableJS?

SortableJS é uma biblioteca JavaScript que facilita a implementação de reordenação por arrastar e soltar para elementos HTML.
Ela possui os seguintes recursos:

• Interações intuitivas de arrastar e soltar .
• Altamente personalizável, e pode ser aplicada a listas e tabelas.
• Compatível com dispositivos móveis, suportando operações baseadas em toque.
• Leve e sem dependências, proporcionando excelente desempenho.

4.2 Instalação e Configuração Básica do SortableJS

4.2.1 Etapas de Instalação

Usando um CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

Usando npm (para um ambiente Node.js)

npm install sortablejs

4.2.2 Configuração Básica

Usando o código HTML e JavaScript a seguir, você pode implementar a ordenação por arrastar e soltar.

Código HTML

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Código JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (Opcional)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 Exemplo Avançado: Arrastar e Soltar Entre Múltiplas Listas

Código HTML

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

Código JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. Tabela Comparativa: Bibliotecas de Terceiros vs Implementação Nativa

5.1 Tabela Comparativa

5.2 Quando a Implementação Nativa é a Melhor Escolha

Vantagens

1. Sem dependências, portanto nenhuma biblioteca externa é necessária.
2. Rápida de implementar com código curto, ideal para recursos de ordenação simples .
3. Alto desempenho, adequado mesmo para grandes conjuntos de dados.

Desvantagens

• Sem suporte a arrastar e soltar, exigindo trabalho adicional para interação visual.
• Personalização avançada ou suporte a múltiplas listas requer implementação extra ou bibliotecas .

Casos de Uso

• Quando você precisa ordenar tabelas HTML estáticas ou arrays .
• Projetos que priorizam desempenho e funcionalidade mínima.

5.3 Quando o SortableJS é a Melhor Escolha

Vantagens

1. Arrastar e soltar embutido para interação visual intuitiva.
2. Suporta movimento entre múltiplas listas e sincronização com o servidor .
3. Pronto para dispositivos móveis por padrão, incluindo suporte a toque.
4. Altamente personalizável e bem adequado para ambientes de produção.

Desvantagens

• Requer a adição de uma biblioteca, aumentando ligeiramente o tamanho do projeto.
• A complexidade do código pode aumentar, resultando em um custo de aprendizado maior .
• Potenciais problemas de dependência ou configuração em certos ambientes.

Casos de Uso

• Quando você precisa de listas dinâmicas ou funcionalidade de arrastar e soltar .
• Designs de UI que requerem mover itens entre múltiplas listas ou salvar a ordem em tempo real .

6. Dicas de Implementação e Solução de Problemas

6.1 Otimização de Desempenho

1. Manipulação de Grandes Conjuntos de Dados

Ordenar grandes conjuntos de dados pode levar à degradação de desempenho.

Soluções

• Use rolagem virtual

  const visibleItems = items.slice(startIndex, endIndex);
  renderItems(visibleItems);
  

• Aproveite o processamento assíncrono Execute a lógica de ordenação em Web Workers para manter a UI responsiva.

2. Minimize Operações no DOM

Ordenar frequentemente envolve manipulação frequente do DOM, portanto reduzir reflows desnecessários é crítico.

Solução

• Use DocumentFragment

  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
  

6.2 Melhorando Acessibilidade e Usabilidade

1. Suporte à Navegação por Teclado

Forneça alternativas de teclado para usuários que não podem usar arrastar e soltar.

Solução

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. Aprimoramentos de Feedback Visual

Adicione indicações visuais para indicar claramente as ações de ordenação.

Exemplo de CSS

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 Guia de Tratamento de Erros e Depuração

1. Erro: Ordenação Não Funciona

Causa 1: Seletor incorreto

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

Causa 2: Conflitos de eventos

list.removeEventListener('click', handler);

6.4 Lista de Verificação de Solução de Problemas

1. Verifique erros de JavaScript no console

• Use a aba Console das ferramentas de desenvolvedor para identificar problemas.

1. Verifique os formatos de dados

• Valide as estruturas de dados usadas na ordenação e na comunicação com o servidor.

1. Confirme as versões das bibliotecas

• Garanta que todas as bibliotecas e dependências estejam atualizadas.

7. Perguntas Frequentes (FAQ)

Q1: Por que o recurso de ordenação de tabelas não funciona?

A1: Por favor, verifique os seguintes pontos.

1. Seletor incorreto

   const table = document.getElementById("data-table");
   

2. Distinguindo entre números e strings

   rows.sort((a, b) => Number(a) - Number(b));
   

3. Conflitos de eventos Outros códigos JavaScript ou plugins podem estar anexando eventos aos mesmos elementos.

Q2: Arrastar e soltar não responde. O que devo fazer?

A2: Verifique os seguintes itens.

1. Confirme que o SortableJS está carregado

   console.log(Sortable);
   

2. Verifique a estrutura HTML

   <ul id="sortable-list">
     <li>Item 1</li>
   </ul>
   

3. Verifique as configurações de suporte móvel

   new Sortable(list, {
     touchStartThreshold: 5
   });
   

4. Configuração de grupo incorreta

   group: "shared"
   

Q3: Como posso salvar a ordem ordenada no servidor?

A3: A sincronização com o servidor pode ser facilmente implementada usando AJAX.

Exemplo de JavaScript

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

Q4: Como posso melhorar o desempenho?

A4: Considere as seguintes abordagens.

1. Use rolagem virtual

   const visibleItems = items.slice(startIndex, endIndex);
   renderItems(visibleItems);
   

2. Use Web Workers Processar dados em segundo plano para melhorar a responsividade da UI.
3. Otimize a lógica de ordenação

   rows.sort((a, b) => a - b);
   

Q5: A ordenação pode ser combinada com recursos adicionais?

A5: Sim, pode ser facilmente estendido como mostrado abaixo.

1. Combinar com filtragem em tempo real

   document.getElementById("search").addEventListener("input", (e) => {
     const value = e.target.value.toLowerCase();
     document.querySelectorAll("#sortable-list li").forEach(item => {
       item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
     });
   });
   

2. Adicionar e remover itens dinamicamente

   function addItem(text) {
     const list = document.getElementById("sortable-list");
     const li = document.createElement("li");
     li.textContent = text;
     list.appendChild(li);
   }
   
   function removeItem(index) {
     const list = document.getElementById("sortable-list");
     list.removeChild(list.children[index]);
   }
   

8. Conclusão

8.1 Recapitulação do Artigo

1. Ordenação Nativa em JavaScript

• Aprendeu técnicas básicas de ordenação usando Array.prototype.sort() .
• Cobriu a ordenação de arrays de objetos com funções de comparação e estratégias de otimização de desempenho.

2. Ordenação de Tabelas HTML

• Introduziu exemplos práticos para ordenar dados de tabelas por coluna.
• Explorou casos avançados combinados com funcionalidade de filtragem.

3. Arrastar e Soltar com SortableJS

• Implementou ordenação intuitiva por arrastar e soltar usando SortableJS.
• Aprendeu abordagens flexíveis, incluindo movimentação de múltiplas listas e sincronização com servidor.

4. Comparação Nativo vs SortableJS

• Comparou pontos fortes e casos de uso para ajudar a escolher a melhor abordagem para cada projeto.

5. Solução de Problemas e FAQ

• Forneceu soluções para problemas comuns e dicas para melhorar desempenho e confiabilidade.

8.2 Próximos Passos Práticos

A funcionalidade de ordenação é um componente chave para melhorar UIs dinâmicas e gerenciamento de dados.
Mantenha os seguintes pontos em mente ao avançar.

1. Comece com implementações simples, depois explore casos avançados
2. Experimente personalizar o código
3. Domine técnicas de tratamento de erros e depuração
4. Melhore continuamente desempenho e usabilidade

8.3 Tome Ação

1. Tente implementá-lo você mesmo!

• Aplique os exemplos de código deste artigo em seus próprios projetos e teste-os na prática.
• Compartilhar seu código-fonte no GitHub e trocar feedback com outros desenvolvedores também é recomendado.

2. Continue aprimorando suas habilidades!

• Se quiser aprender mais sobre recursos de ordenação, consulte os seguintes recursos oficiais:
• Documentação Oficial do SortableJS
• MDN Web Docs – Array.sort()

3. Verifique artigos relacionados

• Também recomendamos artigos sobre “Implementando Filtragem em JavaScript” e “Fundamentos da Manipulação do DOM” .

8.4 Considerações Finais

A funcionalidade de ordenação é essencial para organizar dados e melhorar a experiência do usuário.
Use as técnicas apresentadas neste artigo para aprimorar seus projetos.

Se você tiver dúvidas sobre implementar novos recursos ou estender esses exemplos,
sinta-se à vontade para entrar em contato através da seção de comentários ou do formulário de contato.

O próximo passo está em suas mãos—comece a experimentar o código hoje!