用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?