jquery实现节点上下移动

菜方方

于 2022-07-29 14:57:24 发布

阅读量524

点赞数

分类专栏： htmlDemo 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_46872379/article/details/126056022

版权

htmlDemo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jquery实现节点上移、下移</title>
    </head>
    <body>
    <div>
        <div class="item" style="border: 1px solid red;">
            <div style="display: flex;">
                <div class="sort-down">下移</div>
                <div class="sort-asc">上移</div>
            </div>
            <div>
                内容11111
            </div>
        </div>
        <div class="item" style="border: 1px solid blue; text-align: center">
            <div style="display: flex;">
                <div class="sort-down">下移</div>
                <div class="sort-asc">上移</div>
            </div>
            <div>
                内容22222
            </div>
        </div>
        <div class="item" style="border: 1px solid yellow; text-align: right;">
            <div style="display: flex;">
                <div class="sort-down">下移</div>
                <div class="sort-asc">上移</div>
            </div>
            <div>
                内容33333
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
		var value = document.querySelectorAll(".item")
		$(document).on('click', '.sort-down', function () {
			//判断是否有下一个节点
			if ($(this).parents('.item').nextAll().length > 0) {
				$(this).parents('.item').next().after($(this).parents('.item').prop('outerHTML'));
				$(this).parents('.item').remove();
			}
		}).on('click', '.sort-asc', function () {
			//判断是否有上一个节点
			if ($(this).parents('.item').prevAll().length > 0) {
				$(this).parents('.item').prev().before($(this).parents('.item').prop('outerHTML'));
				$(this).parents('.item').remove();
			}
		})
    </script>
    <style>
        .sort-down {
            cursor: pointer;
        }

        .sort-asc {
            cursor: pointer;
        }
    </style>
    </body>
    </html>