jquery實現標籤上移、下移、置頂

eg:如在後臺的標籤列表中，實現上移、下移、置頂功能

 

思路：

一、先用到的克隆方法.clone(true):

     即把當前要移動的項先保存好，備於後用。

二、找到當前標籤所對應的相關元素及其相關方法：

    如：.prev()當前元素上面的標籤

         .next()當前元素下面的標籤

         .after()xxx以後添加方法

         .before()xxx以前添加方法

         .prepend添加方法

三、實現

 

具體代碼如：

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

 

源碼下載：點擊下載