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 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
原生JavaScript实现随机点名表
Jan 14 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获取网站访客的所在地位置
2017/01/18 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
js Map List 遍历使用示例
2013/07/10 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
python的id()函数介绍
2013/02/10 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
浅谈python出错时traceback的解读
2020/07/15 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
水电工岗位职责
2014/02/12 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript