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的垂直拖拽(并取到当前拖拽对象)的更多相关文章

  1. jquery、js获取table,遍历输出tr中各个td的内容。

    首先,依赖jquery.. $('#btntb').click(function(){ $('#tab tr').each(function(i){ // 遍历 tr $(this).children ...

  2. jquery and js 判断一个元素是否存在

    一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...

  3. js 利用jquery.gridly.js实现拖拽并且排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  5. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  6. jquery.dragsort.js 实现拖拽过程遇到的问题

    .在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...

  7. javascript table排序之jquery.tablesorter.js

    table排序 jquery.tablesorter.js 一.Demo下载地址: 1.tablesorter.js下载地址: http://download.csdn.net/detail/zhan ...

  8. js实现table排序(jQuery下的jquery.sortElements)

    项目中要实现table排序的功能. 网上有非常多解决方式,非常多都基于jQuery. jquery.tablesorter.大小17KB.只是他的首页在ie10下兼容性有点问题. DataTables ...

  9. 报表生成(POI,jquery.table2excel.js,Echarts)

    最近公司要弄个报表相关的功能,话不多说,先上图 前一种是POI 生成的,后一种是Echarts生成的.报表我想大家都不陌生,基本上在公司业务中都会使用到.先说说POI,jquery.table2exc ...

随机推荐

  1. docker的常用操作

    查看所有的镜像: docker images 查看所有的容器: docker ps -a 查看正在运行的容器: docker ps 移除容器: docker rm -f 容器id 移除镜像: dock ...

  2. IT网址大全

    图像处理 [素材]   在线作图 [素材]   思缘设计论坛 [素材]   ps联盟 [素材]   ps学习网 [素材]   ps教程论坛 [素材]   ps爱好者 [素材]   46ps [素材] ...

  3. window 系统 修改服务器远程登录端口

    window 系统 [ 默认3389远程端口 ] 快捷键:Ctrl+R  然后输入“regedit”,打开注册表 或者 单击左下角[开始]——[运行],然后在输入框输入 regedit,点击确定,打开 ...

  4. Photoshop入门教程(二):暂存盘设置与标尺设置

    新建文档之后大家就可以对图像进行编辑.在对图像进行编辑之前,先来了解一下如何查看图像的一些基本信息.在软件左下角,会有这样的信息显示窗口. 1窗口表示当前图像显示比例,200%代表当前为放大两倍显示. ...

  5. Tcpdump命令抓包详细分析

    1 起因 前段时间,一直在调线上的一个问题:线上应用接受POST请求,请求body中的参数获取不全,存在丢失的状况.这个问题是偶发性的,大概发生的几率为5%-10%左右,这个概率已经相当高了.在排查问 ...

  6. arraylist和linkedlist内部的实现大致是怎样的

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList优于LinkedList,因为ArrayList可以随 ...

  7. java动态数组笔记

    动态数组: 在java.lang.reflect包下提供了Array类,包括一系列static方法,通过这些方法可动态的创建数组.给元素赋值.取出元素值等等 //理解数组引用——下面定义的objs数组 ...

  8. my05_mysql检查点简述

    简单描述一下mysql 检查点,对mysql数据库恢复的理解有所帮助. 数据库版本 mysql> select version(); +-----------+ | version() | +- ...

  9. 浏览器存储localStorage、sessionStorage、cookie

    localStorage和sessionStorage浏览器支持IE8+(测试IE8不行): localStorage:用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除 session ...

  10. java——重载解析、静态绑定、动态绑定

    重载解析: a被声明为A类型的对象,调用method()方法时,如果有多个同名方法,参数不同,编译器将列举所用类A的method()方法和所用父类中public类型的method()方法,编译器查看这 ...