JavaScript Drag & Drop -Sortierung ist mit den Kontrollkästchen verknüpft: Wie kann das Sortieren von Reset nach den Kontrollkästchen vermieden werden?

JavaScript Drag & Drop -Sortierung und Kontrollkästchen Linkage: Wartung der Sortierstabilität

Dieser Artikel löst ein gemeinsames JavaScript -Entwicklungsproblem: So halten Sie die Reihenfolge der sortierten Tags unten unverändert, nachdem Sie das Kontrollkästchen über der Seite umgeschaltet haben.

Problembeschreibung: Das Programm kombiniert Checkbox Controls Label-Generierung und Drag-and-Drop-Sortierfunktionen von Etiketten. Wenn der Benutzer das Kontrollkästchen jedoch erneut sortiert und wechselt, geht das Sortierergebnis verloren.

Problemanalyse: Die Grundursache liegt im Datenaktualisierungsmechanismus. Beim Umschalten des Kontrollkästchens kann das Programm das Tag -Datenarray regenerieren und die vom Benutzer ermittelte Sortierung durch den Drag & Drop -Betrieb ignorieren. Wenn Sie einfach die map verwenden, wird dieses Problem nicht gelöst, da es nur die Daten ordnet und die Reihenfolge nicht ändert.

Lösung: Der Schlüssel besteht darin, die Sortierinformationen der Tags zu pflegen. Wir schlagen zwei Methoden vor:

Methode 1: Sortierfeld hinzufügen

1. Fügen Sie ein sort für jede Beschriftungsdaten hinzu, um den Sortierort aufzuzeichnen.
2. Aktualisieren Sie beim Ziehen und Sortieren den Wert des sort .
3. Sortieren Sie beim Schalten des Kontrollkästchens das Datenarray nach dem Feld sort , wodurch die vorherige Sortierung wiederhergestellt wird. Dies stellt sicher, dass die Daten unabhängig vom Betrieb nach sort Sortierfeld sortiert werden.

Methode 2: Verwenden Sie push und splice

1. Vermeiden Sie beim Schalten von Kontrollkästchen, vermeiden Sie das gesamte Array mit map .
2. Wenn das Kontrollkästchen ausgewählt ist, fügen Sie Beschriftungsdaten mithilfe push -Methode hinzu. Verwenden Sie beim Deaktivieren die splice , um Daten zu entfernen.
3. Stellen Sie im Hinzufügen und Entfernen sicher, sort die Beschriftungsreihenfolge korrekt widerspiegelt. Dieser Ansatz vermeidet die Datenrekonstruktion und bewahrt so die Sortierung.

Durch die oben genannten Methoden kann der durch das Kontrollkästchen verursachte Sortierreset effektiv verhindert werden und die erwarteten Funktionen können erreicht werden. Welche Methode zu wählen, hängt von der spezifischen Situation des Projekts und der Codestruktur ab. Methode 1 ist prägnanter und Methode 2 kann in einigen Fällen flexibler sein.

Das obige ist der detaillierte Inhalt vonJavaScript Drag & Drop -Sortierung ist mit den Kontrollkästchen verknüpft: Wie kann das Sortieren von Reset nach den Kontrollkästchen vermieden werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!