jQuery实现穿梭框效果

简介：今天给大家带来穿梭框的实现

布局的实现

  <div id="box">
        <div id="boxleft">
            <ul id="left_ul">

            </ul>
        </div>
        <div id="boxbtn">
            <button id="btn_right">>>>></button>
            <button id="btn_left">
                <<<< </button>
        </div>
        <div id="boxright">
            <ul id="right_ul">

            </ul>
        </div>
    </div>

布局的样式

  <style>
        * {
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 500px;
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

        #boxright {
            width: 200px;
            height: 500px;
            border: 1px solid darkcyan;
        }

        #boxleft {
            width: 200px;
            height: 500px;
            border: 1px solid darkcyan;
        }

        #boxbtn {
            margin: auto;
        }

        #boxbtn button {
            width: 50px;
            height: 200ox;
            margin-top: 10px;
            display: flex;
            background: deepskyblue;
            cursor: pointer;
            color: white;
        }

        ul li {
            height: 30px;
            line-height: 30px;
            margin-bottom: 2px;
            text-align: center;
            background: darkgray;
        }

        form {
            text-align: center;
        }

        .active {
            color: white;
            background: darkseagreen;
        }
    </style>

代码实现

 <script>
        let arr = [
            { "id": 1, "name": "zhang", "check": false },
            { "id": 2, "name": "liu", "check": false },
            { "id": 3, "name": "guan", "check": false },
            { "id": 4, "name": "zhao", "check": true },
            { "id": 5, "name": "ao", "check": true }
        ];

        $("#add").click(function () {
            var name = $("#name").val();
            arr.push({ "name": name });
            showUL(arr);
        })
        $(function () {
            showUL(arr);
        })
        function showUL(arr) {
            var leftstr = "";
            var rightstr = "";
            for(let i in arr) {
                let { id, name, check } = arr[i];
                if (check) {
                    rightstr += `
                     <li _id="${id}">${name}</li>
                `
                } else {
                    leftstr += `
                     <li _id="${id}">${name}</li>
                `
                }

            }
            $("#left_ul").html(leftstr);
            $("#right_ul").html(rightstr);
        }


        $("#left_ul").on("click", "li", function () {
            let index = arr.findIndex((v) => {
                return v.id == $(this).attr("_id");
            })

            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                arr[index].check = false;
            } else {
                $(this).addClass('active');
                arr[index].check = true;
            }
        });
        $("#right_ul").on("click", "li", function () {
            let index = arr.findIndex((v) => {
                return v.id == $(this).attr("_id");
            })

            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                arr[index].check = true;
            } else {
                $(this).addClass('active');
                arr[index].check = false;
            }
        });
        $("#btn_right").click(function () {
            if ($("#left_ul .active").length == 0) return false;

            showUL(arr);
        })
        $("#btn_left").click(function () {
            if ($("#right_ul .active").length == 0) return false;
        
            showUL(arr);
        })       
    </script>

最后的最后各位铁汁们走过路过不要错过给我留下一个小小的赞！！！