原生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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值