jQuery Girl
  1. jQuery Girl
  3. Déplacer contenant des éléments de haut en bas avec jquery
Intereting Posts
Interface utilisateur jQuery redimensionnable dans CKEditor Comment append le nouveau JSON à partir d’un fichier JSON existant L’access à l’atsortingbut de données à l’aide de jQuery renvoie undefined? La validation jQuery ne valide pas problèmes de performances / modèles lors de l’utilisation de requirejs avec JQuery, jQuery Mobile, Knockout et Sammy pour créer une application structurée avec des modèles externes Ajoutez un affichage JavaScript à la page d’accueil pour un décompte de 140 caractères. (Tutoriel Rails, 2e édition, chapitre 10, exercice 7) Tableur Google non accessible à partir d’un jeu de données miso ou d’un plateau Jquery ne fonctionne pas avec MultiView Filtrez dataTables.net sans entrée de boîte à filtre incluse mettre à jour le marqueur après avoir retiré les marqueurs du tableau Comment formater la date et l’heure avec les modèles jQuery? Comment puis-je filtrer une liste de divs quand 2 cases à cocher sont cochées en utilisant jquery ou javascript Plusieurs accordéons de l’interface utilisateur JQuery nesteds générés via le modèle Knockout ne se lient pas correctement Comment ouvrir une page à l’intérieur de shadowbox? Gardez les parents avec enfants ouverts lorsque vous créez un lien vers une nouvelle page

Déplacer contenant des éléments de haut en bas avec jquery

Merci pour toute l’aide que vous pourrez fournir! Actuellement, j’utilise un code sortingable sur l’interface utilisateur pour permettre aux utilisateurs de déplacer les éléments de haut en bas dans l’ordre. Maintenant, je souhaite atsortingbuer à chacun de ces éléments un ensemble de boutons “haut” et “bas” permettant aux utilisateurs de déplacer les éléments d’un clic à l’autre. J’ai essayé de retravailler ces billets, mais il me manque quelque chose d’évident …

jQuery Sortable Move UP / DOWN bouton déplacer vers le haut / bas dans jQuery

Je pense que d’une certaine manière, je n’applique pas l’interrogation au bon élément. Mon jsfiddle est ici: http://jsfiddle.net/kevindp78/vexw5/2/ et le code est ci-dessous.

HTML 

 
 IMG1 
 
Info
 MoreInfo 
 
 
 
Change Order
 
  
 
  
 
 
 Stuff1 
 
 
 IMG2 
 
Info
 MoreInfo 
 
 
 
Change Order
 
  
 
  
 
 
 Stuff2 
 
 
 IMG3 
 
Info
 MoreInfo 
 
 
 
Change Order
 
  
 
  
 
 
 Stuff3

JS 

 $('up-button').click(function(){ $(this).parent('.leg').insertBefore.previous('.leg') }); $('.down-button').click(function(){ $(this).parent('.leg').insertAfter.next('.leg') });

Il y a plusieurs problèmes à résoudre dans votre code, examinons-les dans l’ordre.

Il y a d’abord $('up-button') il manque le . donc il ne sélectionnera pas les boutons.

Ensuite, vous utilisez la méthode parent() qui ne monte que d’un niveau, utilisez plutôt les parents('.leg') .

insertBefore() est une méthode qui accepte une cible quant à l’emplacement du contenu que vous avez sélectionné.

previous() n’est pas une fonction, c’est prev() place et il n’a pas besoin de paramètre car il ne fait que sélectionner l’élément précédent.

Si vous combinez toutes ces corrections, vous obtiendrez quelque chose comme ceci 

 $('.up-button').click(function(){ $(this).parents('.leg').insertBefore($(this).parents('.leg').prev()); }); $('.down-button').click(function(){ $(this).parents('.leg').insertAfter($(this).parents('.leg').next()); });

Comme démontré sur ce violon édité http://jsfiddle.net/vexw5/6/

Vous pouvez essayer de remplacer votre JS par quelque chose comme ceci: 

 $(".down").click(function () { var $parent = $(this).parents(".leg"); $parent.insertAfter($parent.next()); }); $(".up").click(function () { var $parent = $(this).parents(".leg"); $parent.insertBefore($parent.prev()); });

http://jsfiddle.net/vexw5/7/

Ceci est juste les bases. Il n’y a pas d’animations ou quoi que ce soit.