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('亲,现在已是最下的哦,不能再下移了...');
            }
        }
    }

    源码下载:点击下载

  • 相关阅读:
    vue 组件之间的通讯方式
    vue 路由4种传参方式
    vue+axios封装已文件流的形式导出文件
    vue 开发环境正常打包之后背景图片无法访问或者element-ui的icon找不到
    vue 优化webpack引入CND
    microtime() — 返回当前 Unix 时间戳和微秒数
    将一个字符串分隔为组成它的字符
    Laravel 伪静态配置
    VSCode
    array_merge()&array_combine()合并数组函数
  • 原文地址:https://www.cnblogs.com/sprine/p/4682401.html
Copyright © 2011-2022 走看看