jQuery Girl
  1. jQuery Girl
  3. Ré-ordonner les positions div avec jQuery?
Intereting Posts
Création dynamic d’une zone de sélection avec les données d’un tableau Erreur «Uncaught ReferenceError: $ n’est pas défini» Comment éviter d’actualiser la page au clic d’ancrage ( )? window.self.close () ne fonctionne pas jQueryMobile sous Android / PhoneGap refuse le chargement. / .ajax Problèmes avec la molette de la souris dans jQuery Dans jQuery, comment puis-je envelopper plusieurs éléments avec un div étant donné que j’ai un cours de début et de fin? Fancybox 2.1.3 empêchant l’iframe d’avoir des barres de défilement $ .Callbacks (). Disable () vs $ .Callbacks (). Lock () Comment animer une barre de progression dans Bootstrap 3? Insertion d’étiquettes dans des tranches de graphique à secteurs (Highchart) JQuery webcam Plugin – sauvegarder l’image sans PHP Vous voulez faire pivoter un élément dans jQuery Rechercher et faire défiler jusqu’au mot sur la page requête append deux champs de saisie ensemble

Ré-ordonner les positions div avec jQuery?

J’essaie de reproduire le système de vote par vote qui figure sur ce site Web. Existe-t-il un moyen simple de déplacer la position d’une div dans jQuery (avec des animations)?

Dites que j’ai les éléments suivants: 

 
item 1
 
item 2
 
item 3

J’aimerais pouvoir appeler une fonction qui déplacerait en douceur le point 3 d’une position à l’autre: 

 
 
item 1
 
item 3
 
item 2

Existe-t-il un moyen simple de faire cela dans jQuery?

Quelque chose comme ça peut-être: 

 $('.move-up').click(function(e){ var $div = $(this).closest('div'); // Does the element have anywhere to move? if ($div.index() > 0){ $div.fadeOut('slow',function(){ $div.insertBefore($div.prev('div')).fadeIn('slow'); }); } }); $('.move-down').click(function(e){ var $div = $(this).closest('div'); // Does the element have anywhere to move? if ($div.index() <= ($div.siblings('div').length - 1)){ $div.fadeOut('slow',function(){ $div.insertAfter($div.next('div')).fadeIn('slow'); }); } });

Démo

Fondamentalement:

  1. Prenez l'élément que vous souhaitez déplacer ( $div )
  2. Fondu fadeOut() donne un bel effet d'interface utilisateur avec fadeOut() )
  3. Déplacez-le avant ou après l'élément précédent / suivant (avec insertBefore() ou insertAfter() )
  4. refaites le fondu dans (un autre effet d'interface utilisateur avec fadeIn() )

Oui il y a en changeant ses styles css. Modifiez sa position http://api.jquery.com/position/. Vous pouvez également essayer ceci. Comment positionner un élément par rapport à un autre avec jQuery?