$('li').mousedown(function(e){
    $('li').addClass('flanking');
    $(this).removeClass('flanking');

    $('ul li:eq(0)').after($(this));

    if( $(this) == '(ul li:eq(0)' ){
        $('ul li:eq(2)').prependTo('ul');
    };
});

if( $(this) == $('ul li:eq(0)') ){
    $('ul li:eq(2)').prependTo('ul');
};

if( $(this)[0] == $('ul li:eq(0)')[0] ){
        $('ul li:eq(2)').prependTo('ul');
};

$('li').mousedown(function (e) {
    var self = $(this),
        length = self.siblings().length + 1,
        middle = length / 2 - 1,
        list = self.parent().children(),
        i = self.index() - 1;
    if (length % 2) {
        $()[i < middle ? 'after' : 'before'].call(
            list.eq(Math.round(middle)),
            self
        );
    } else {
        list.eq(
            Math[i < middle ? 'ceil' : 'floor'].call(null, middle)
        ).after(self);
    }
});

<div class="wrapper">
    <ul>
        <li class="flank_left">1</li>
        <li class="middle">2</li>
        <li class="flank_right">3</li>
    </ul>
</div>

* {
    padding: 0px;
    margin: 0px;
}
.wrapper {
    width: 310px;
    position: relative;
    margin: 10px;
}
ul li {
    display: block;
    width: 100px;
    height: 25 px;
    background: #099;
    cursor: pointer;
    float: left;
}
.flank_left {
    position: absolute;
    top: 0px;
    left: 0px;
}
.flank_right {
    position: absolute;
    top: 0px;
    left: 210px;
}
.middle {
    position: absolute;
    top: 0px;
    left: 105px;

}

$('li').click(function () {
    // If not middle element and if not animated...
    if (!$(this).hasClass('middle') && !$('.middle').is(':animated')) {

        if($(this).hasClass("flank_left") ){ // If flank_left
            $( this ).switchClass( "flank_left", "middle", 1000);
            $( '.middle' ).switchClass( "middle", "flank_left", 1000);
        }else{ // if flank_right
            $( this ).switchClass( "flank_right", "middle", 1000);
            $( '.middle' ).switchClass( "middle", "flank_right", 1000);
        }
    }
});