jquery的移动节点

最新推荐文章于 2022-05-01 22:05:59 发布

Endless-love

最新推荐文章于 2022-05-01 22:05:59 发布

阅读量365

点赞数

分类专栏：前端关于前端的技术探讨文章标签： jquery

本文链接：https://blog.csdn.net/Stay_Hungry_Stay/article/details/81192754

版权

关于前端的技术探讨同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

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>

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

Endless-love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的移动节点

jquery的移动节点jquery-3.3.1.js&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;Document&lt;/title&gt;&lt;script src="js/jquery-
复制链接

扫一扫