静态页面拖拽实现代码

最新推荐文章于 2022-08-25 14:58:31 发布

老大巨强龙

最新推荐文章于 2022-08-25 14:58:31 发布

阅读量345

点赞数

分类专栏： java 文章标签：拖拽页面拖拽

本文链接：https://blog.csdn.net/liuyang03160070/article/details/84179668

版权

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

静态拖拽行:

<html>
<head>
<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>



  <div class="sortClass" id="toolsort">
                            <ul>
                                <li>API</li>
                                <li>组件</li>
                                <li>模板</li>
                                <li>代码</li>
                                <li>第三方</li>
                                <li>IT资源</li>
                            </ul>
  </div>
</body>
</html>