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 类型判断代码分析
Mar 28 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
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数据库安装图文教程)
2010/04/28 PHP
PHP 数组基础知识小结
2010/08/20 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
临床医学专业毕业生的自我评价
2013/10/17 职场文书
资料员岗位职责
2013/11/17 职场文书
找工作最新求职信
2013/12/22 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
费用申请报告范文
2015/05/15 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