节点移动（JQuery）

节点移动

主要是练习（JQuery）

示例代码

HTML

<h3>节点移动</h3>
    <div id="container">
        <!-- 左边 -->
        <div id="leftmobile">
            <ul id="leftmobile1_1">
                <li>关羽</li>
                <li>张飞</li>
                <li>诸葛亮</li>
                <li>刘备</li>
                <li>曹操</li>
                <li>赵云</li>
                <li>黄忠</li>
                <li>周瑜</li>
                <li>曹植</li>
                <li>孙权</li>
                <li>马超</li>
                <li>孙尚香</li>
            </ul>
        </div>
        <!-- 中间按钮 -->
        <div id="middlebutton">
            <button id="rightshift">点击右移</button>
            <button id="allrightshift">点击全右</button>
            <button id="leftshift">点击左移</button>
            <button id="allleftshift">点击全左</button>
            <button id="moveupward">点击上移</button>
            <button id="movedown">点击下移</button>
        </div>
        <!-- 右边 -->
        <div id="rightmobile">
            <ul id="rightmobile2_2">
                <!-- <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
            </ul>
        </div>
    </div>

CSS（样式）

<style>
        #container {
            width: 800px;
            height: 500px;
            border: 1px dashed rgb(187, 176, 176);
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            margin-top: 4px;
            border-radius: 14px;
        }

        #leftmobile {
            width: 140px;
            height: 300px;
            border: 1px solid rgb(187, 176, 176);
            margin-top: 94px;
            margin-left: 220px;
        }

        #middlebutton {
            margin-top: 94px;
            height: 300px;
            width: 80px;
            border: 1px solid rgb(187, 176, 176);
        }

        #middlebutton>button {
            display: flex;
            margin-top: 23px;
        }

        button {
            margin-left: 5px;
            border-radius: 10px;
            outline: none;
            background-color: rgb(255, 255, 255);
        }

        #rightmobile {
            width: 140px;
            height: 300px;
            border: 1px solid rgb(187, 176, 176);
            margin-top: 94px;
            margin-right: 220px;
        }

        #leftmobile1_1 {
            overflow: scroll;
        }

        #rightmobile2_2 {
            overflow: scroll;
        }

        .insidename {
            background-color: aqua;
        }

        h3 {
            width: 800px;
            margin: 0 auto;
            border: 1px dashed rgb(187, 176, 176);
            text-align: center;
            margin-top: 46px;
            font-size: 24px;
            color: rgb(94, 8