Swap Places

by kidino

HTML

<ul>
    <li style="background-color: #f00;" id="d_1">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />1
    </li>
    <li style="background-color: #0f0;" id="d_2">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />2
    </li>
    <li style="background-color: #00f;" id="d_3">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />3
    </li>
    <li style="background-color: #ff0;" id="d_4">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />4
    </li>
    <li style="background-color: #0ff;" id="d_5">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />5
    </li>
    <li style="background-color: #f0f;" id="d_6">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />6
    </li>
    <li style="background-color: #666;" id="d_7">
        <button class="doleft">&laquo;</button>
        <button class="doright">&raquo;</button>
        <br />7
    </li>

</ul>

CSS

ul { list-style-type: none; margin: 0px; padding: 0px; }
li { height: 60px; width: 60px; 
    margin: 5px; border: 1px solid #ccc; text-align: center;
    position: absolute;
}

JavaScript

var lleft = 0;
var order = [1,2,3,4,5,6,7];
$('li').each(function(){
    $(this).css('left',lleft+'px');
    lleft = lleft + 70;
});

$('ul').on('click','.doright',function(){
    var this_obj = $(this).parent();
    var this_id = parseInt(this_obj.attr('id').split('_')[1]);
    var from_id = 0;
    var to_id = 0;
    if (order[6] != this_id) {
        for(var i in order){
            var x = parseInt(i);
            if (order[x] == this_id) {
                to_id = order[x];
                from_id = order[x+1]
                order[x] = order[x+1];
                order[x+1] = this_id;
                break;
            }
        }
        $('#d_'+to_id).animate({ left: "+=70"},500);
        $('#d_'+from_id).animate({ left: "-=70"},500);
    }
});

$('ul').on('click','.doleft',function(){
    var this_obj = $(this).parent();
    var this_id = parseInt(this_obj.attr('id').split('_')[1]);
    var from_id = 0;
    var to_id = 0;
    if (order[0] != this_id) {
        for(var i in order){
            var x = parseInt(i);
            if (order[x] == this_id) {
                to_id = order[x] = order[x-1];
                from_id = order[x-1] = this_id;
                break;
            }
        }
        
        $('#d_'+to_id).animate({ left: "+=70"},500);
        $('#d_'+from_id).animate({ left: "-=70"},500);
    }
});