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 添加和移除函数的通用方法
Oct 20 Javascript
javascript 浏览器检测代码精简版
Mar 04 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue中的scope使用详解
Oct 29 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
JS中一些高效的魔法运算符总结
May 06 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实现MySQL更新记录的代码
2008/06/07 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
JavaScript Accessor实现说明
2010/12/06 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Django 多环境配置详解
2019/05/14 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
煤矿安全生产标语
2014/06/06 职场文书
语文教育专业求职信
2014/06/28 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
个人合作协议范本
2015/08/06 职场文书
体育部部长竞选稿
2015/11/21 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书