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中数组的多种定义方法和常用函数简介
May 09 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
解决option标签selected="selected"属性失效的问题
Nov 06 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
JQuery触发事件例如click
2013/09/11 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
$("").click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
javascript基础知识
2016/06/07 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python 实现selenium断言和验证的方法
2019/02/13 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python使用Matlab命令过程解析
2020/06/04 Python
python 模拟登陆github的示例
2020/12/04 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
安全检查管理制度
2014/02/02 职场文书
模范家庭事迹材料
2014/02/10 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
社区服务活动总结
2014/05/07 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书