jQuery实现一个穿梭框

江南才子

需求：点击选中左侧内容，把左侧的内容放到右侧的框里面，可以一次放入一个，也可以一次放入多个或者全部，同样，右侧也一样。
写了一个简单的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>

原文作者：祈澈姑娘
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚

[jQuery] jQuery实现一个穿梭框

相关帖子

常用jquery右健禁止命令

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

PHP模拟登陆抓取页面内容

uniapp 截屏扫码

7种好看的鼠标点击效果

Discuz应用中心恢复授权的方法

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

江南才子 LV4