JavaScript‑Sortierleitfaden: Arrays, Tabellen und Drag‑&‑Drop mit SortableJS

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

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

1. Einführung

JavaScript-basierte Sortierfunktionalität ist äußerst nützlich, um Daten in Tabellen und Listen dynamisch zu verwalten.
In diesem Artikel erklären wir umfassend alles von den nativen Sortierfunktionen von JavaScript bis hin zu intuitiven Drag-and-Drop‑Sortierimplementierungen.

Durch das Lesen dieses Artikels werden Sie in der Lage sein:

• Zu verstehen, wie man Arrays mit den Standardfunktionen von JavaScript sortiert.
• Sortierfunktionalität für HTML‑Tabellen und Listen zu implementieren.
• Drag-and-Drop‑Sortierung mit SortableJS zu implementieren.
• Praktische Fähigkeiten zu erwerben, die in realen Projekten durch Beispiele und Anwendungsfälle anwendbar sind.

Wir gehen jedes Thema Schritt für Schritt durch, also folgen Sie bitte und versuchen Sie, die Beispiele selbst zu implementieren.

2. Verständnis der nativen Sortierfunktionen von JavaScript

2.1 Grundlegende Sortiermethoden

In JavaScript können Sie Array‑Daten ganz einfach mit der eingebauten Sortierfunktion sortieren.
Dieser Abschnitt erklärt alles von der Grundnutzung bis zu fortgeschrittenen Beispielen, inklusive Code‑Beispielen.

Beispiel für String‑Sortierung

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

Beispiel für numerische Sortierung

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]

Beim Sortieren von Zahlen ist es wichtig, eine Vergleichsfunktion zu verwenden.
Ohne diese werden Werte lexikografisch (als Zeichenketten) sortiert, was zu unerwarteten Ergebnissen führen kann.

2.2 Fortgeschrittene Beispiele mit benutzerdefinierten Vergleichsfunktionen

Beim Sortieren von Objekt‑Arrays können Sie nach einer bestimmten Eigenschaft sortieren.

Beispiel für Objekt‑Array‑Sortierung

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 }
]
*/

Wie oben gezeigt, ermöglicht die Verwendung einer Vergleichsfunktion die Implementierung stark angepasster Sortierlogik.

2.3 Tipps zur Leistungsoptimierung

Bei der Arbeit mit großen Datensätzen sollten Sie die folgenden Punkte berücksichtigen:

1. Vergleichsfunktionen optimieren

• Vermeiden Sie aufwändige Berechnungen innerhalb von Vergleichsfunktionen.

1. Die zu sortierende Datenmenge reduzieren

• Filtern Sie unnötige Daten heraus, bevor Sie die Sortierung durchführen.

1. Web‑Workers verwenden

• Führen Sie Sortieroperationen im Hintergrund aus, um die Gesamtleistung zu verbessern.

3. Implementierungsbeispiel: Sortieren einer HTML‑Tabelle

3.1 Grundlegende Tabellensortierfunktionalität

Hier implementieren wir eine Funktion in JavaScript, die Tabellendaten einer HTML‑Tabelle durch Klicken auf einen Spaltenkopf sortiert.

HTML‑Code

<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>

JavaScript‑Code

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));
}

Dies ist eine einfache Implementierung, die es ermöglicht, jede Spalte durch Klicken zu sortieren.

3.2 Fortgeschrittenes Beispiel kombiniert mit Filterung

Durch die Kombination von Sortierung und Filterung können Sie Suchergebnisse in Echtzeit sortieren.

JavaScript‑Code‑Beispiel

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";
  });
});

Dies ermöglicht eine Funktion, bei der Benutzer die Daten gleichzeitig durchsuchen und sortieren können.

4. Drag-and-Drop-Sortierung mit SortableJS

4.1 Was ist SortableJS?

SortableJS ist eine JavaScript-Bibliothek, die es einfach macht, Drag-and-Drop-Neusortierungen für HTML-Elemente zu implementieren.
Sie hat die folgenden Funktionen:

• Intuitive Drag-and-Drop-Interaktionen .
• Hochgradig anpassbar, und kann auf Listen und Tabellen angewendet werden.
• Mobilfreundlich, unterstützt Touch-basierte Operationen.
• Leichtgewichtig ohne Abhängigkeiten, bietet hervorragende Leistung.

4.2 Installation und Grundkonfiguration für SortableJS

4.2.1 Installationsschritte

Verwendung eines CDN

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

Verwendung von npm (für eine Node.js-Umgebung)

npm install sortablejs

4.2.2 Grundkonfiguration

