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. 160多个android开源码汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包含ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...

  2. 命令 上传项目到git中

    点击Clone or dowload会出现一个地址,copy这个地址备用. 接下来就到本地操作了,首先右键你的项目,如果你之前安装git成功的话,右键会出现两个新选项,分别为Git Gui Here, ...

  3. iOS https请求 NSURLSessionDataTask

    // //  YKSHttpsRequest.m //  YKShareSdkDemo // //  Created by qingyun on 22/05/2017. //  Copyright © ...

  4. BABLE 原理

    1.babel转换原理 2.主要过程 (1)babylon进行解析得到AST (2)babel-traverse插件对AST树进行遍历转译得到新的AST树 (3)babel-generator将AST ...

  5. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  6. tp5.0中及其常用方法的一些函数方法(自己看)和技巧(不断添加中)

    1.目录结构 2.路由 3..控制器 4.模型写法 5.视图标签 6.数据库操作 7.表单验证 8.分页 --------------------------- 1.目录结构 project 应用部署 ...

  7. thymeleaf th:href 多个参数传递格式

    今天在使用thymeleaf的th:href传递多个参数的时候困惑了.然后百度了一下,发现没有人注释说明怎么弄,然后自己google了一下,现在就标记一下,方便记录一下. th:href=" ...

  8. MySql基本查询、连接查询、子查询、正则表达查询解说

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 查询数据指从数据库中获取所须要的数据.查询数据是数据库操作中最经常使用,也是最重要的操作.用户 ...

  9. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  10. 简单探讨spring整合mybatis时sqlSession不需要释放关闭的问题

    https://blog.csdn.net/RicardoDing/article/details/79899686 近期,在使用spring和mybatis框架编写代码时,sqlSession不需要 ...