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

基本上：

抓住您要移动的元素（$div）
淡出（使用fadeOut()提供良好的用户界面效果）
在上一个/下一个项目之前或之后移动它（使用insertBefore()或insertAfter()）
将其重新淡入（使用fadeIn()的另一个UI效果）

Answer 2

是的，通过更改其CSS样式。修改其位置http://api.jquery.com/position/，您也可以尝试此How to position one element relative to another with jQuery?

用jQuery重新排序div位置？

2 个答案: