Как изменить порядок этих дивов?

Question

У меня есть столбец divs.Я пытаюсь сделать так, чтобы, когда я нажимал на данный div, этот div заменял положение div выше или ниже в зависимости от того, где находится div.Это лучше понять, если вы посмотрите на результат - http://jsfiddle.net/SuperBoi45/vgVnj/

Это почти работает.Обратите внимание, что когда вы нажимаете на div внизу, он идет вверх.Но когда я захочу снова щелкнуть по этому div, он должен вернуться обратно.Но это не так.Не могли бы вы указать, что я могу сделать, чтобы сделать эту работу.Вот код для быстрого просмотра:

<div id="colors">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="yellow"></div>
    <div id="green"></div>
</div>

JavaScript:

var colors = Array.prototype.slice.call(
    $('colors').getElementsByTagName('div'));
colors.forEach(function(e, i) {
    colors[i].onclick = function() {
        var a = colors[i + 1],
            b = colors[i - 1],
            _this = this,
            node;
        node = !a ? b : a;
        this.parentNode.insertBefore(node, _this);
    };
});

function $(id) {
    return document.getElementById(id);
}

Если я нажму на верхний div, он должен опуститься вниз, а тот, что ниже, должен подняться туда, где онраньше был.Если я щелкну по одному из двух средних делителей, он должен пойти вверх, а тот, что был выше, - вниз.Если я нажму на нижний элемент div, он должен пойти вверх.

Answer 1

Я думаю, что вы ищете это.

Работа демо

$(function(){
    $("#colors div").click(function(){
        if($(this).next().length > 0){
            $(this).next().after(this);
        }
        else{
            $(this).parent().prepend(this);
        }
    }); 
});

Answer 2

проблема была с вашей нумерацией цветов .. здесь я обновил решение для лучшей работы с числами ..

http://jsfiddle.net/vgVnj/5/

к вашему сведениюИнструменты MOO с использованием собственных методов JS