zoukankan      html  css  js  c++  java
  • jquery实现标签上移、下移、置顶

    eg:如在后台的标签列表中,实现上移、下移、置顶功能

    思路:

    1、先用到的克隆方法.clone(true):

         即把当前要移动的项先保存好,备于后用。

    2、找到当前标签所对应的相关元素及其相关方法:

        如:.prev()当前元素上面的标签

             .next()当前元素下面的标签

             .after()xxx之后添加方法

             .before()xxx之前添加方法

             .prepend添加方法

    3、实现

    具体代码如:

    var productsLabel = {
        //设置置顶
        setHot: function(t){
            var bar = 'showAndHide_box';
            var obj = $(t).parents('.'+bar).clone(true);
            $(t).parents('.'+bar).remove();
            $(".showAndHide_list_box").prepend(obj);
        },

        //设置上移
        setUp: function(t){
            var bar = 'showAndHide_box';
            if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){
                var obj = $(t).parents('.'+bar).clone(true);
                $(t).parents('.'+bar).prev().before(obj);
                $(t).parents('.'+bar).remove();
            }else{
                alert('亲,现在已是最上的哦,不能再上移了...');
            }
        },

        //设置下移
        setDown: function(t){
            var bar = 'showAndHide_box';
            if($(t).parents('.'+bar).next('.'+bar).html() != undefined){
                var obj = $(t).parents('.'+bar).clone(true);
                $(t).parents('.'+bar).next().after(obj);
                $(t).parents('.'+bar).remove();
            }else{
                alert('亲,现在已是最下的哦,不能再下移了...');
            }
        }
    }

    源码下载:点击下载

  • 相关阅读:
    .net core2.0 中使用aspectcore实现aop
    [Superset] 设置Superset的登录设置
    [Python]Pandas对于非唯一的label index的数据选择问题
    Data Science Radar测试结果
    [R]R包版本更迭【持续更新】
    [面试] 删除多余的数组内容
    [Python]Python中的包(Package)
    [Linux] 使用Yum在CentOS上安装MySQL
    [pyMongo]insert_many的Bulkwrite实现机制
    [Git]2018-10 解决git cmd中文乱码问题
  • 原文地址:https://www.cnblogs.com/sprine/p/4682401.html
Copyright © 2011-2022 走看看