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 ...
随机推荐
- springcloud系列四 搭建服务模块重点讲解
首先这个服务地址:一定不要写错,是自己注册中心开启的地址 如果注意到这些了,可以简单的进行操作,也可以不需要mybatis与数据库连接,在controller里直接返回相应的数据可以了,不用这么幸苦的 ...
- Java实现微信小程序支付(支付,提现,退款)
1.添加WXpayCommon类用以具体实现功能,代码如下: package com.karat.cn.wxCommon; import java.io.IOException; import jav ...
- Unity 移动 和 旋转 [小结]
[移动] Position: 说明: 直接修改位置数据 Translate: 说明: [匀速]朝着一个方向,一直移动. (dir * speed 可以控制速度)适合键盘控制物体上下左右运动 函数: ...
- 【笔记】Django基础(一)
---恢复内容开始--- [笔记]Django基础(一) oldboy Django 一 关于Python框架的本质 1. HTTP协议消息的格式: 请求(request) 请求方法 路径 HTTP ...
- ORM模型简介
ORM模型简介 1>什么是ORM? ORM,即 Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在操作具体的 ...
- 服务器报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配置参数后 ...
- Murano Weekly Meeting 2016.08.02
Meeting time: 2016.August.02 1:00~2:00 Chairperson: Valerii Kovalchuk, from Mirantis Meeting summar ...
- (转)AIX 5.3安装SSH .
AIX 5.3安装SSH . 原文:http://blog.csdn.net/chunhua_love/article/details/12004845 环境:OS:AIX 5.3SSH: opens ...
- LeetCode 887.鸡蛋掉落(C++)
每个蛋的功能都是一样的,如果一个蛋碎了,你就不能再把它掉下去. 你知道存在楼层 F ,满足 0 <= F <= N 任何从高于 F 的楼层落下的鸡蛋都会碎,从 F 楼层或比它低的楼层落下的 ...
- WebGL 踩坑系列-1
WebGL 中的一些选项WebGL 中开启颜色混合(透明效果) gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALP ...