jquery的移动节点

jquery-3.3.1.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
    body,ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        float: left;
        width: 100px;
        border: 1px solid #aaa;
        margin: 50px;
    }
    li{
        margin: 10px;
        text-align: center;
        cursor: pointer;
    }
    button{
        float: left;
        margin: 150px 20px;
    }
    div{
        margin: 50px auto;
        height: 500px;
        width: 800px;
    }
    .active{
        background: red;
    }
</style>
</head>
<body>
<div>
    <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
        <li>006</li>
        <li>007</li>
        <li>008</li>
        <li>009</li>
        <li>010</li>
    </ul>
    <button>--></button>
    <button><--</button>
    <ul>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
    </ul>
    </div>
    <script>
    $(function(){
        $('ul').eq(0).find('li').click(function() {
            $(this).toggleClass('active');
        });
        $('ul').eq(1).find('li').click(function() {
            $(this).toggleClass('active');
        });
        $('button').eq(0).click(function() {
            $('ul').eq(0).children('.active').appendTo($('ul').eq(1));
        });
        $('button').eq(1).click(function() {
            $('ul').eq(1).children('.active').appendTo($('ul').eq(0));
        });
    })
    </script>
    </body>
    </html>

实现一个小小的节点移动功能，希望自己能够在编码的道路上不断努力

jquery的移动节点

jquery的移动节点

猜你喜欢