ListItem Mover - Admin Access Rights

This is not a plugin but I have formed the code up like a plugin.

by Kushal Jayswal

HTML

<div class="selectMove">
    <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="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>

CSS

.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom: 1;
}
* {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
.button {
    cursor: pointer;
    background: #eee;
    border: 0;
    min-width: 116px;
    padding: 5px 0;
    margin-bottom: 2px;
    display: block;
}
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;
}
.box1 {
    border: 1px solid;
    width: 150px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position: relative;
}
.box2 {
    border: 1px solid;
    width: 200px;
    min-height: 199px;
    max-height: 199px;
    overflow-y: auto;
    position:relative;
    margin-left: 10px;
    margin-right: 10px;
}
span.desc {
    display: block;
    padding-top: 5px;
    color: #7a7a7a;
    font-weight: normal;
    font-style: italic;
}
li.active span.desc {
    color: #ccc;
}
.box2 .delete, .box2 .unmoved {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
    background:url(icon-close.png) no-repeat 0 0 red;
    width: 10px;
    height: 10px;
    text-indent: -99999px;
}
.movebutton {
    margin-left: 10px;
}
.movebutton .mover {
    background: url(icon_right.png) no-repeat 0 0 #eee;
    height: 48px;
    margin: 65px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
.highlight {
    background: #d9fffe;
}
#move-up {
    background: url("icon_up.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 0px auto 0;
    min-width: 0;
    text-align: center;
    width: 48px;
}
#move-down {
    background: url("icon_down.png") no-repeat 0 0 #eee;
    height: 48px;
    margin: 15px auto 0;
    min-width: 0;
   ...

JavaScript

/* You need to add 2 ULs with list items and all the rest will be handled by plugin code */

(function () {
    $.fn.Movify = function (options) {
        return this.each(function () {
            var settings = $.extend({
                mainClass: "movify",
                box1Class: "box1",
                box2Class: "box2"
            }, options);

            var el = $(this);
            var box1 = el.find("div:nth-child(1)");
            var box2 = el.find("div:nth-child(2)");
            var mover = $('<div class="movebutton alignleft"><input class="button mover" value=">>" type="button" /></div>');
            var upDown = $('<div class="alignleft"><input class="button" id="move-up" type="button" value="Up" /><input class="button" id="move-down"type="button" value="Down" /></div>');
            var nonDelButton = $('<span class="unmoved alignright">DELETE</span>');
            var delButton = '<span class="delete alignright">DELETE</span>';
            var delClass = el.find('.delete');
            var moveUpDown = box2.addClass('moveUpDown');

            commonFunctions();

            function commonFunctions() {
                // main object class
                el.addClass(settings.mainClass);

                // box1, box2 class addition
                box1.addClass(settings.box1Class);
                box2.addClass(settings.box2Class);

                // events, buttons appending to object
                mover.insertAfter(box1);
                upDown.insertAfter(box2);

                // active item onclick
                el.find('li').click(function () {
                    $(this).addClass('active').siblings().removeClass('active');
                });

                commonEvents();
            }

            function commonEvents() {
                var iBox2 = el.find('.box2 li');

                iBox2.prepend(nonDelButton);

                moveTrigger();
                reverseMoved();
                removeBox2Item();
          ...