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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue路由跳转传参数的方法
May 06 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python列表推导式操作解析
2019/11/26 Python
python实现超级玛丽游戏
2020/03/18 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
python如何使用腾讯云发送短信
2020/09/17 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
消防安全检查制度
2014/02/04 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2015年个人思想总结
2015/03/09 职场文书
运动员入场词
2015/07/18 职场文书
新闻通讯稿模板
2015/07/22 职场文书
外出培训学习心得体会
2016/01/18 职场文书
初二物理教学反思
2016/02/19 职场文书