zoukankan      html  css  js  c++  java
  • 原生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

  • 相关阅读:
    Eclipse workspace被锁定
    OpenWrt增加软件包
    多核cpu关闭、开启核心
    python基础-元组(tuple)及内置方法
    JS变量+作用域
    JS宣传页项目-综合实战
    JS实现轮播图特效(带二级导航)
    JS DOM属性+JS事件
    JS DOM操作(创建、遍历、获取、操作、删除节点)
    JS中BOM操作知识点
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713832.html
Copyright © 2011-2022 走看看