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. TestNG+ExtentReports生成超漂亮的测试报告(转)

    一个优雅.漂亮的测试报告,能够给我们的测试工作带来不少的加分,而报告的模版实在是让我们这些技术人员头疼的问题,设计的实在是没有什么美感. 那么今天就给大家分享一个自动化测试中,一个超漂亮的测试报告模版 ...

  2. hdu1028 Ignatius and the Princess III(递归、DP)

    Ignatius and the Princess III Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ...

  3. 解决:安装Jenkins时web界面出现该jenkins实例似乎已离线

    很久没有安装jenkins了,因为之前用的的服务器一直正常使用,令人郁闷的是,之前用jenkins一直没出过这个问题. 令人更郁闷的是,我尝试了好多个历史版本和最新版本,甚至从之前的服务器把jenki ...

  4. JS电话、手机号码验证

    function isTelephone(inpurStr) {            var partten = /^0(([1,2]\d)|([3-9]\d{2}))-\d{7,8}$/;     ...

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

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

  6. Ancoda 下的python多版本共存

    Ancoda 下的python多版本共存 virtualenv python 多版本共存 Pip, Virtualenv 和Fabric 被称为python 的三大神器,Pip 是包管理工具,Virt ...

  7. VS2015+NUnit+OpenCover 完成单元测试代码覆盖率测试

    1.VS2015+NUnit+OpenCover 完成单元测试代码覆盖率测试 https://download.csdn.net/download/qq_39441918/10522539 2.*注意 ...

  8. mgo03_linux7上安装mongo4.0

    下载地址https://www.mongodb.com/download-center#community tar -xvf mongodb-linux-x86_64-rhel70-4.0.0.tgz ...

  9. Python3 PIL Image 操作文件后导致占用问题

    需求:按图片分辨率范围分类图片(每个商品有N张图片在一个目录内). 实现:用PIL Image打开图片并读取宽度和高度.然后按不同分辨率存档到不同目录. 问题:从原有目录移动到目标目录时出现 “Per ...

  10. SpringBoot初始教程之Servlet、Filter、Listener配置详解

    1.介绍 通过之前的文章来看,SpringBoot涵盖了很多配置,但是往往一些配置是采用原生的Servlet进行的,但是在SpringBoot中不需要配置web.xml的 因为有可能打包之后是一个ja ...