使用 jQuery 重新排序 div 位置？

发布于 2024-12-09 03:47:12 字数 546 浏览 0 评论 0原文

我试图模仿这个网站上的投票赞成投票反对系统。有没有一种简单的方法来移动 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 中是否有任何简单的方法可以做到这一点？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

末蓝 2024-12-16 03:47:12

可能是这样的：

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

演示

基本上：

抓住你想要移动的元素（$div< /code>)
淡出（使用 fadeOut())
将其移动到之前或之后上一个/下一个项目（使用 insertBefore() 或 insertAfter())
重新淡入淡出（另一个 UI 效果 fadeIn())

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:

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

回复收藏 0 原文

呢古 2024-12-16 03:47:12

是的，可以通过改变它的 css 样式来实现。修改其位置 http://api.jquery.com/position/ 你也可以尝试这个< a href="https://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another">如何使用 jQuery 相对于另一个元素定位一个元素？

回复收藏 0 原文

~没有更多了~