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);
}
});
});
});

赞 (0)

相关推荐

  • jQuery操作Select的Option上下移动及移除添加等等

    复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**

  • jquery实现tr元素的上下移动示例代码

    复制代码 代码如下: <html> <head> <title></title> <style type="text/css" > table { background:#949494; width:400px; line-height:20px;} td { border-right:1px solid gray; border-bottom:1px solid gray; } </style> <scri

  • jquery实现列表上下移动功能

    jquery实现列表上下移动功能

    废话少说,我们开始进入主题. 今天我们实现的是一个列表页面上移.下移功能.如图: 当勾选列表中的列时,点击上移或者下移,会动态上移或者下移. html代码如下: <div> <input type="button" onclick="up();" value=" 上移 "> <input type="button" onclick="down();" value="

  • 基于jQuery实现文本框缩放以及上下移动功能

    想让你的网页更加的炫酷,想让你的留言评论更加的具有互动性吗,那么请仔细研究下本代码吧. jQuery代码: 复制代码 代码如下: $(function(){           var $comment = $('#comment');           $('.bigger').click(function(){               if(!$comment.is(":animated")){                   if($comment.height() &

  • Jquery实现上下移动和排序代码

    Jquery实现上下移动和排序代码

    提出问题: 下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下. 解决问题 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • jQuery实现table中的tr上下移动并保持序号不变的实例代码

    jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

  • jQuery实现表格行上下移动和置顶效果

    我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现表格数据排序. HTML 页面上是一个简单的数据表格,我们在数据行中分别放置"上移","下移"和"置顶"三个链接,并且分别定义三个class属性,我们来通过jQuery实现这些操作. <table class="table"> <tr> <

  • 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; $("

  • JavaScript和JQuery获取DIV值的方法示例

    JavaScript和JQuery获取DIV值的方法示例

    本文实例讲述了JavaScript和JQuery获取DIV值的方法.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jquery div拖动效果示例代码

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • jquery下div 的resize事件示例代码

    这是某位大神写的jquery下div 的resize事件. 复制代码 代码如下: //resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "

  • jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】

    jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】

    本文实例讲述了jQuery实现DIV响应鼠标滑过由下向上展开效果.分享给大家供大家参考,具体如下: 鼠标浮动时div由下向上缓慢展开效果 1. 演示效果(鼠标浮动时div由下向上展开,浮动后div由上向下折叠恢复原样) 2. 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery响应鼠标实现div由下向上展开</

  • jquery实现用户登陆界面(示例讲解)

    jquery实现用户登陆界面(示例讲解)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> var cnresu = false; $(function(){

  • jquery获取div宽度的实现思路与代码

    jquery 获取 DIV的width的语句: 复制代码 代码如下: $("#keleyi_com").width(); 其中keleyi_com为DIV的id. 完整示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • Jquery 自定义动画概述及示例

    animate(params, options) 返回值:jQuery 概述 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS/jQuery实现DIV延时几秒后消失或显示的方法

    本文实例讲述了JS/jQuery实现DIV延时几秒后消失或显示的方法.分享给大家供大家参考,具体如下: 1.最常用的方法(setTimeout): <script language='javascript' type='text/javascript'> $(function () { setTimeout(function () { $("divid").show(); }, 6000); }) </script> 2.第二种方法(delay) jquery

随机推荐