這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂?shù)南嚓P(guān)資料,并附上示例，非常實(shí)用，需要的朋友可以參考下

eg:如在后臺(tái)的標(biāo)簽列表中，實(shí)現(xiàn)上移、下移、置頂功能

主要實(shí)現(xiàn)思路是節(jié)點(diǎn)操作，比如說(shuō)：上移，直接把點(diǎn)擊項(xiàng)移動(dòng)到前一個(gè)節(jié)點(diǎn)，以此類(lèi)推，當(dāng)然實(shí)際代碼實(shí)現(xiàn)還要加些判斷，如當(dāng)前點(diǎn)擊操作項(xiàng)是否已經(jīng)是置底或置底了，如果是則給點(diǎn)相應(yīng)提示，好讓操作者知道發(fā)生了什么事情。

思路：

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

即把當(dāng)前要移動(dòng)的項(xiàng)先保存好，備于后用。

2、找到當(dāng)前標(biāo)簽所對(duì)應(yīng)的相關(guān)元素及其相關(guān)方法：

如：.prev()當(dāng)前元素上面的標(biāo)簽

.next()當(dāng)前元素下面的標(biāo)簽

.after()xxx之后添加方法

.before()xxx之前添加方法

.prepend添加方法

3、實(shí)現(xiàn)

具體代碼如：

1. var productsLabel = {  
2. //設(shè)置置頂  
3. setHot: function(t){  
4. var bar = 'showAndHide_box';  
5. var obj = $(t).parents('.'+bar).clone(true);  
6. $(t).parents('.'+bar).remove();  
7. $(".showAndHide_list_box").prepend(obj);  
8. }, 
9.  
10. //設(shè)置上移  
11. setUp: function(t){  
12. var bar = 'showAndHide_box';  
13. if($(t).parents('.'+ bar).prev('.'+bar).html() != undefined){  
14. var obj = $(t).parents('.'+bar).clone(true);  
15. $(t).parents('.'+bar).prev().before(obj);  
16. $(t).parents('.'+bar).remove();  
17. }else{  
18. alert('親，現(xiàn)在已是最上的哦，不能再上移了...');  
19. }  
20. }, 
21.  
22. //設(shè)置下移  
23. setDown: function(t){  
24. var bar = 'showAndHide_box';  
25. if($(t).parents('.'+bar).next('.'+bar).html() != undefined){  
26. var obj = $(t).parents('.'+bar).clone(true);  
27. $(t).parents('.'+bar).next().after(obj);  
28. $(t).parents('.'+bar).remove();  
29. }else{  
30. alert('親，現(xiàn)在已是最下的哦，不能再下移了...');  
31. }  
32. }  
33. } 

以上就是本文給大家分享的全部?jī)?nèi)容了，希望大家能夠喜歡。