Переупорядочивать позиции div с помощью jQuery?

Question

Я пытаюсь имитировать систему голосования, которая есть на этом сайте.Есть ли простой способ изменить положение div в jquery (с анимацией)?

Скажем, у меня есть следующие предметы:

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

Демо

В основном:

1. Возьмите элемент, который хотите переместить ($div)
2. Исчезать (дать хороший эффект пользовательского интерфейса с fadeOut())
3. Переместите его до или после предыдущего / следующего элемента (с помощью insertBefore() или insertAfter())
4. перекрасить его обратно (еще один эффект пользовательского интерфейса с fadeIn())

Answer 2

Да, изменив стили CSS. Измените его положение http://api.jquery.com/position/, также вы можете попробовать это Как позиционировать один элемент относительно другого с помощью jQuery?