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

    源码下载:点击下载

  • 相关阅读:
    JAVA基础——编程练习(二)
    JAVA基础——面向对象三大特性:封装、继承、多态
    JVM内存
    50. Pow(x, n) (JAVA)
    47. Permutations II (JAVA)
    46. Permutations (JAVA)
    45. Jump Game II (JAVA)
    43. Multiply Strings (JAVA)
    42. Trapping Rain Water (JAVA)
    41. First Missing Positive (JAVA)
  • 原文地址:https://www.cnblogs.com/waitingbar/p/4453363.html
Copyright © 2011-2022 走看看