基於jquery實現穿梭框效果

落花流雨發表於2020-10-20
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>

相關文章