Jquery实现Div上下移动示例

复制代码 代码如下:
$(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实现按键盘方向键翻页特效
• jQuery实现用方向键控制层的上下左右移动
• jQuery拖动div、移动div、弹出层实现原理及示例
• 基于jquery的用鼠标画出可移动的div
• jQuery实现div跟随鼠标移动
• 移动端jQuery修正Web页面滑动时div问题的两则实例
• jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
• jquery使用animate方法实现控制元素移动
• jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】