DragRow-GYF

<%@ 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.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 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>

转载于:https://www.cnblogs.com/feige/p/6146534.html

DragRow-GYF相关推荐

浅谈工作/学习中找bug的思路_0_调试、try-catch以及打印报错信息和百度的方法、No default constructor for entity: com.gyf.bos.mod
浅谈工作/学习中找bug的思路_0 文章目录浅谈工作/学习中找bug的思路_0 调试.try-catch-以及打印报错信息和百度的方法前言描述解决思路1 -- 检查移植的代码,细枝末节也不要忽 ...
junit 单元测试相关问题记录问题： Error:(16, 6) java: 不兼容的类型: com.gyf.test.Test无法转换为java.lang.annotation.Annotati
1. @ Test 只能用于方法 2. 方法必须为 public 修饰,无返回值,无参数. 3. 4. 测试类的名称不能Test : 问题: Error:(16, 6) java: 不兼容的类型 ...
矩阵分析与多元统计II 二次型与二次曲面2 双线性函数
矩阵分析与多元统计II 二次型与二次曲面2 双线性函数双线性函数双线性函数的表示满秩双线性函数对称与反对称对称双线性函数反对称双线性函数应用伪欧氏空间与伪正交变换辛空间与辛变换对称 ...
java mvc返回js_Java的学习（39）springboot
使用Spring boot ,可以轻松的创建独立运行的程序,非常容易构建独立的服务组件,是实现分布式架构.微服务架构利器. Spring boot简化了第三方包的引用,通过提供的starter,简化了 ...
python 流程控制if判断
简单看下if判断在python的基本用法 # gyf=28 定义变量gyf # if gyf > 20: 判断 gyf 是不是〉20 # print('你真年轻') 简单实现了 if判断 ...
Android之Dialog提示Unable to add window -- token is not valid； is your activity running?
1.问题 Dialog奔溃提示Unable to add window -- token android.os.BinderProxy@b251dbc is not valid; is your ac ...
1.10-linux三剑客之sed命令详解及用法
内容: 1.sed命令介绍 2.语法格式,常用功能查询增加替换批量修改文件名第1章 sed是什么字符流编辑器 Stream Editor 第2章 sed功能与版本处理出文本文件,日志 ...
app推送以及提示音java,springboot 整合 Jpush 极光推送
产品简介: JPush 是经过考验的大规模 App 推送平台,每天推送消息数超过 5 亿条. 开发者集成 SDK 后,可以通过调用 API 推送消息.同时,JPush 提供可视化的 web 端控制台发 ...
mysql复制：一个master对应1个slave
2019独角兽企业重金招聘Python工程师标准>>> 复制的步骤: 1.在主库上开启二进制日志,把数据更改记录到二进制日志(binary log)中. mysql会按照事物提交 ...
MUI 地址选择器 - picker使用
MUI 地址选择器 - picker使用很多安卓原生的地址选择器中,选择器基本是实时滚动的. 就像腾讯QQ应用的地址选择器一样! 效果截图如下: 代码如下: <!DOCTYPE html> ...

DragRow-GYF

DragRow-GYF相关推荐

最新文章

热门文章