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

    源码下载:点击下载

  • 相关阅读:
    接口-DAO模式代码阅读及应用
    3.1-有理数类的设计

    树、二叉树、查找算法总结
    编辑器、编译器、文件、IDE等常见概念辨析
    二叉排序树
    markdown的一些语法
    数据结构小结(线性表)
    springMVC model传对象数组 jq 获取
    java.sql.SQLException: Data truncated for column 'lastSeason' at row 1
  • 原文地址:https://www.cnblogs.com/waitingbar/p/4453363.html
Copyright © 2011-2022 走看看