Mit dem folgenden HTML- und JavaScript-Code können Sie Drag-and-Drop-Sortierung implementieren.

HTML-Code

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

JavaScript-Code

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 (optional)

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

4.3 Fortgeschrittenes Beispiel: Drag-and-Drop zwischen mehreren Listen

HTML-Code

<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>

JavaScript-Code

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. Vergleichstabelle: Drittanbieter-Bibliotheken vs native Implementierung

5.1 Vergleichstabelle

5.2 Wann native Implementierung die beste Wahl ist

Vorteile

1. Keine Abhängigkeiten, sodass keine externen Bibliotheken erforderlich sind.
2. Schnell zu implementieren mit kurzem Code, ideal für einfache Sortierfunktionen .
3. Hohe Leistung, geeignet selbst für große Datensätze.

Nachteile

• Keine Drag-and-Drop-Unterstützung, erfordert zusätzlichen Aufwand für visuelle Interaktion.
• Erweiterte Anpassungen oder Multi-Listen-Unterstützung erfordern zusätzliche Implementierung oder Bibliotheken .

Anwendungsfälle

• Wenn Sie statische HTML-Tabellen oder Arrays sortieren müssen .
• Projekte, die Leistung und minimale Funktionalität priorisieren.

5.3 Wann SortableJS die beste Wahl ist

Vorteile

1. Integriertes Drag-and-Drop für intuitive visuelle Interaktion.
2. Unterstützt Mehrfachlistenbewegung und Serversynchronisation .
3. Standardmäßig mobilfähig, inklusive Touch-Unterstützung.
4. Hochgradig anpassbar und gut geeignet für Produktionsumgebungen.

Nachteile

• Erfordert das Hinzufügen einer Bibliothek, was die Projektgröße leicht erhöht.
• Die Codekomplexität kann zunehmen, was zu höheren Lernkosten führt.
• Mögliche Abhängigkeits- oder Konfigurationsprobleme in bestimmten Umgebungen.

Anwendungsfälle

• Wenn Sie dynamische Listen oder Drag-and-Drop-Funktionalität benötigen .
• UI-Designs, die Verschieben von Elementen zwischen mehreren Listen oder Speichern der Reihenfolge in Echtzeit erfordern.

6. Implementierungstipps und Fehlersuche

6.1 Leistungsoptimierung

1. Umgang mit großen Datensätzen

Das Sortieren großer Datensätze kann zu Leistungseinbußen führen.

Lösungen

• Virtuelles Scrollen verwenden

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

• Asynchrone Verarbeitung nutzen Führen Sie die Sortierlogik in Web‑Workers aus, um die UI reaktionsfähig zu halten.

2. DOM-Operationen minimieren

Das Sortieren beinhaltet häufig häufige DOM-Manipulationen, daher ist die Reduzierung unnötiger Reflows entscheidend.

Lösung

• DocumentFragment verwenden

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

6.2 Verbesserung von Barrierefreiheit und Benutzerfreundlichkeit

1. Unterstützung der Tastaturnavigation

Bieten Sie Tastaturalternativen für Benutzer an, die Drag‑and‑Drop nicht verwenden können.

Lösung

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

2. Verbesserungen des visuellen Feedbacks

Fügen Sie visuelle Hinweise hinzu, um Sortieraktionen deutlich zu kennzeichnen.

CSS‑Beispiel

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

6.3 Leitfaden zur Fehlerbehandlung und Fehlersuche

1. Fehler: Sortieren funktioniert nicht

Ursache 1: Falscher Selektor

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

Ursache 2: Ereigniskonflikte

list.removeEventListener('click', handler);

6.4 Checkliste zur Fehlersuche

1. JavaScript-Fehler in der Konsole prüfen

• Verwenden Sie den Console‑Tab der Entwicklerwerkzeuge, um Probleme zu identifizieren.

1. Datenformate überprüfen

• Validieren Sie die Datenstrukturen, die beim Sortieren und bei der Serverkommunikation verwendet werden.

1. Bibliotheksversionen bestätigen

• Stellen Sie sicher, dass alle Bibliotheken und Abhängigkeiten auf dem neuesten Stand sind.

7. Häufig gestellte Fragen (FAQ)

F1: Warum funktioniert die Tabellensortierfunktion nicht?

A1: Bitte prüfen Sie die folgenden Punkte.

1. Falscher Selektor

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

2. Unterscheidung zwischen Zahlen und Zeichenketten

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

3. Ereigniskonflikte Andere JavaScript‑Codes oder Plugins können Ereignisse an denselben Elementen anhängen.

