div模拟select左右移动效果
div模拟select option对象左右移动效果,同时增加右边货物自动增加效果。
源代码如下
<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 == '<<=', 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="#">=>></a><br /><a href="#"><<=</a></div> <div class="select good" id="dvRight"></div>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:div模拟select左右移动效果