js控制行移动

xdwangiflytek · 发表于 2013-1-29 08:48:54

摘自网络

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>行拖动</title><script>window.onload = function() {//绑定事件var addEvent = document.addEventListener ? function(el, type, callback) {el.addEventListener(type, callback, !1);}: function(el, type, callback) {el.attachEvent("on" + type, callback);}//判定对样式的支持var getStyleName = (function() {var prefixes = [ '', '-ms-', '-moz-', '-webkit-', '-khtml-', '-o-' ];var reg_cap = /-([a-z])/g;function getStyleName(css, el) {el = el || document.documentElement;var style = el.style, test;for ( var i = 0, l = prefixes.length; i < l; i++) {test = (prefixes[i] + css).replace(reg_cap,function($0, $1) {return $1.toUpperCase();});if (test in style) {return test;}}return null;}return getStyleName;})();var userSelect = getStyleName("user-select");//精确获取样式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 = {y : 0,dragStart : function(e) {e = e || event;var handler = e.target || e.srcElement;if (handler.nodeName === "TD") {handler = handler.parentNode;dragManager.handler = handler;if (!handler.getAttribute("data-background")) {handler.setAttribute("data-background", getStyle(handler, "background-color"))}//显示为可移动的状态handler.style.backgroundColor = "#ccc";handler.style.cursor = "move";dragManager.y = e.clientY;//★★★★★★★★★★★★★★★★★★★★if (typeof userSelect === "string") {return document.documentElement.style[userSelect] = "none";}document.unselectable = "on";document.onselectstart = function() {return false;}//★★★★★★★★★★★★★★★★★★★★}},draging : function(e) {//mousemove时拖动行var handler = dragManager.handler;if (handler) {e = e || event;var y = e.clientY;var down = y > dragManager.y;//是否向下移动var tr = document.elementFromPoint(e.clientX, e.clientY);if (tr && tr.nodeName == "TD") {tr = tr.parentNodedragManager.y = y;if (handler !== tr) {tr.parentNode.insertBefore(handler,(down ? tr.nextSibling : tr));}};}},dragEnd : function() {var handler = dragManager.handlerif (handler) {handler.style.backgroundColor = handler.getAttribute("data-background");handler.style.cursor = "default";dragManager.handler = null;}//★★★★★★★★★★★★★★★★★★★★if (typeof userSelect === "string") {return document.documentElement.style[userSelect] = "text";}document.unselectable = "off";document.onselectstart = null;//★★★★★★★★★★★★★★★★★★★★},main : function(el) {addEvent(el, "mousedown", dragManager.dragStart);addEvent(document, "mousemove", dragManager.draging);addEvent(document, "mouseup", dragManager.dragEnd);}}var el = document.getElementById("table");dragManager.main(el);}</script><style>.table {width: 60%;border: 1px solid green;border-collapse: collapse;}.table td {border: 1px solid green;height: 20px;}</style></head><body><h1>行拖动</h1><table id="table" class="table"><tbody><tr><td>1</td><td>第一行</td></tr><tr id="2"><td class="2">2</td><td>第二行</td></tr><tr id="3"><td class="3">3</td><td>第三行</td></tr><tr id="4"><td class="4">4</td><td>第四行</td></tr><tr id="5"><td class="5">5</td><td>第五行</td></tr><tr id="6"><td class="6">6</td><td>第六行</td></tr></tbody></table></body></html>

		自动登录	找回密码
密码			立即注册