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

源码下载:点击下载

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。