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

源碼下載：點擊下載