Jquery实现Div上下移动示例


Posted in Javascript onApril 23, 2014
$(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); 
} 
}); 
}); 
});
Javascript 相关文章推荐
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
详解Node.js串行化流程控制
May 04 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 #Javascript
JQuery下拉框应用示例介绍
Apr 23 #Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 #Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 #Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 #Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 #Javascript
javascript数字时钟示例分享
Apr 23 #Javascript
You might like
开发大型PHP项目的方法
2006/10/09 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
PHP中的self关键字详解
2019/06/23 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
JavaScript简介
2015/02/15 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python中实现的RC4算法
2015/02/14 Python
Python中endswith()函数的基本使用
2015/04/07 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
简单的命令查看安装的python版本号
2020/08/28 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
房地产推广策划方案
2014/05/19 职场文书
新教师个人总结
2015/02/06 职场文书
医生辞职信范文
2015/03/02 职场文书