Jquery實現(xiàn)Div上下移動示例
更新時間：2014年04月23日 16:05:13 作者：
這篇文章主要介紹了Jquery如何實現(xiàn)Div上下移動,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
$(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("只能選擇一項進(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("只能選擇一項進(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 組合form元素為json格式,asp.net反序列化
Jquery組合form元素為json格式,asp.net反序列化實現(xiàn)代碼，大家可以具體的看下面的說明。2009-07-07
jquery 操作DOM案例，實現(xiàn)圖片的顯示，需要的朋友可以參考下2012-04-04
jquery實現(xiàn)簡單合攏與展開網(wǎng)頁面板的方法
這篇文章主要介紹了jquery實現(xiàn)簡單合攏與展開網(wǎng)頁面板的方法,通過簡單的jquery頁面元素樣式操作實現(xiàn)展開與合攏面板的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
本文主要介紹了JQuery的基本知識，如：jquery內(nèi)置函數(shù)，JQuery對象，Dom對象，jquery選擇器，jquery的迭代，jquery的節(jié)點遍歷等等，有助于對JQuery基本知識的學(xué)習(xí)與鞏固。需要的朋友可以參考下2016-12-12
以前寫過一篇文章以jquery為基礎(chǔ)的星星評分，今天有時間把這個功能重寫，并以jQuery插件的形式出現(xiàn)以便以后使用。2011-08-08
基于jQuery.Hz2Py.js插件實現(xiàn)的漢字轉(zhuǎn)拼音特效
jQuery.Hz2Py.js插件實現(xiàn)的漢字轉(zhuǎn)拼音是一款很實用的在線轉(zhuǎn)換功能，此插件已經(jīng)把漢字打包成一個插件庫，調(diào)用的時間很簡單，只調(diào)用一個方法就可以實現(xiàn)轉(zhuǎn)換了2015-05-05
這篇文章為大家分享了超漂亮的jQuery圖片輪播特效，支持Ajax加載數(shù)據(jù)，響應(yīng)式布局，支持移動端觸屏，功能強(qiáng)大，感興趣的小伙伴們可以參考一下2015-11-11
基于jquery的監(jiān)控數(shù)據(jù)是否發(fā)生改變
在實際開發(fā)中經(jīng)常會遇到數(shù)據(jù)沒發(fā)生改變是，由于用戶不小心點擊保存，這樣導(dǎo)致數(shù)據(jù)庫的日志增大；還有數(shù)據(jù)填寫好后，忘了添加保存直接關(guān)閉頁面離開。2011-04-04
基于jquery實現(xiàn)漂亮的動態(tài)信息提示效果
這個效果是在頁面頭部出現(xiàn)的，出現(xiàn)一下會自動隱藏，上面有x那個提示就要手動關(guān)閉一下，其他的都是自動隱藏的！2011-08-08
jquery實現(xiàn)的鼠標(biāo)懸停圖片自動輪播效果，當(dāng)把鼠標(biāo)懸停到圖片時，圖像就會不斷循環(huán)播放，速度非常快，效果非常逼真，就和在放武俠片一樣，使用了jquery實現(xiàn)2015-08-08