jQuery实现一个穿梭框
- 2019 年 10 月 8 日
- 筆記
需求：点击选中左侧内容，把左侧的内容放到右侧的框里面，可以一次放入一个，也可以一次放入多个或者全部，同样，右侧也一样。
写了一个简单的demo，仅供参考：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <link rel="stylesheet" href="index.css"> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style> ul, li { margin: 0; padding: 0; list-style: none; } body { background-color: #e3e3e3; margin: 0px; } .box { width: 300px; background-color: #ffffff; height: 240px; float: left; } .Path { color: #ffffff !important; background-color: #1890ff !important; border-bottom: 1px solid #ffffff; transition: all .01s; } .box li { padding: 8px; border-bottom: 1px solid #ffffff; background-color: #f4f4f4; cursor: pointer; transition: all .5s; } #btn { height: 240px; float: left; width: 80px; text-align: center; } #btn button { width: 50px; height: 30px; display: block; margin: 20px auto; line-height: 30px; color: white; cursor: pointer; background-color: #1890ff; border-radius: 5px; transition: all .5s; border: none; } </style> </head> <body> <li class="box"> <ul id="shuttleLeft"> <li>王小婷1</li> <li>王小婷2</li> <li>王小婷3</li> </ul> </li> <li id="btn"> <button id="toRight">></button> <button id="toLeft"><</button> </li> <li class="box"> <ul id="shuttleRight"> <li>祈澈菇凉1</li> <li>祈澈菇凉2</li> <li>祈澈菇凉3</li> </ul> </li> </body> <script> //穿梭框左侧选中 $("#shuttleLeft").on('click', 'li', function() { if($(this).hasClass('Path')) { $(this).removeClass('Path'); } else { $(this).addClass('Path'); } }); //穿梭框右侧选中 $("#shuttleRight").on('click', 'li', function() { if($(this).hasClass('Path')) { $(this).removeClass('Path'); } else { $(this).addClass('Path'); } }); //向右移动 $("#toRight").click(function() { if($("#shuttleLeft .Path").length == 0) return false; $("#shuttleLeft").find('.Path').appendTo("#shuttleRight"); $("#shuttleRight li").removeClass('Path'); }); //向左移动 $("#toLeft").click(function() { if($("#shuttleRight .Path").length == 0) return false; $("#shuttleRight .Path").appendTo("#shuttleLeft"); $("#shuttleLeft li").removeClass('Path'); }); </script> </html>
