用jQuery方法写：点击盒子里面的内容点击跳转第一个盒子内容跑到到另一个盒子

点击左面的盒子里面的任意一个内容，点击下面的跳转，左边盒子内容就会跑到另一个盒子里面，点击全部跳转，全部内容都跑到另外一个盒子，两者都可来回

开头先引入jquery.js

<script src="./js/jquery-3.6.1.js"></script>

css代码片段：

        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            height: 40px;
            line-height: 40px;
            list-style: none;
            border: 1px solid pink;
            text-align: center;
            background-color: rgb(249, 150, 139);
        }
        
        .box {
            display: flex;
            flex-direction: row;
            width: 500px;
            height: 300px;
        }
        
        ul {
            margin: 20px;
            flex: 1;
            background-color: salmon;
        }
        
        .menu {
            width: 500px;
            height: 30px;
            display: flex;
        }
        
        button {
            width: 80px;
            height: 30px;
            flex: 1;
            margin: 5px;
            line-height: 30px;
            text-align: center;
        }
        
        .active {
            background-color: aqua;
        }

html片段：

    <div class="container">
        <div class="box">
            <ul>
                <li>葡萄</li>
                <li>樱桃</li>
                <li>橘子</li>
                <li>甘蔗</li>
            </ul>
            <ul></ul>
        </div>
        <div class="menu">
            <button class="leftAll"><<</button>
            <button class="left"><</button>
            <button class="right">></button>
            <button class="rightAll">>></button>
        </div>
    </div>

jquery片段：

        $(function() {
            $('li').click(function() {
                $(this).addClass('active');
            });
            $('.right').click(function() {
                $('ul').last().append($('ul').first().children('li[class="active"]'));
                $('ul').last().children().removeClass('active');
            });
            $('.rightAll').click(function() {
                $('ul').last().append($('ul').first().children());
            });

            $('.left').click(function() {
                $('ul').first().append($('ul').last().children('li[class="active"]'));
                $('ul').first().children().removeClass('active');
            });
            $('.leftAll').click(function() {
                $('ul').first().append($('ul').last().children());
            });
        });