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 相关文章推荐
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
详解js中的几种常用设计模式
Jul 16 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 分页分组类
2009/12/10 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
javascript中call和apply方法浅谈
2013/09/27 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
javascript中关于&& 和 || 表达式的小技巧分享
2015/04/10 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
python中__call__内置函数用法实例
2015/06/04 Python
Python实现数据库编程方法详解
2015/06/09 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
pymysql的简单封装代码实例
2020/01/08 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
当当网软件测试笔试题
2015/11/24 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
护理专业推荐信
2013/11/07 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
教师档案管理制度
2014/01/23 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年科协工作总结
2015/05/19 职场文书
2015年数学教师工作总结
2015/05/20 职场文书