div模拟select左右移动效果

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
a{text-decoration:none}
.select{overflow:auto;width:100px;height:120px;float:left;border:solid 1px #ccc;line-height:20px; -moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none; user-select: none;}
.select div.focus{color:#fff;background:#0a246a}
.moveop{float:left;width:50px;text-align:center;padding-top:40px}
.select div.focus a{color:#fff}
.good{width:200px}
.good input{border:solid 1px #ccc;width:30px;text-align:center}
.good a{margin:0px 5px}
</style>
<script>
    function bindEvent(items, remove) {
        if (remove) return items.find('a').add(items).unbind();
        return items.click(function () { $(this).toggleClass('focus'); }).dblclick(function () { this.className = 'focus'; $('div.moveop a').eq(this.parentNode.id=='dvRight'?1:0).trigger('click'); });
    }
    $(function () {
        bindEvent($('div.select >div')); $('div.select').bind('selectstart', function () { return false });
        $('div.moveop a').click(move);
    });
    function spin(e) {
        var minus = this.innerHTML == '-', txt = $(this)[minus ? 'next' : 'prev'](), v = parseInt(txt.val(), 10) || 0;
        v += minus ? -1 : 1;
        if (v < 0) v = 0;
        txt.val(v);
        e.stopPropagation();
        return false;
    }
    function move() {
        var remove = this.innerHTML == '&lt;&lt;=', l = $('#dvLeft'), r = $('#dvRight'), items = (remove ? r : l).find('div.focus');
        if (items.size() == 0) { alert('请选择货物！'); return false }
        if (remove) bindEvent(items, true).remove();
        else bindEvent(items.removeClass('focus').clone().append('<a href="#">-</a><input type="text" value="0"/><a href="#">+</a>').appendTo(r)).find('a').bind({ click: spin, dblclick: function (e) { e.stopPropagation(); } });
        return false;
    }
</script>
<div class="select" id="dvLeft">
<div>A货物</div>
<div>B货物</div>
<div>C货物</div>
<div>D货物</div>
<div>E货物</div>
</div>
<div class="moveop"><a href="#">=&gt;&gt;</a><br /><a href="#">&lt;&lt;=</a></div>
<div class="select good" id="dvRight"></div>