快捷導(dǎo)航

Jquery實(shí)現(xiàn)Div上下移動(dòng)示例

更新時(shí)間：2014年04月23日 16:05:13 作者：

這篇文章主要介紹了Jquery如何實(shí)現(xiàn)Div上下移動(dòng),需要的朋友可以參考下

 
$(this).ready(function() { 
$(".up").each(function() { 
$(this).click(function() { 
var $tr = $(this).parents("li"); 
if ($tr.index() != 0) { 
$tr.prev().before($tr); 
} 
}); 
}); 
var trLength = $(".down").length; 
$(".down").each(function() { 
$(this).click(function() { 
var $tr = $(this).parents("li"); 
if ($tr.index() != trLength) { 
$tr.next().after($tr); 
} 
}); 
}); 
$("a[name='up']").click(function() { 
if ($("input[name='rule']:checked").size() > 1) { 
alert("只能選擇一項(xiàng)進(jìn)行上下移操作！"); 
return; 
} 
$("input[name='rule']:checked").each(function() { 
var $div = $('#rule_' + $(this).val()); 
if ($div.index() != 0) { 
$div.prev().before($div); 
} 
}); 
}); 
$("a[name='down']").click(function() { 
if ($("input[name='rule']:checked").size() > 1) { 
alert("只能選擇一項(xiàng)進(jìn)行上下移操作！"); 
return; 
} 
$("input[name='rule']:checked").each(function() { 
var $div = $('#rule_' + $(this).val()); 
if ($('#rule_' + (parseInt($(this).val()) + 1)).html() != null) { 
$div.next().after($div); 
} 
}); 
}); 
}); 

您可能感興趣的文章:

相關(guān)文章

jQuery的Each比JS原生for循環(huán)性能慢很多的原因
這篇文章主要介紹了jQuery的Each比JS原生for循環(huán)性能慢很多的原因的相關(guān)資料,需要的朋友可以參考下
2016-07-07
jQuery實(shí)現(xiàn)新聞播報(bào)滾動(dòng)及淡入淡出效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)新聞播報(bào)滾動(dòng)及淡入淡出效果,結(jié)合實(shí)例形式分析了基于jQuery插件的頁(yè)面元素動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2018-03-03
jquery 1.4.2發(fā)布！主要是性能與API
沒(méi)想到j(luò)query這次居然更新這么快，jquery1.4的教程我還沒(méi)有發(fā)二周，jquery1.4.2就發(fā)布了。這次jquery1.4.2更新的內(nèi)容主要是性能和新增了一些新的API。
2010-02-02
jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹(shù)形插件zTree的具體使用技巧,需要的朋友可以參考下
2017-03-03
jQuery中width()方法用法實(shí)例
這篇文章主要介紹了jQuery中width()方法用法,以實(shí)例形式較為詳細(xì)的分析了width()方法獲取元素寬度的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery的end()方法使用詳解
本文給大家分享的是jQuery中的end()的定義和使用方法及示例，非常簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-07-07
jQuery學(xué)習(xí)基礎(chǔ)知識(shí)小結(jié)
jQuery學(xué)習(xí)基礎(chǔ)知識(shí)小結(jié)，剛開(kāi)始學(xué)習(xí)jquery的朋友可以參考下。
2010-11-11
關(guān)于jquery.validate1.9.0前臺(tái)驗(yàn)證的使用介紹
本篇文章介紹了，關(guān)于jquery.validate1.9.0前臺(tái)驗(yàn)證的使用。需要的朋友參考下
2013-04-04
基于Jquery的回車(chē)成tab焦點(diǎn)切換效果代碼(Enter To Tab )
基于Jquery的回車(chē)成tab焦點(diǎn)切換效果代碼(Enter To Tab )，需要的朋友可以參考下。
2010-11-11
通過(guò)jquery的ajax請(qǐng)求本地的json文件方法
今天小編就為大家分享一篇通過(guò)jquery的ajax請(qǐng)求本地的json文件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08