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. shell编程学习笔记(十一):Shell中的while/until循环

    shell中也可以实现类似java的while循环 while循环是指满足条件时,进行循环 示例: #! /bin/sh index=10 while [ $index -gt 0 ] do inde ...

  2. 【原】Linux环境下Shell调用MySQL并实现定时任务

    对于一些周期性事务,我们可以在Linux下,使用shell脚本调用mysql数据库存储过程,并设置定时任务. 本来是要mysql数据库中创建事件任务来,定时执行存储过程,做数据传输的...使用cron ...

  3. Foxmail中配置O365邮箱和Hotmail邮箱

    一.简述 平时我们经常使用第三方的邮箱工具来管理邮箱.可能性能比Outlook好很多,比如Foxmail,而且也能和Skype会议关联的很好.本文就讲如何在Outlook中关联Office365邮箱和 ...

  4. MATLAB 统计元素出现的次数

    可以使用 hist 函数: A = [1 2 8 8 1 8 2 1 8 2 1]; count = hist(A,unique(A)) count的结果与unique(A)对应.

  5. WPF宝典Url

    https://sourceforge.net/directory/os:windows/https://archive.codeplex.com/ https://code.msdn.microso ...

  6. PHP-问题处理验证码无法显示出来

    1.问题 今天重新安装了ubuntu,PHP,MySQL,Apache,到测试CMS项目时发生一个错误: 验证码无法显示出来. 2.解决: 2.1 使用 phpinfo检查: phpinfo(); 在 ...

  7. MySQL利用xtrabackup在线修复或新增从库

    如果数据库的数据量很大,表大小有几十个G,利用mysqldump导出备份会消耗非常长的时间,会对数据库产生不稳定风险,这时可以利用xtrabackup工具在线复制主库文件,利用复制出来的主库文件可以修 ...

  8. Atitit r2017 r6 doc list on home ntpc.docx

    Atitit r2017 r6 doc list on home ntpc.docx 驱动器 D 中的卷是 p2soft 卷的序列号是 9AD0-D3C8 D:\ati\r2017 v4 raf\r2 ...

  9. 【解惑】领略Java内部类的“内部”

    转自:http://www.iteye.com/topic/494230 内部类有两种情况: (1) 在类中定义一个类(私有内部类,静态内部类) (2) 在方法中定义一个类(局部内部类,匿名内部类) ...

  10. Airtest iOS测试环境部署

    [本文出自天外归云的博客园] 简介 这个Airtest IDE是通过iOS-Tagent来操作iPhone的,你可以在Airtest IDE里录制脚本来实现自动化操作iPhone 前提 1. 得有个i ...