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表格行拖动排序,添加了回调功能的更多相关文章

  1. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  2. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  3. 原生js去除行内样式

    概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...

  4. 原生JS和jQuery版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  5. RecyclerView实现拖动排序和滑动删除功能

    RecyclerView 的拖动排序需要借助一下 ItemTouchHelper 这个类,ItemTouchHelper 类是 Google 提供的一个支持 RecyclerView 滑动和拖动的一个 ...

  6. 原生js代码挑战之动态添加双色球

    var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...

  7. 原生js实现删除class和添加class

    内容来自百度搜索 //判断样式是否存在 function hasClass(ele, cls) {     return ele.className.match(new RegExp("(\ ...

  8. 【学习】原生js学习笔记1:添加class和使input为不可用

    <input type="checkbox" id="new_check" onChange="noUse()" checked> ...

  9. 【封装函数】原生js 获取行内外联样式-兼容IE

    var dom=document.getElementsByTagName("div")[0]; console.log(getStyle(dom,"padding-to ...

随机推荐

  1. 找回Android studio的帮助文档

    对于业余写点小程序,自娱自乐的我来说,写程序过程的帮助文档非常重要,毕竟不是专业人士.用Visual Studio时,习惯于光标一移到一个类或对象上面,马上出现相应的帮助文档(如图) studio的帮 ...

  2. Docker+Nginx+Keepalived实现架构高可用

    一.背景 通过keepalived实现nginx高可用,由于在家不想弄多台主机来搞,所以将运行环境用docker封装来模拟跨主机 docker基础镜像:centos 说之前,简单介绍一下: Keepa ...

  3. 获取当前网页的绝对URL地址

    通过创建一个虚拟的<a></a>元素,将它的href指定为相对URL,再读取它的href就会得到绝对URL. var getAbsoluteUrl = (function() ...

  4. 指令创建 Express Node.js 项目

    1.安装 Express 1.1 安装 Express 框架 首先保证已经安装过了 Node.js,然后进入终端使用管理员身份来安装 Express 框架. # 安装 express $ sudo n ...

  5. 搭建web之 服务器鉴权失败,请确认服务器已启用密码鉴权并且账号密码正确?

    实例化时,登录过程中出现 服务器鉴权失败! 这是由于密码错误所致! 第一种情况:原始随机密码 第一种情况,你没有修改密码,则可以直接查找原始密码: 过程详见官网 使用密码登录的前提条件 密码: 若用户 ...

  6. 安卓自己定义View进阶-Path基本操作

    版权声明:本人全部文章均採用 [知识共享 署名-非商业性使用-禁止演绎 4.0 国际 许可协议] 转载前请保证理解此协议,原文出处 :http://www.gcssloop.com/#blog htt ...

  7. Egret 4.x 和 5.x 项目共存的方法

    正常来说,安装了对应的引擎之后,4.x的项目和5.x的项目是各自编译互相不影响的. 但是由于引擎的bug,我在实际使用中,出现了编译5.x的项目正常,之后切换到4.x的项目编译时,显示正常编译完毕,但 ...

  8. [k8s] flexvolume workflow

  9. XSS跨站脚本小结(转)

    原文链接:http://www.cnblogs.com/xiaozi/p/5588099.html#undefined XSS漏洞验证经常遇到一些过滤,如何进行有效验证和绕过过滤呢,这里小结一下常见的 ...

  10. [Memcached] telnet命令

    一:连接命令 在windows下的cmd或者Linux执行 telnet 127.0.0.1 11211 (如果此处报错"telnet不是内部或外部命令",一定是没有安装telne ...