用jQuery重新排列div位置？ [英] Re-ordering div positions with jQuery?

问题描述

我试图模仿这个网站上的投票选举系统。

假设我有以下几项：

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

我希望能够调用一个可以平滑地将项目3向上移动一个位置的函数：

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

有没有简单的方法可以在jQuery中做到这一点？

  $（'。move-点击（函数（e）{
 var $ div = $（this）.closest（'div'）; 
 
 //元素是否可以移动？
 if（$ div.index（）> 0）{
 $ div.fadeOut（'slow'，function（）{
 $ div.insertBefore（$ div.prev（'div' ））。fadeIn（'slow'）; 
}）; 
} 
}）; 
 $ b $（'。move-down'）。click（function（e）{
 var $ div = $（this）.closest（'div'）; 
 $ （$ div.index（）< =（$ div.siblings（'div'）。length  -  1））{
 
 //元素是否可以移动？
 if div.fadeOut（'slow'，function（）{
 $ div.insertAfter（$ div.next（'div'））。fadeIn（'slow'）; 
}）; 
 } 
}）; 
  

Demo

基本上：

1. 抓取元素你想移动（ $ div ）


2. 淡入淡出（用 fadeOut（） ）


3. 移动它在前一个/下一个项目之前或之后（使用 insertBefore（） 或 insertAfter（） ）


4. 重新淡入（另一个UI效果，使用 fadeIn（） ）

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?

解决方案

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())

这篇关于用jQuery重新排列div位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！