原生JS表格行拖动排序,添加了回调功能
function tableDnD(el, callback) {
if (typeof (el) == "string") {
el = document.getElementById(el);
}
if (el == undefined || el == null) {
return;
}
//绑定事件
var addEvent = document.addEventListener ? function (el, type, callback) {
el.addEventListener(type, callback, !1);
} : function (el, type, callback) {
el.attachEvent("on" + type, callback);
}
//移除事件
var removeEvent = document.removeEventListener ? function (el, type, callback) {
el.removeEventListener(type, callback);
} : function (el, type, callback) {
el.detachEvent("on" + type, callback);
}
//精确获取样式
var getStyle = document.defaultView ? function (el, style) {
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
} : function (el, style) {
style = style.replace(/\-(\w)/g, function ($, $1) {
return $1.toUpperCase();
});
return el.currentStyle[style];
}
var dragManager = {
clientY: 0,
draging: function (e) {//mousemove时拖动行
var dragObj = dragManager.dragObj;
if (dragObj) {
e = e || event; //清除选区
if (window.getSelection) {//w3c
window.getSelection().removeAllRanges();
} else if (document.selection) {
document.selection.empty(); //IE
}
var y = e.clientY;
var down = y > dragManager.clientY; //是否向下移动
var tr = document.elementFromPoint(e.clientX, e.clientY);
if (tr && tr.nodeName == "TD") {
tr = tr.parentNode
dragManager.clientY = y;
if (dragObj !== tr && dragObj.parentNode===tr.parentNode) {
tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr));
}
};
}
},
dragStart: function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.nodeName === "TD") {
target = target.parentNode;
dragManager.dragObj = target;
if (!target.getAttribute("data-background")) {
var background = getStyle(target, "background-color");
target.setAttribute("data-background", background)
}
//显示为可移动的状态
target.style.backgroundColor = "#ccc";
target.style.cursor = "move";
dragManager.clientY = e.clientY;
addEvent(document, "mousemove", dragManager.draging);
addEvent(document, "mouseup", dragManager.dragEnd);
}
},
dragEnd: function (e) {
var dragObj = dragManager.dragObj
if (dragObj) {
e = e || event;
var target = e.target || e.srcElement;
if (target.nodeName === "TD") {
target = target.parentNode;
dragObj.style.backgroundColor = dragObj.getAttribute("data-background");
dragObj.style.cursor = "default";
dragManager.dragObj = null;
removeEvent(document, "mousemove", dragManager.draging);
removeEvent(document, "mouseup", dragManager.dragEnd);
if(typeof(callback)=='function'){
callback(target);
}
}
}
},
main: function (el) {
addEvent(el, "mousedown", dragManager.dragStart);
}
}
dragManager.main(el);
}
//调用:tableDnD(document.getElementById("tbody1"),callback); //参数可以是table的ID或者tbody的ID
原生JS表格行拖动排序,添加了回调功能的更多相关文章
- 原生js实现table的排序
原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 原生js去除行内样式
概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...
- 原生JS和jQuery版实现文件上传功能
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- RecyclerView实现拖动排序和滑动删除功能
RecyclerView 的拖动排序需要借助一下 ItemTouchHelper 这个类,ItemTouchHelper 类是 Google 提供的一个支持 RecyclerView 滑动和拖动的一个 ...
- 原生js代码挑战之动态添加双色球
var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...
- 原生js实现删除class和添加class
内容来自百度搜索 //判断样式是否存在 function hasClass(ele, cls) { return ele.className.match(new RegExp("(\ ...
- 【学习】原生js学习笔记1:添加class和使input为不可用
<input type="checkbox" id="new_check" onChange="noUse()" checked> ...
- 【封装函数】原生js 获取行内外联样式-兼容IE
var dom=document.getElementsByTagName("div")[0]; console.log(getStyle(dom,"padding-to ...
随机推荐
- DockerSwarm获取Token与常用命令
一.Token相关 Join tokens是允许一个节点加入集群的密钥.有两种可用的不同的join tokens,一个是用作worker角色,另一个是用作manager角色.在执行swarm join ...
- n2n的编译和运行、配置
交叉编译: cmake -DCMAKE_TOOLCHAIN_FILE=../cmake/CMakeToolchainFileMingw32.cmake -build ./ ../ 1.n2n 基于p ...
- 一步步教你轻松学K-means聚类算法
一步步教你轻松学K-means聚类算法(白宁超 2018年9月13日09:10:33) 导读:k-均值算法(英文:k-means clustering),属于比较常用的算法之一,文本首先介绍聚类的理 ...
- VS2015 ionic 开发环境配置纪要
1)第一次安装Tools for Apache Cordova不成功,到Options检查依赖项,缺少Node等,重新下载了32为的nodeJs安装.然后运行VS安装程序,卸载Tools for Ap ...
- mysql多实例配置下,用脚本启动mysql时,出现Please read "Security" section of the manual to find out how to run mysqld as root!
[root@localhost 3308]# mysqld stop170414 0:35:28 [Note] --secure-file-priv is set to NULL. Operation ...
- Atitit 最近资料文章列表r9 r8 月份 attilax总结
Atitit 最近资料文章列表r9 r8 月份 attilax总结 atitit tag标签标示规范 attilax总结 v2 r922.docx 2017-09-28 02:04 阅读(27) ...
- [lvs]lvs的三种模式
回顾了下lvs的三种模式的调度机制 1.lvs的dr模式中的arp的抑制,eth用自己口arp回应. 2.keepalive是否直接操作rs? 不直接操作, 只操作dr(配lvs) 3.tunnel模 ...
- 【原创 Hadoop&Spark 动手实践 8】Spark 应用经验、调优与动手实践
[原创 Hadoop&Spark 动手实践 7]Spark 应用经验.调优与动手实践 目标: 1. 了解Spark 应用经验与调优的理论与方法,如果遇到Spark调优的事情,有理论思考框架. ...
- maven添加jetty插件,同时运行多个实例
<plugins> <!-- jetty插件 --> <plugin> <groupId>org.eclipse.jetty</groupId&g ...
- windows下局域网文件共享,不需要登录账号密码
基于局域网中,有时候需要传输一个大的文件都需要用到U盘,很麻烦,所以优选文件共享.但是有时候会出现需要登录账户密码,所以需要设置第三步,步骤如下: 1.选中要共享的文件夹,右键有一个共享选项,点击出现 ...