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. springcloud系列四 搭建服务模块重点讲解

    首先这个服务地址:一定不要写错,是自己注册中心开启的地址 如果注意到这些了,可以简单的进行操作,也可以不需要mybatis与数据库连接,在controller里直接返回相应的数据可以了,不用这么幸苦的 ...

  2. Java实现微信小程序支付(支付,提现,退款)

    1.添加WXpayCommon类用以具体实现功能,代码如下: package com.karat.cn.wxCommon; import java.io.IOException; import jav ...

  3. Unity 移动 和 旋转 [小结]

    [移动]  Position: 说明: 直接修改位置数据  Translate: 说明: [匀速]朝着一个方向,一直移动. (dir * speed 可以控制速度)适合键盘控制物体上下左右运动 函数: ...

  4. 【笔记】Django基础(一)

    ---恢复内容开始--- [笔记]Django基础(一) oldboy Django  一 关于Python框架的本质 1. HTTP协议消息的格式: 请求(request) 请求方法 路径 HTTP ...

  5. ORM模型简介

    ORM模型简介 1>什么是ORM? ORM,即 Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在操作具体的 ...

  6. 服务器报nginx: [warn] conflicting server name "blog.xueyi.com" on 0.0.0.0:80, ignored

    nginx: [warn] conflicting server name "blog.xueyi.com" on 0.0.0.0:80, ignored 修改nginx配置参数后 ...

  7. Murano Weekly Meeting 2016.08.02

    Meeting time: 2016.August.02 1:00~2:00 Chairperson:  Valerii Kovalchuk, from Mirantis Meeting summar ...

  8. (转)AIX 5.3安装SSH .

    AIX 5.3安装SSH . 原文:http://blog.csdn.net/chunhua_love/article/details/12004845 环境:OS:AIX 5.3SSH: opens ...

  9. LeetCode 887.鸡蛋掉落(C++)

    每个蛋的功能都是一样的,如果一个蛋碎了,你就不能再把它掉下去. 你知道存在楼层 F ,满足 0 <= F <= N 任何从高于 F 的楼层落下的鸡蛋都会碎,从 F 楼层或比它低的楼层落下的 ...

  10. WebGL 踩坑系列-1

    WebGL 中的一些选项WebGL 中开启颜色混合(透明效果) gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALP ...