`

js控制行移动

js行移动 
阅读更多

摘自网络

 

<!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.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 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>
1
顶
0
踩
分享到：
| IE6下的JavaScript
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js操作table行的上下移动，置顶置底

    本文将深入探讨如何使用JavaScript实现表格行的上下移动、置顶和置底功能，以及相关辅助操作。 首先，`js操作table行的上下移动，置顶置底`这个主题涉及到的主要技术是DOM操作，事件监听和数组处理。DOM（Document ...

    JS控制HTMLDOM表格行上下移动

    标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM（Document Object Model）元素，特别是HTML表格的行（tr）进行上下移动的功能。这种功能常见于数据管理界面，允许用户通过交互调整...

    用js控制人物的移动

    在这个项目中，“用js控制人物的移动”显然是通过JavaScript来实现一个简单的游戏或者交互场景，让玩家可以操作一个小人在屏幕上移动。下面将详细讲解涉及的JavaScript知识点以及可能的改进方向。 1. **DOM操作**：...

    js 实现 用键盘控制图片移动

    js 实现 用键盘控制图片移动! 值得下载看看!资源免费,大家分享!!

    纯JS控制DIV选择范围移动与复制

    纯JS控制DIV选择范围移动与复制

    js控制图片上下左右移动

    然后，我们需要定义图片移动的坐标变量，以及用于控制移动的函数： ```javascript var x = 0; // 图片初始的横坐标 var y = 0; // 图片初始的纵坐标 function moveLeft() { x -= 5; // 向左移动5像素 img.style....

    JavaScript弹出新窗口并控制窗口移动到指定位置的方法

    JavaScript弹出新窗口并控制窗口移动到指定位置的方法知识点： 1. window.open()函数的使用：window.open()是JavaScript的一个内置函数，用于打开一个新的浏览器窗口或标签页。该函数一般包含三个参数：要加载的URL...

    js控制表格排序，插入，删除，移动行或列，导出表格

    本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...

    鼠标移动控制飞机飞行方向js代码

    在本项目中，我们主要探讨的是如何利用JavaScript（简称js）来实现鼠标移动控制飞机飞行方向的功能。这个项目是一个简单的互动网页应用，用户可以通过移动鼠标来改变飞机在屏幕上的飞行路径，同时背景也会随着飞机的...

    js 与Gridview结合 行移动，添加行

    - 数据的前后台同步是否无误，包括添加和移动行后，数据源是否更新，页面状态是否正确保存。 总的来说，JavaScript与GridView的结合，尤其是通过AJAX实现的行移动和添加功能，是提高Web应用交互性和用户体验的有效...

    Cocos creator中一些控制人物的移动方式总结.zip

    在Cocos Creator中，控制游戏角色的移动是游戏开发的基础部分，尤其对于2D游戏来说更是至关重要。本总结将深入探讨几种常见的移动控制方式，包括键盘控制、触屏控制和摇杆控制，帮助开发者更好地理解并应用这些技术...

    原生js操作dom实现上下左右移动.docx

    "原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...

    鼠标控制 人物八个方向移动

    本主题将深入探讨如何实现“鼠标控制人物八个方向移动”的功能，这通常涉及到编程语言如JavaScript、C#或Unity的使用。我们将通过 MVC（Model-View-Controller）架构来解析这一过程。 **MVC架构** MVC是一种软件...

    js实现键盘控制图片的移动

    &lt;script type="text/javascript"&gt; function test(id){ alert(id); } if(typeof GetControlundefined) GetControl=function (id) { return document.getElementById(id); }; ...

    javascript经典特效---按钮控制图片移动.rar

    【标题】：“JavaScript经典特效——按钮控制图片移动” 在网页设计中，JavaScript是一种不可或缺的脚本语言，它赋予了网页动态交互的能力。本教程聚焦于一个经典的JavaScript特效：通过按钮来控制图片移动。这种...

    原生javascript移动轨迹

    这个功能主要应用于网页交互，特别是游戏或者动态展示等场景，让用户可以通过鼠标或触屏设备控制对象在页面上的移动路径。让我们深入探讨一下如何用原生JavaScript实现这一特性。 首先，我们需要一个HTML结构来承载...

    js自动移动图片，键盘可控制方向

    js自动移动图片，键盘可控制方向

    js 特效 html 特效 按钮控制图片移动

    js 特效 html 特效 按钮控制图片移动

    js-背景斜向移动

    在JavaScript的世界里，"js-背景斜向移动"是一个关于实现网页背景图像动态效果的技术话题。这个技术通常用于创建更具视觉吸引力和动感的用户体验。在ASP（Active Server Pages）环境中，JavaScript可以用来增强页面...

    鼠标右键，键盘控制左右移动echarts标记线、标记点

    在本文中，我们将深入探讨如何使用ECharts，一个流行的JavaScript数据可视化库，来实现鼠标右键功能以及通过键盘控制ECharts中的标记线（markLine）和标记点（marker）。ECharts提供了一套丰富的API和交互功能，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics