基于jquery实现穿梭框效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/transform.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <style>
        .add-box,.remove-box{
            background-color:#f1f1f1;
            height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .add-span,.remove-span{
            border:1px solid #aaa;
            border-radius: 3px;
            font-size: 0.7rem;
            padding:0.2rem 0.4rem;
            transition: 0.1s;
            width: calc((100% / 4) - 0.6rem);
            display:block;
            float: left;
            margin: 0.3rem;
            background-color:white;
        }
        .add-span i,.remove-span i{
            font-size: 0.7rem;
            padding-right: 0.1rem;
            padding-left: 0.2rem;
            transition: 0.3s;
            float: right;
        }
        .add-span i{
            color: #007bff;
        }
        .remove-span i{
            color: #dc3545;
        }
        .add-span:hover,.remove-span:hover{
            background-color:#cce5ff;
            border-color: #b8daff;
            cursor: pointer;
        }
        .add-span:active{
            background-color:#007bff;
            border-color: #007bff;
            cursor: pointer;
            color: white;
        }
        .remove-span:active{
            background-color:#dc3545;
            border-color: #dc3545;
            cursor: pointer;
            color: white;
        }
        .add-span:active i,.remove-span:active i{
            cursor: pointer;
            color: white;
        }

    </style>
</head>

<body>
    <div class="row" style="margin: 0;">
        <div class="col-sm-12 col-md-6">
            <div class="remove-box">
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="add-box">
                <span index="2014" class="add-span">五险一金<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2015" class="add-span">周末双休<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2016" class="add-span">包食宿<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2017" class="add-span">通讯补贴<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2018" class="add-span">年底双薪<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2019" class="add-span">餐宿补贴<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2020" class="add-span">年底旅游<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2021" class="add-span">年终分红<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2022" class="add-span">加班补助<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2023" class="add-span">带薪年假<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2024" class="add-span">股票期权<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2025" class="add-span">交通补贴<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2026" class="add-span">高温补贴<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2027" class="add-span">弹性工作<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2028" class="add-span">采暖补贴<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2029" class="add-span">医疗保险<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2030" class="add-span">定期体检<i class="icon-icon_im_more iconfont"></i></span>
                <span index="2031" class="add-span">免费班车<i class="icon-icon_im_more iconfont"></i></span>
            </div>
        </div>
    </div>

    <script>
        let addlist = []; // 待添加的数据数组
        let sublist = []; // 用于提交给后台的数组
        // 初始化待添加的数据数组
        $("document").ready(function () {
            for (var i = 0; i < $(".add-box .add-span").length; i++) {
                addlist.push($(".add-box .add-span").eq(i).attr("index")); // 这里span的index 你可以换成自己定义的值
            }
        })
        /*
          添加到左边 -- 向左边穿梭
            attr 设置或返回被选元素的属性值
            利用事件冒泡:给元素添加点击事件
        */
        var ul = document.querySelector('.add-box');
        ul.addEventListener('click', function (e) {
            addSpan(e.target)
        });
        function addSpan(data) {
            // 获取索引
            var index = $(data).index();
            // 根据索引找到点击的元素,获取点击元素的内容
            var text = $(".add-box .add-span").eq(index).text();
            // 获取自定义属性index
            var spanIndex = $(".add-box .add-span").eq(index).attr("index");
            // 创建html元素
            var html = `<span class="remove-span" οnclick="removeSpan(this)" index="` + spanIndex + `">` + text + `<i class="icon-icon_roundclose iconfont"></i></span>`;
            // 右边内容:移除-选中的元素
            $(".add-box .add-span").eq(index).remove();
            // 左边内容:添加-选中的元素
            $(".remove-box").prepend(html);

            /*
              采集添加的数据
            */
            addlist.splice(addlist.indexOf(spanIndex), 1);
            sublist.push(spanIndex);
            console.log('addlist1', addlist);
            console.log('sublist1', sublist); // 添加动作:用于提交给后台的数组
        }
        /*
          移除已添加的span -- 向右边穿梭
        */
        function removeSpan(data) {
            // 获取索引
            var index = $(data).index();
            // 根据索引找到点击的元素,获取点击元素的内容
            var text = $(".remove-box .remove-span").eq(index).text();
            // 获取自定义属性index
            var spanIndex = $(".remove-box .remove-span").eq(index).attr("index");
            // 创建html元素
            var html = `<span class="add-span" οnclick="addSpan(this)" index="` + spanIndex + `">` + text + `<i class="icon-icon_im_more iconfont"></i></span>`;
            // 左边内容:移除-选中的元素
            $(".remove-box .remove-span").eq(index).remove();
            // 右边内容:添加-选中的元素
            $(".add-box").prepend(html);

            /*
              采集删除的数据
            */
            addlist.push(spanIndex);
            sublist.splice(sublist.indexOf(spanIndex), 1);
            console.log('addlist2', addlist);
            console.log('sublist2', sublist); // 删除动作:用于提交给后台的数组
        }

    </script>

</body>

</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页