Flying List Items

by salitrapraveen

HTML

<ul id="list1">
<li>#item1</li>
<li>#item2</li>
<li>#item3</li>
<li>#item4</li>
<li>#item5</li>
<li>#item6</li>
<li>#item7</li>
<li>#item8</li>
<li>#item9</li>
<li>#item10</li>
<li>#item11</li>
<li>#item12</li>
</ul>

<div id="acceptContainer">
    Accept List
</div>

<div id="rejectContainer">
    Reject List
</div>

<div id="completeContainer">
    Complete List
</div>

<div>
<button type="button" id="accept">Accept</button>
<button type="button" id="reject">Reject</button>
<button type="button" id="complete">Complete</button>
</div>

CSS

#list1 li
{ width: 60px; 
  margin: 2px;
  text-align: center;
  cursor: pointer;
  background: red;    
}

#acceptContainer, #rejectContainer, #completeContainer
{
  background:#3F7899;
  color: white;
  width: 100px; 
  padding: 5px;
  text-align: center;
}

#acceptContainer
{   
  position: absolute;
  bottom: 20px;
  right: 100px
}
#rejectContainer
{
  position: absolute;
  bottom: 20px;
  right: 220px
}

#completeContainer
{ 
  position: absolute;
  bottom: 20px;
  right: 340px
}

ul
{
  float: left;
}

#list1 .selected {
    background: #2BCBD6;
}

JavaScript

$(document).ready(

function() {

    var moveItem = function(containerID) {
        $.each($('#list1 .selected'), function() {
            $(this).css({
                position: 'absolute',
                top: $(this).offset().top,
                left: $(this).offset().left
            }).animate({
                top: $('#' + containerID).offset().top,
                left: $('#' + containerID).offset().left,
                width: '20px',
            }, function() {
                $(this).fadeOut();
            });
        });
    };



    $('#list1 li').click(function() {
        $('#list1 .selected').removeClass('selected');
        $(this).addClass('selected');
    });

    $('#accept').click(function() {
        moveItem('acceptContainer')
    });
    $('#reject').click(function() {
        moveItem('rejectContainer')
    });
    $('#complete').click(function() {
        moveItem('completeContainer')
    });
});