<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DragRowDemo.aspx.cs" Inherits="iRightListDemo.拖动列.DragRowDemo" %> <!doctype html> <html> <head> <title>行拖动 by 司徒正美</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.parentNode dragManager.y = y; if (handler !== tr) { tr.parentNode.insertBefore(handler, (down ? tr.nextSibling : tr)); } }; } }, dragEnd: function () { var handler = dragManager.handler if (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 red; border-collapse: collapse; } .table td{ border: 1px solid red; height: 20px; } .table th{ border: 1px solid groove; border-left: 1px solid groove; height: 20px; background:lightgray; } </style> </head> <body> <h1>行拖动 by 司徒正美</h1> <table id="table" class="table"> <thead> <tr> <th>编号</th> <th>顺序</th> <th>Js文件名</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>One</td> <td>dom.require</td> </tr> <tr id="2" > <td class="2">2</td> <td>Two</td> <td>ControlJS </td> </tr> <tr id="3" > <td class="3">3</td> <td>Three</td> <td>HeadJS</td> </tr> <tr id="4" > <td class="4">4</td> <td>Four</td> <td>LAB.js</td> </tr> <tr id="5" > <td class="5">5</td> <td>Five</td> <td>$script.js</td> </tr> <tr id="6" > <td class="6">6</td> <td>Six</td> <td>NBL.js</td> </tr> </tbody> </table> </body> </html>