原生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. 给表格中需要排序添加可拖拽属性 `draggable="true"`。 2. 监听拖拽事件 `dragstart`,并将拖拽的的索引存储到数据属性中。 3. 监听目标放置事件 `drop`,并根据拖拽的索引和目标的索引交换两的位置。 4. 阻止默认的拖拽为 `dragover` 和 `drop` 事件。 下面是一个简单的实现示例: HTML 代码: ``` <table> <thead> <tr> <th>#</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr draggable="true" data-index="0"> <td>1</td> <td>Alice</td> <td>25</td> </tr> <tr draggable="true" data-index="1"> <td>2</td> <td>Bob</td> <td>30</td> </tr> <tr draggable="true" data-index="2"> <td>3</td> <td>Charlie</td> <td>20</td> </tr> </tbody> </table> ``` JavaScript 代码: ``` const table = document.querySelector('table'); const tbody = table.querySelector('tbody'); let dragIndex; tbody.addEventListener('dragstart', e => { dragIndex = e.target.dataset.index; }); tbody.addEventListener('dragover', e => { e.preventDefault(); }); tbody.addEventListener('drop', e => { e.preventDefault(); const dropIndex = e.target.parentElement.dataset.index; if (dragIndex !== dropIndex) { const dragRow = tbody.querySelector(`[data-index="${dragIndex}"]`); const dropRow = tbody.querySelector(`[data-index="${dropIndex}"]`); const tempRow = document.createElement('tr'); dropRow.before(tempRow); dragRow.before(dropRow); tempRow.replaceWith(dragRow); } }); ``` 在上面的代码中,我们给表格中的每一添加了一个 `data-index` 数据属性,用于存储的索引。在拖拽开始时,我们将拖拽的索引存储到 `dragIndex` 变量中。在目标放置时,我们获取目标的索引,如果拖拽和目标的索引不同,就交换两的位置。具体实现是通过创建一个临时,将目标插入到临时前面,再将拖拽插入到目标前面,最后将临时替换为拖拽。注意要阻止默认的拖拽为,否则无法触发目标放置事件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值