F2: Drag‑and‑Drop reagiert nicht. Was soll ich tun?

A2: Prüfen Sie die folgenden Punkte.

1. Bestätigen Sie, dass SortableJS geladen ist

   console.log(Sortable);
   

2. Überprüfen Sie die HTML‑Struktur

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

3. Mobile‑Unterstützungseinstellungen prüfen

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

4. Falsche Gruppen­konfiguration

   group: "shared"
   

F3: Wie kann ich die sortierte Reihenfolge auf dem Server speichern?

A3: Die Serversynchronisation kann einfach mit AJAX implementiert werden.

JavaScript‑Beispiel

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));
  }
});

F4: Wie kann ich die Leistung verbessern?

A4: Berücksichtigen Sie die folgenden Ansätze.

1. Virtuelles Scrollen verwenden

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

2. Web‑Workers verwenden Daten im Hintergrund verarbeiten, um die UI‑Reaktionsfähigkeit zu verbessern.
3. Sortierlogik optimieren

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

F5: Kann das Sortieren mit zusätzlichen Funktionen kombiniert werden?

A5: Ja, es kann leicht erweitert werden, wie unten gezeigt.

1. Kombinieren mit Echtzeit-Filterung

   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. Elemente dynamisch hinzufügen und entfernen

   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. Fazit

8.1 Artikel‑Zusammenfassung

1. JavaScript‑Native‑Sortierung

• Grundlegende Sortiertechniken mit Array.prototype.sort() erlernt.
• Sortierung von Objekt‑Arrays mit Vergleichsfunktionen und Optimierungsstrategien behandelt.

2. HTML‑Tabellensortierung

• Praktische Beispiele für das Sortieren von Tabellendaten nach Spalten vorgestellt.
• Fortgeschrittene Anwendungsfälle in Kombination mit Filterfunktionen untersucht.

3. Drag‑and‑Drop mit SortableJS

• Intuitives Drag‑and‑Drop‑Sorting mit SortableJS implementiert.
• Flexible Ansätze, einschließlich Mehrfachlisten‑Bewegung und Serversynchronisation, erlernt.

4. Native vs. SortableJS‑Vergleich

• Stärken und Anwendungsfälle verglichen, um die beste Lösung für jedes Projekt zu wählen.

5. Fehlersuche und FAQ

• Lösungen für häufige Probleme sowie Tipps zur Leistungs‑ und Zuverlässigkeitssteigerung bereitgestellt.

8.2 Praktische nächste Schritte

Sortier‑Funktionalität ist ein Schlüssel­element zur Verbesserung dynamischer UI‑Komponenten und Datenverwaltung.
Behalten Sie die folgenden Punkte im Hinterkopf, wenn Sie weiterarbeiten.

1. Mit einfachen Implementierungen beginnen, dann fortgeschrittene Anwendungsfälle erkunden
2. Mit der Anpassung des Codes experimentieren
3. Fehlerbehandlung und Debugging‑Techniken meistern
4. Leistung und Benutzerfreundlichkeit kontinuierlich verbessern

8.3 Handeln Sie jetzt

1. Versuchen Sie es selbst zu implementieren!

• Wenden Sie die Code‑Beispiele aus diesem Artikel in Ihren eigenen Projekten an und testen Sie sie praktisch.
• Das Veröffentlichen Ihres Quellcodes auf GitHub und der Austausch von Feedback mit anderen Entwicklern wird ebenfalls empfohlen.

2. Verbessern Sie kontinuierlich Ihre Fähigkeiten!

• Wenn Sie mehr über Sortier‑Features lernen möchten, nutzen Sie die folgenden offiziellen Ressourcen:
• SortableJS Official Documentation
• MDN Web Docs – Array.sort()

3. Verwandte Artikel prüfen

• Wir empfehlen außerdem Artikel zu „Implementierung von JavaScript‑Filtern“ und „Grundlagen der DOM‑Manipulation“.

8.4 Abschließende Gedanken

Sortier‑Funktionalität ist essenziell, um Daten zu organisieren und die Benutzererfahrung zu verbessern.
Nutzen Sie die in diesem Artikel vorgestellten Techniken, um Ihre Projekte zu optimieren.

Wenn Sie Fragen zur Implementierung neuer Features oder zur Erweiterung dieser Beispiele haben,
zögern Sie nicht, über den Kommentarbereich oder das Kontaktformular Kontakt aufzunehmen.

Der nächste Schritt liegt in Ihren Händen – beginnen Sie noch heute, mit dem Code zu experimentieren!