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

源码下载：点击下载