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. Geek/Git中文怎么读

    Geek怎么读 英[gi:k] = gay客 = 给客 Git怎么读 英[gɪt] = gay 特 = 给特 Flux怎么读 英[flʌks] = 佛拉克斯 Redux怎么读 英[ri:'dʌks] ...

  2. 终端下将 man 命令的结果输出到文件保存

    终端下将 man 命令的结果输出到文件保存 在linux或mac下,当我们使用man命令查看某一个命令的详细帮助说明信息时: 可能终端的显示效果不是那么方便: 那么我们可以将man命令的结果输出到tx ...

  3. linux下安装EJBCA 搭建私有CA服务器

    linux下安装EJBCA 搭建私有CA服务器 EJBCA是一个全功能的JAVA的CA系统软件,我们可以用此搭建私有CA服务器: 一:首先我的测试环境: 1.  linux mint18.3 62位: ...

  4. 关于Discuz! X系列远程代码执行漏洞

    一.漏洞起源 突然有同事反馈,无法注册 看到这里不了解的同行估计一年懵逼,这里也是常用的漏洞攻击,可以肯定的是  badwords.php文件被修改了 ,可以查看这个文件内容 <?php $_C ...

  5. std::nothrow 的使用心得

    std::nothrow 意思是说,不要跑出异常,改为返回一个nullptr. 一般的使用场景是,建议new的时候使用,避免使用try-catch来捕捉异常. 比如: float m_words = ...

  6. Centos-7.x 下子网掩码的配置

    [背景] 今天在自己的虚拟机上安装上了centos-7.6操作系统,应该是安装的过程中大意了:安装完成后虚拟机可以正常访问外网但是 我的笔记本连接不上虚拟机. 笔记本的IP地址:172.16.192. ...

  7. crawler_exa1

    编辑中... #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqma ''' 网页爬虫,版本 2017-09-20 21:16 ' ...

  8. Win10 15063 开始运行不保存历史记录原因和解决方法

    http://www.ampc8.com/thread-23421-1-1.html 在Win10 1703的时候你也许会发现开始运行以后,再次打开就没有任何历史记录了,常规方法是桌面-右键-个性化- ...

  9. oracle去掉字符串中所有指定字符

    Select Replace(字段名,'指定字符','替换字符') From 表名 --例: select replace('de.5d','.','') from dual --显示结果:de5d ...

  10. elasticsearch 一、环境配置

    简介 ElasticSearch是一个开源的分布式搜索引擎,具备高可靠性,支持非常多的企业级搜索用例,是基于Lucene构建的.支持时间时间索引和全文检索.官网:http://www.elastics ...