Le tri et dépôt JavaScript sont liés aux cases: comment éviter de trier réinitialiser une fois que les cases à cocher sont commutées?

Javascript glisser et dépose le tri et cocher la liaison de la case: maintien de la stabilité du tri

Cet article résout un problème de développement JavaScript commun: comment garder l'ordre des balises triées ci-dessous inchangées après avoir basculé de la case au-dessus de la page.

Description du problème: Le programme combine les contrôles à cocher les contrôles de génération d'étiquettes et les fonctions de tri des étiquettes de glisser-déposer des étiquettes. Cependant, lorsque l'utilisateur trie et change à nouveau la case, le résultat de tri sera perdu.

Analyse des problèmes: la cause profonde réside dans le mécanisme de mise à jour des données. Lors du changement de case, le programme peut régénérer le tableau des données de balise, en ignorant le tri déterminé par l'utilisateur via l'opération de glisser-déposer. L'utilisation de la méthode map ne résout pas ce problème car il ne fait que cartographie les données et ne modifie pas l'ordre.

Solution: La clé consiste à maintenir les informations de tri des balises. Nous proposons deux méthodes:

Méthode 1: Ajouter un champ de tri

1. Ajoutez un champ sort pour chaque données d'étiquette pour enregistrer l'emplacement de tri.
2. Lorsque vous faites glisser et triage, mettez à jour la valeur du champ sort .
3. Lorsque vous changez la case, triez le tableau de données en fonction du champ sort , restaurant ainsi le type précédent. Cela garantit que les données sont triées par sort quelle que soit l'opération.

Méthode 2: Utilisez des opérations push et splice

1. Lorsque vous changez de cases, évitez de régénérer le tableau entier avec map .
2. Lorsque la case est sélectionnée, ajoutez des données d'étiquette à l'aide de la méthode push ; Une fois non contrôlé, utilisez la méthode splice pour supprimer les données.
3. Dans les opérations d'ajout et de suppression, assurez-vous que sort reflète correctement l'ordre d'étiquette. Cette approche évite la reconstruction des données, préservant ainsi le tri.

Grâce aux méthodes ci-dessus, la réinitialisation du tri causée par la commutation à cocher peut être effectivement empêchée et les fonctions attendues peuvent être obtenues. La méthode à choisir dépend de la situation spécifique du projet et de la structure du code. La méthode 1 est plus concise et la méthode 2 peut être plus flexible dans certains cas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!