手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery实现Div上下移动示例
Jquery实现Div上下移动示例
摘要:复制代码代码如下:$(this).ready(function(){$(".up").each(function(){$(this).cli...

复制代码 代码如下:

$(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("只能选择一项进行上下移操作!");

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("只能选择一项进行上下移操作!");

return;

}

$("input[name='rule']:checked").each(function() {

var $div = $('#rule_' + $(this).val());

if ($('#rule_' + (parseInt($(this).val()) + 1)).html() != null) {

$div.next().after($div);

}

});

});

});

【Jquery实现Div上下移动示例】相关文章:

jQuery实现div随意拖动的实例代码(通用代码)

jquery实现动态改变div宽度和高度

JQuery实现动态添加删除评论的方法

jQuery实现不断闪烁文字的方法

基于jQuery实现的无刷新表格分页实例

jQuery插件实现适用于移动端的地址选择器

javascript实现图片跟随鼠标移动效果的方法

JQuery+CSS实现图片上放置按钮的方法

jquery读取xml文件实现省市县三级联动的方法

js实现带按钮的上下滚动效果

精品推荐
分类导航