CODEWITHSUNDEEP
jqueryhtmljquery-animate
Sky
Sky

Reputation: 4853

Re-ordering div positions with jQuery?

I'm trying to mimic the vote-up vote-down system that is on this website. Is there an easy way to move the position of a div in jquery (with animations)?

Say I have the following items:

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

I'd like to be able to call a function which would smoothly move item 3 up one position to:

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

Is there any easy way to do this in jQuery?

Upvotes: 2

Views: 3097

Answers (2)

Brad Christie
Brad Christie

Reputation: 101614

Something like this perhaps:

$('.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');
        });
    }
});

Demo

Basically:

  1. Grab the element you want to move ($div)
  2. Fade it out (give a nice UI effect with fadeOut())
  3. Move it either before or after the previous/next item (with insertBefore() or insertAfter())
  4. re-fade it back in (another UI effect with fadeIn())

Upvotes: 6

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Yes there is by changing its css styles. Modify its position http://api.jquery.com/position/ also you can try this How to position one element relative to another with jQuery?

Upvotes: 0

Related Questions