jQuery实现穿梭框

OpenSource_
于 2021-07-28 10:50:42 发布
阅读量418
点赞数
分类专栏： jQuery 文章标签： jquery
原文链接：https://blog.csdn.net/qq_36538012/article/details/101491020?
版权
jQuery 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
需求：点击选中左侧内容，把左侧的内容放到右侧的框里面，可以一次放入一个，也可以一次放入多个或者全部，同样，右侧也一样。
写了一个简单的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>
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。
OpenSource_
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现穿梭框

需求：点击选中左侧内容，把左侧的内容放到右侧的框里面，可以一次放入一个，也可以一次放入多个或者全部，同样，右侧也一样。写了一个简单的demo，仅供参考： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>穿梭框</title> ...
复制链接

扫一扫
专栏目录
jQuery实现穿梭框

“相关推荐”对你有帮助么？
