jQuery Girl
  1. jQuery Girl
  3. Créer une ligne de tableau pour animer un mouvement ascendant dans une interface utilisateur sortingable
Intereting Posts
Changer la couleur de fond de la page avec chaque route en utilisant ReactJS et React Router? Vérifiez le premier bouton radio avec JQuery Comment faire une div contenteditable et draggable Le wrapping des éléments de contenu provoque le déclenchement des scripts intégrés Pourquoi les modifications apscopes à jQuery $ .fn.data () ne mettent-elles pas à jour les atsortingbuts HTML 5 data- * correspondants? détecter le support de transition css avec modernizr Obtenir un élément html DOM à partir d’un élément JQuery La gem jquery-datatables-rails ne s’affiche pas correctement tant que la page n’est pas actualisée Comment modifier une variable globale dans une fonction JQuery $ .each? Élément de menu de deuxième niveau utilisant ul li ne fonctionnant pas Groovy / grails comment appeler une méthode de contrôleur depuis view en utilisant jquery Index d’élément jQuery Utilisation de variables globales entre plusieurs fonctions dans JQuery? Formules de type tableur sur le DOM Définition de la valeur des entrées de date sur iPad

Créer une ligne de tableau pour animer un mouvement ascendant dans une interface utilisateur sortingable

J’utilise l’interface utilisateur jQuery de Sortable pour permettre aux utilisateurs de faire glisser et de supprimer les lignes d’un tableau. Cela permet aux utilisateurs de classer les éléments dans un tableau en fonction de leurs préférences. Une fois que l’utilisateur a fini de commander sa liste, il appuie sur un bouton de sauvegarde qui exécute un appel Ajax. Le nouveau classement est enregistré dans la firebase database et le tableau est brièvement mis en évidence.

J’ai maintenant ajouté un bouton supplémentaire qui enverra un élément directement en haut de la liste. C’est aussi ajax. Cela fonctionne très bien sauf que je voudrais append un effet de transition dans lequel le

va se détacher, se glisser vers le haut de la table et abaisser les lignes suivantes. Est-ce possible? Voici le code que j’utilise:

Ce code gère l’appel à enregistrer les modifications apscopes à la firebase database à partir de la fonctionnalité “glisser-déposer”: 

  $(document).ready(function(){ $("#sortable").sortable(); $("#saveButton").click(persist); }); // Persist function (save order) function persist() { var data = $("#sortable").sortable('toArray'); $.ajax({ traditional: true, url: "/gz/index.cfm/membros/rankListByAjax?order="+data, type: "POST", success: function(msg){ $("#sortable tr").effect("highlight", {}, 1000); } }); }

Le code suivant est le nouveau bouton “envoyer-item-to-top” que j’ai ajouté. C’est à ce moment-là que j’aimerais que la transition se produise:

Je pense avoir lu quelque part qu’il est plus difficile d’append des lignes de tableau à un tableau existant. cela a quelque chose à voir avec certains navigateurs qui ajoutent une balise tbody pour vous et d’autres qui n’aiment pas une balise tr sans balise table (c’est-à-dire).

Si possible, vous pourriez convertir votre table en divs (ou éventuellement lis), alors je pense que vous pourriez contourner ce problème. Je pense que jQueryUI’s draggable a cette limitation, pas sûr.

Si vous ne pouvez pas vous éloigner des tables, vous pouvez probablement masquer la ligne, puis la déplacer instantanément pour la positionner, et créer un div qui lui ressemble et le déplacer, puis après l’animation, vous supprimez l’animation div et affichez nouvelle rangée.

hth