jquery.dad.js实现table的垂直拖拽(并取到当前拖拽对象)
http://sc.chinaz.com/jiaoben/161202572210.htm
1、首先官网实例,实现的都是div为容器的元素拖拽,示例如下:
2、最近的项目,要实现tbody的每一行tr能够拖拽,并记录拖拽的次数
(1)首先:定义html元素(这里就以举个简单的示例)
(2)接着:定义js配置文件
var test=$('.drag-tbody').dad({ target:"tr", //定义要拖拽的DOM对象 })
*****这里的代码有两点需要注意:
(1)$对象:是需要拖拽的对象父容器,我这里需要tbody下的每一行都能拖拽,所以$对象是tbody的class
(2)target参数:应该插件默认为div,如果不设置为‘tr’,tbody下的tr就没有拖拽效果 ps:也可根据项目需求自定义
(3) 现在,tbody下的每一行都可以垂直拖拽了,那还要打印拖动的第几行,往下看:
*****注意项:
(1)callback()是拖拽成功的回调函数
(2)e 是当前拖拽的对象,用find()找到当前拖拽行的第一列(序号)
jquery.dad.js实现table的垂直拖拽(并取到当前拖拽对象)的更多相关文章
- jquery、js获取table,遍历输出tr中各个td的内容。
首先,依赖jquery.. $('#btntb').click(function(){ $('#tab tr').each(function(i){ // 遍历 tr $(this).children ...
- jquery and js 判断一个元素是否存在
一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- jquery.dragsort.js 实现拖拽过程遇到的问题
.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...
- javascript table排序之jquery.tablesorter.js
table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...
- js实现table排序(jQuery下的jquery.sortElements)
项目中要实现table排序的功能. 网上有非常多解决方式,非常多都基于jQuery. jquery.tablesorter.大小17KB.只是他的首页在ie10下兼容性有点问题. DataTables ...
- 报表生成(POI,jquery.table2excel.js,Echarts)
最近公司要弄个报表相关的功能,话不多说,先上图 前一种是POI 生成的,后一种是Echarts生成的.报表我想大家都不陌生,基本上在公司业务中都会使用到.先说说POI,jquery.table2exc ...
随机推荐
- Qt 学习之路 2(25):画刷和画笔
Home / Qt 学习之路 2 / Qt 学习之路 2(25):画刷和画笔 Qt 学习之路 2(25):画刷和画笔 豆子 2012年11月5日 Qt 学习之路 2 17条评论 前面一章我们提 ...
- Mybatis学习笔记(四) —— SqlMapConfig.xml配置文件
一.properties(属性) SqlMapConfig.xml可以引用java属性文件中的配置信息 在config下定义db.properties文件,如下所示: db.properties配置文 ...
- asp.net mvc AjaxHelper 获取 JSON 的方法
默认的 AjaxHelper 没有提供获取 JSON 的方法,只提供获取 html 然后更新指定元素的方法,不过,经测试发现还是有办法的,由于 AjaxOptions 对象的 OnSuccess 属性 ...
- 字符串 Instant 互转
Instant inst = Instant.now(); System.out.println(inst);//2018-05-15T02:27:09.909Z String s1 = s.subs ...
- linux开机启动服务学习chkconfig命令
选项: --add:增加所指定的系统服务,让chkconfig指令得以管理它,并同时在系统启动的叙述文件内增加相关数据: --del:删除所指定的系统服务,不再由chkconfig指令管理,并同时在系 ...
- Linux7.3 glib-2.49安装记录
由于 Linux系统较新,所在glib选择了较新的glib-2.49,安装过程遇到颇多错误,这里只记录正确的成功的安装记录. # rpm -q ncurses readline lua libffi ...
- math.random()方法的使用
一:导言 以前总是被数字的范围正则搞的头大,在此总结了一下 二:用法 Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: ...
- socket阻塞与非阻塞情况下的recv、send、read、write返回值 以及epool_wait返回值学习
https://www.cnblogs.com/longingforlife/p/3289976.html
- 大型分布式java应用与SOA
1.基于消息方式.远程调用方式的架构带来的问题: 1.1 系统多元化的问题 [解决]: 对共用逻辑部分进行抽象: 1.2 系统访问量.数据量上涨后带来的问题 [解决]: 拆分系统: 1.3 在构建共用 ...
- java编程--02日期格式化
第一篇,介绍日期的比较 第二篇,介绍日期的格式化 第三篇,介绍关于日期常用的计算 第四篇,比较几个常用的日期时间相关类的区别 第五篇,jdk9对日期类进行了更新,写一些i自己的学习心得. 日期的格式化 ...