Réorganiser les positions de la division avec jQuery?

j'essaie d'imiter le système de vote-up vote-down qui est sur ce site. Est-il un moyen facile de déplacer la position d'un div en jquery (avec animations)?

Dire que j'ai les éléments suivants: 

<div id="items">
  <div id="item1">item 1</div>
  <div id="item2">item 2</div>
  <div id="item3">item 3</div>
</div>

je voudrais être en mesure d'appeler une fonction qui se déplace en douceur point 3 une position à: 

<div id="items">
  <div id="item1">item 1</div>
  <div id="item3">item 3</div>
  <div id="item2">item 2</div>
</div>

y a-t-il un moyen facile de faire cela à jQuery?

2
demandé sur Jon Lemmon 2011-10-11 02:49:22

2 réponses

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

en gros:

  1. Saisir l'élément que vous souhaitez déplacer ( $div )
  2. Fade (donner une belle INTERFACE utilisateur avec effet fadeOut() )
  3. déplacez-le avant ou après l'article précédent /suivant (avec insertBefore() ou insertAfter() )
  4. re-fondu de nouveau (un autre de l'INTERFACE utilisateur de l'effet avec fadeIn() )
6
répondu Brad Christie 2011-10-10 23:11:09

Oui, il est en changeant de styles css. Modifier sa position http://api.jquery.com/position/ vous pouvez aussi essayer ce comment positionner un élément par rapport à un autre avec jQuery?

0
répondu Robin Carlo Catacutan 2017-05-23 12:13:40