SelectBox - LHS to RHS (UL LI)

Very simple UI that is used some preloaded data into HS and RHS both. RHS value can be deleted directly by clicking on RED.

by mubarakpasha

HTML

<div class="wrapper">
    <div class="selectbox alignleft">
        <ul id="selection" class="cf">
            <li>One <span class="desc">Description</span>

            </li>
            <li>Two <span class="desc">Description</span>

            </li>
            <li>Three <span class="desc">Description</span>

            </li>
            <li>Four <span class="desc">Description</span>

            </li>
            <li>Five <span class="desc">Description</span>

            </li>
            <li>Six <span class="desc">Description</span>

            </li>
            <li>Seven <span class="desc">Description</span>

            </li>
            <li>Eight <span class="desc">Description</span>

            </li>
            <li>Nine <span class="desc">Description</span>

            </li>
            <li>Ten <span class="desc">Description</span>

            </li>
            <li>Eleven <span class="desc">Description</span>

            </li>
            <li>Twelve <span class="desc">Description</span>

            </li>
            <li>Thirteen <span class="desc">Description</span>

            </li>
            <li>Fourteen <span class="desc">Description</span>

            </li>
            <li>Fifteen <span class="desc">Description</span>

            </li>
            <li>Sixteen <span class="desc">Description</span>

            </li>
        </ul>
    </div>
    <div class="movebutton alignleft">
        <input class="button mover" value=">>" type="button" />
    </div>
    <div id="moving" class="movebox alignleft">
        <ul class="cf">
            <li>One <span class="desc">Description</span>

            </li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
        </ul>
    </div>
    <div class="alignleft">
        <input class="button" id="move-up" type="button" value="Up" />
        <input class="button" id="move-down" type="button" value="Down" />
    </div>
</div>

CSS

@charset"utf-8";
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom: 1;
}
/* general purpose classes */
 .nodisplay {
    display: none;
}
.nodisplay_strict {
    display: none !important;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.button {
    cursor: pointer;
    background: #eee;
    border: 0;
    min-width: 116px;
    padding: 5px 0;
    margin-bottom: 2px;
    display: block;
}
body {
    padding: 25px;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
}
li {
    display: block;
    cursor: pointer;
    padding: 5px;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #fff;
}
li.active {
    background: #000;
    color: #fff;
}
.wrapper {
    width: 960px;
    margin: 0 auto;
}
.selectbox {
    border: 1px solid;
    width: 150px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position: relative;
}
.movebox {
   ...

JavaScript

// JavaScript Document
$(document).ready(function (e) {
    $('.selectbox li, .movebox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });


    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved').prependTo('.movebox ul').prepend('<span class="delete alignright" onclick="moveToLHS(this);">DELETE</span>');
    });

    $('.mover').click(function () {
        $('.selectbox li.active').addClass('moved');
        $('.movebox li.active').removeClass('active');
        setTimeout(function () {
            $('.movebox li').removeClass('moved');
        }, 1500);
    });

    $('.movebox ul li').each(function () {
        $(this).prepend('<span class="unmoved alignright" onclick="deleteFromRHS(this);">DELETE</span>');
    });

    $("#move-up").click(moveUp);
    $("#move-down").click(moveDown);
    $("#reset-list").click(resetList);

});


//DELETE
function moveToLHS(t) {
    $(t).parent().remove().prependTo('.selectbox ul');
    $('.selectbox li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });
    setTimeout(function(){
	  $('.selectbox li').removeClass('moved');
	}, 1500);

    //deleting span
    $('.selectbox ul li .delete').each(function () {
        $(this).remove();
    });


}

function deleteFromRHS(d) {
    $(d).parent().remove();
}


// LI Up Down
function moveUp() {
    $("#moving li.active").each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == 1) return false;

        listItem.insertBefore(listItem.prev());
    });
}

function moveDown() {
    var itemsCount = $("#moving li").length;

    $($("#moving li.active").get().reverse()).each(function () {
        var listItem = $(this);
        var listItemPosition = $("#moving li").index(listItem) + 1;

        if (listItemPosition == itemsCount) return false;

       ...