用jQuery重新排列div位置？

Question

我試圖模仿這個網站上的投票決定系統。有沒有簡單的方法來移動在jQuery中的div的位置（動畫）？

說我有以下項目：

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

我希望能夠調用這將平滑移動項目3向上移動一個位置的功能：

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

有什麼簡單的方法來做到這一點在jQuery中？

Answer 1

事情是這樣的：

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

基本上是：

1. 抓住要移動（$div）
元素
2. 淡出（給出一個不錯的UI效果與fadeOut()）
3. 之前或上一個/下一個項目後，其移動（與insertBefore()或insertAfter()）
4. 重新褪色它放回（與fadeIn()另一UI效果）

Answer 2

是的，通過改變它的CSS樣式。修改其位置http://api.jquery.com/position/也可以或許試試這個How to position one element relative to another with jQuery?