Jquery Div上下移动

最新推荐文章于 2022-06-12 17:20:24 发布

xf_scce

最新推荐文章于 2022-06-12 17:20:24 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 移动

本文链接：https://blog.youkuaiyun.com/xf_scce/article/details/24328357

本文介绍了一种使用jQuery实现的列表项拖拽排序功能，通过点击'上移'和'下移'按钮来调整列表中项目的顺序。该方法限制每次只能选择一个项目进行操作，并确保操作符合列表边界条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  $(this).ready(function() {
        $(".up").each(function() {
            $(this).click(function() {
                var $tr = $(this).parents("li");
                if ($tr.index() != 0) {
                    $tr.prev().before($tr);
                }
            });
        });
        var trLength = $(".down").length;
        $(".down").each(function() {
            $(this).click(function() {
                var $tr = $(this).parents("li");
                if ($tr.index() != trLength) {
                    $tr.next().after($tr);
                }
            });
        });
        $("a[name='up']").click(function() {
            if ($("input[name='rule']:checked").size() > 1) {
                alert("只能选择一项进行上下移操作！");
                return;
            }
            $("input[name='rule']:checked").each(function() {
                var $div = $('#rule_' + $(this).val());
                if ($div.index() != 0) {
                    $div.prev().before($div);
                }
            });
        });
        $("a[name='down']").click(function() {
            if ($("input[name='rule']:checked").size() > 1) {
                alert("只能选择一项进行上下移操作！");
                return;
            }
            $("input[name='rule']:checked").each(function() {
                var $div = $('#rule_' + $(this).val());
                if ($('#rule_' + (parseInt($(this).val()) + 1)).html() != null) {
                    $div.next().after($div);
                }
            });
        });
    });