首页 > 其他分享 >页面层次拖拽效果

页面层次拖拽效果

时间：2023-09-20 10:32:10浏览次数：35  
标签：rows wc 层次 temp cols obj div 拖拽 页面 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head runat="server">
		<title>无标题页</title>
	  
	<style type="text/css">   
	  
	body {   
	width:100%;   
	max-height:100%;   
	padding:0px;   
	margin:0px;   
	text-align:center;   
	}   
	  
	.cell {   
	float:left;   
	clear:right;   
	}   
	  
	.row {   
	clear:both;   
	}   
	  
	.r_nbsp {   
	width:20px;   
	}   
	  
	.root {   
	width:868px;   
	margin: 0 auto;   
	}   
	  
	.root * {   
	/*次属性FF的说*/  
	-moz-user-select:none;   
	}   
	  
	.line {   
	width:202px;   
	line-height:20px;   
	height:20px;   
	overflow:hidden;   
	font-size:12px;   
	}   
	  
	.move {   
	border:#CCCCCC 1px solid;   
	width:200px;   
	height:aotu;   
	}   
	  
	.title {   
	height:24px;   
	cursor:move;   
	background:#0080C0;   
	font-size:12px;   
	font-weight:bold;   
	color:#FFFFFF;   
	line-height:24px;   
	text-align:center;   
	}   
	  
	.content {   
	border-top:#CCCCCC 1px solid;   
	height:100px;   
	background-color:#F7F7F7;   
	}   
	  
	.CDrag_temp_div {   
	border:#CCCCCC 1px dashed;   
	}   
	  
	</style>   
		<script type="text/javascript">   
	var Class = {   
	//创建类   
	create: function () {   
	return function () {   
	this.initialize.apply(this, arguments);   
	};   
	}   
	};   
	  
	var $A = function (a) {   
	//转换数组   
	return a ? Array.apply(null, a) : new Array;   
	};   
	  
	var $ = function (id) {   
	//获取对象   
	return document.getElementById(id);   
	};   
	  
	Object.extend = function (a, b) {   
	//追加方法   
	for (var i in b) a[i] = b[i];   
	return a;   
	};   
	  
	Object.extend(Object, {   
	  
	addEvent : function (a, b, c, d) {   
	//添加函数   
	if (a.attachEvent) a.attachEvent(b[0], c);   
	else a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);   
	return c;   
	},   
	  
	delEvent : function (a, b, c, d) {   
	if (a.detachEvent) a.detachEvent(b[0], c);   
	else a.removeEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);   
	return c;   
	},   
	  
	reEvent : function () {   
	//获取Event   
	return window.event ? window.event : (function (o) {   
	do {   
	o = o.caller;   
	} while (o && !/^\[object[ A-Za-z]*Event\]$/.test(o.arguments[0]));   
	return o.arguments[0];   
	})(this.reEvent);   
	}   
	  
	});   
	  
	Function.prototype.bind = function () {   
	//绑定事件   
	var wc = this, a = $A(arguments), o = a.shift();   
	return function () {   
	wc.apply(o, a.concat($A(arguments)));   
	};   
	};   
	  
	  
	var Table = Class.create();   
	  
	Table.prototype = {   
	  
	initialize : function () {   
	//初始化   
	var wc = this;   
	wc.cols = new Array; //创建列   
	},   
	  
	addCols : function (o) {   
	//添加列   
	var wc = this, cols = wc.cols, i = cols.length;   
	return cols[i] = {   
	id : i, div : o, rows : new Array, //创建行   
	addRow : wc.addRow, chRow : wc.chRow, inRow : wc.inRow, delRow : wc.delRow   
	};   
	},   
	  
	addRow : function (o) {   
	//添加行   
	var wc = this, rows = wc.rows, i = rows.length;   
	return rows[i] = {   
	id : i, div : o, cols : wc   
	};   
	},   
	  
	inRow : function (a, b) {   
	//插入行   
	var wc = b.cols = this, rows = wc.rows, i;   
	if (a < rows.length) {   
	for (i = a ; i < rows.length ; i ++) rows[i].id ++;   
	rows.splice(a, 0, b);   
	b.id = a;   
	return b;   
	} else {   
	b.id = rows.length;   
	return rows[b.id] = b;   
	}   
	},   
	  
	delRow : function (a) {   
	//删除列   
	var wc = this, rows = wc.rows, i, r;   
	if (a >= rows.length) return;   
	r = rows[a];   
	rows.splice(a, 1);   
	for (i = a ; i < rows.length ; i ++) rows[i].id = i;   
	return r;   
	}   
	};   
	var CDrag = Class.create();   
	  
	CDrag.IE = /MSIE/.test(window.navigator.userAgent);   
	  
	CDrag.prototype = {   
	  
	initialize : function () {   
	//初始化成员   
	var wc = this;   
	wc.table = new Table; //建立表格对象   
	wc.iFunc = wc.eFunc = null;   
	wc.obj = { on : { a : null, b : "" }, row : null, left : 0, top : 0 };   
	wc.temp = { row : null, div : document.createElement("div") };   
	wc.temp.div.setAttribute(CDrag.IE ? "className" : "class", "CDrag_temp_div");   
	wc.temp.div.innerHTML = " ";   
	},   
	  
	reMouse : function (a) {   
	//获取鼠标位置   
	var e = Object.reEvent();   
	return {   
	x : document.documentElement.scrollLeft + e.clientX,   
	y : document.documentElement.scrollTop + e.clientY   
	};   
	},   
	  
	rePosition : function (o) {   
	//获取元素绝对位置   
	var $x = $y = 0;   
	do {   
	$x += o.offsetLeft;   
	$y += o.offsetTop;   
	} while ((o = o.offsetParent) && o.tagName != "BODY");   
	return { x : $x, y : $y };   
	},   
	  
	sMove : function (o) {   
	//当拖动开始时设置参数   
	  
	var wc = this;   
	if (wc.iFunc || wc.eFinc) return;   
	  
	var mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, div = o.div, position = wc.rePosition(div);   
	  
	obj.row = o;   
	obj.on.b = "me";   
	obj.left = mouse.x - position.x;   
	obj.top = mouse.y - position.y;   
	  
	temp.row = document.body.appendChild(div.cloneNode(true)); //复制预拖拽对象   
	  
	with (temp.row.style) {   
	//设置复制对象   
	position = "absolute";   
	left = mouse.x - obj.left + "px";   
	top = mouse.y - obj.top + "px";   
	zIndex = 100;   
	opacity = "0.3";   
	filter = "alpha(opacity:30)";   
	}   
	  
	with (temp.div.style) {   
	//设置站位对象   
	height = div.clientHeight + "px";   
	width = div.clientWidth + "px";   
	}   
	  
	  
	/*div.parentNode.insertBefore(temp.div, div);  
	div.style.display = "none"; //隐藏预拖拽对象*/  
	div.parentNode.replaceChild(temp.div, div);   
	  
	wc.iFunc = Object.addEvent(document, ["onmousemove"], wc.iMove.bind(wc));   
	wc.eFunc = Object.addEvent(document, ["onmouseup"], wc.eMove.bind(wc));   
	document.onselectstart = new Function("return false");   
	},   
	  
	iMove : function () {   
	//当鼠标移动时设置参数   
	var wc = this, cols = wc.table.cols, mouse = wc.reMouse(), obj = wc.obj, temp = wc.temp, row = obj.row, div = temp.row,   
	t_position, t_cols, t_rows, i, j;   
	  
	with (div.style) {   
	left = mouse.x - obj.left + "px";   
	top = mouse.y - obj.top + "px";   
	}   
	  
	for (i = 0 ; i < cols.length ; i ++) {   
	t_cols = cols[i];   
	t_position = wc.rePosition(t_cols.div);   
	if (t_position.x < mouse.x && t_position.x + t_cols.div.offsetWidth > mouse.x) {   
	if (t_cols.rows.length > 0) { //如果此列行数大于0   
	if (wc.rePosition(t_cols.rows[0].div).y + 20 > mouse.y) {   
	//如果鼠标位置大于第一行的位置即是最上。。   
	//向上   
	obj.on.a = t_cols.rows[0];   
	obj.on.b = "up";   
	obj.on.a.div.parentNode.insertBefore(temp.div, obj.on.a.div);   
	} else if (t_cols.rows.length > 1 && t_cols.rows[0] == row &&   
	wc.rePosition(t_cols.rows[1].div).y + 20 > mouse.y) {   
	//如果第一行是拖拽对象而第鼠标大于第二行位置则，没有动。。   
	//向上   
	obj.on.b = "me";   
	t_cols.rows[1].div.parentNode.insertBefore(temp.div, t_cols.rows[1].div);   
	} else {   
	for (j = t_cols.rows.length - 1 ; j > -1 ; j --) {   
	//重最下行向上查询   
	t_rows = t_cols.rows[j];   
	if (t_rows == obj.row) continue;   
	if (wc.rePosition(t_rows.div).y < mouse.y) {   
	//如果鼠标大于这行则在这行下面   
	if (t_rows.id + 1 < t_cols.rows.length && t_cols.rows[t_rows.id + 1] != obj.row) {   
	//如果这行有下一行则重这行下一行的上面插入   
	t_cols.rows[t_rows.id + 1].div.parentNode.   
	insertBefore(temp.div, t_cols.rows[t_rows.id + 1].div);   
	obj.on.a = t_rows;   
	obj.on.b = "down";   
	} else if (t_rows.id + 2 < t_cols.rows.length) {   
	//如果这行下一行是拖拽对象则插入到下两行，即拖拽对象返回原位   
	t_cols.rows[t_rows.id + 2].div.parentNode.   
	insertBefore(temp.div, t_cols.rows[t_rows.id + 2].div);   
	obj.on.b = "me";   
	} else {   
	//前面都没有满足则放在最低行   
	t_rows.div.parentNode.appendChild(temp.div);   
	obj.on.a = t_rows;   
	obj.on.b = "down";   
	}   
	return;   
	}   
	}   
	}   
	} else {   
	//此列无内容添加新行   
	t_cols.div.appendChild(temp.div);   
	obj.on.a = t_cols;   
	obj.on.b = "new";   
	}   
	}   
	}   
	},   
	  
	eMove : function () {   
	//当鼠标释放时设置参数   
	var wc = this, obj = wc.obj, temp = wc.temp, row = obj.row, div = row.div, o_cols, n_cols;   
	  
	if (obj.on.b == "up") {   
	//向最上添加   
	o_cols = obj.row.cols;   
	n_cols = obj.on.a.cols;   
	n_cols.inRow(0, o_cols.delRow(obj.row.id));   
	} else if (obj.on.b == "down") {   
	//相对向下添加   
	o_cols = obj.row.cols;   
	n_cols = obj.on.a.cols;   
	n_cols.inRow(obj.on.a.id + 1, o_cols.delRow(obj.row.id));   
	} else if (obj.on.b == "new") {   
	//向无内容列添加   
	o_cols = obj.row.cols;   
	n_cols = obj.on.a;   
	n_cols.inRow(0, o_cols.delRow(obj.row.id));   
	}   
	  
	temp.div.parentNode.replaceChild(div, temp.div);   
	temp.row.parentNode.removeChild(temp.row);   
	delete temp.row;   
	  
	Object.delEvent(document, ["onmousemove"], wc.iFunc);   
	Object.delEvent(document, ["onmouseup"], wc.eFunc);   
	document.onselectstart = wc.iFunc = wc.eFunc = null;   
	},   
	  
	add : function (o) {   
	//添加对象   
	var wc = this;   
	Object.addEvent(o.div.childNodes[CDrag.IE ? 0 : 1], ["onmousedown"], wc.sMove.bind(wc, o));   
	},   
	  
	parse : function (o) {   
	//初始化成员   
	var wc = this, table = wc.table, cols, i, j;   
	for (i = 0 ; i < o.length ; i ++) {   
	cols = table.addCols(o[i].cols);   
	for (j = 0 ; j < o[i].rows.length ; j ++)   
	wc.add(cols.addRow(o[i].rows[j]));   
	}   
	}   
	  
	};   
	  
	Object.addEvent(window, ["onload"], function () {   
	var wc = new CDrag;   
	wc.parse([   
	  
	{   
	cols : $("m_1"), rows : [$("m_1_1"), $("m_1_2"), $("m_1_3"), $("m_1_4")]   
	},   
	  
	{   
	cols : $("m_2"), rows : [$("m_2_1"), $("m_2_2"), $("m_2_3"), $("m_2_4")]   
	},   
	  
	{   
	cols : $("m_3"), rows : [$("m_3_1"), $("m_3_2"), $("m_3_3"), $("m_3_4")]   
	},   
	  
	{   
	cols : $("m_4"), rows : [$("m_4_1"), $("m_4_2"), $("m_4_3"), $("m_4_4")]   
	}   
	  
	]);   
	});   
	</script>   
	</head><body><br />   
	<div class="root">   
		<div class="cell" id="m_1">   
			<div class="line">   
				第一列</div>   
			<div class="move" id="m_1_1">   
				<div class="title">   
					第一列的第一个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_1_2">   
				<div class="title">   
					第一列的第二个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_1_3">   
				<div class="title">   
					第一列的第三个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_1_4">   
				<div class="title">   
					第一列的第四个的说</div>   
				<div class="content">   
				</div>   
			</div>   
		</div>   
		<div class="cell r_nbsp">   
			 </div>   
		<div class="cell" id="m_2">   
			<div class="line">   
				第二列</div>   
			<div class="move" id="m_2_1">   
				<div class="title">   
					第二列的第一个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_2_2">   
				<div class="title">   
					第二列的第二个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_2_3">   
				<div class="title">   
					第二列的第三个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_2_4">   
				<div class="title">   
					第二列的第四个的说</div>   
				<div class="content">   
				</div>   
			</div>   
		</div>   
		<div class="cell r_nbsp">   
			 </div>   
		<div class="cell" id="m_3">   
			<div class="line">   
				第三列</div>   
			<div class="move" id="m_3_1">   
				<div class="title">   
					第三列的第一个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_3_2">   
				<div class="title">   
					第三列的第二个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_3_3">   
				<div class="title">   
					第三列的第三个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_3_4">   
				<div class="title">   
					第三列的第四个的说</div>   
				<div class="content">   
				</div>   
			</div>   
		</div>   
		<div class="cell r_nbsp">   
			 </div>   
		<div class="cell" id="m_4">   
			<div class="line">   
				第四列</div>   
			<div class="move" id="m_4_1">   
				<div class="title">   
					第四列的第一个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_4_2">   
				<div class="title">   
					第四列的第二个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_4_3">   
				<div class="title">   
					第四列的第三个的说</div>   
				<div class="content">   
				</div>   
			</div>   
			<div class="move" id="m_4_4">   
				<div class="title">   
					第四列的第四个的说</div>   
				<div class="content">   
				</div>   
			</div>   
		</div>   
	</div> 
	</body>
	</html>

 

标签：rows,wc,层次,temp,cols,obj,div,拖拽,页面
From： https://blog.51cto.com/u_16255870/7534790

相关文章

  • dedebiz内容页面获取当前页面路径的标签
    dedebiz获取当前页面路径的标签，仅在内容页使用，栏目页没有效果的。{dede:fieldname='arcurl'/}在栏目页想获取当前栏目的路径及名称的话，就要用下面这个标签。{dede:type}<ahref="[field:typelink/]">[field:typename/]</a>{/dede:type}获取网站所有栏目名称及路径列......
  • HarmonyOS 管理页面跳转及浏览记录导航
    历史记录导航使用者在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。可以通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录。在下面的示例中，点击应用的按钮来触发前端页面的后......
  • springMvc页面跳转---重定向和转发
    准备工作1.导入json依赖点击查看代码<!--jsp需要依赖!jstl--><dependency><groupId>jakarta.servlet.jsp.jstl</groupId><artifactId>jakarta.servlet.jsp.jstl-api</artifactId><version>3.......
  • 视频监控/视频汇聚平台EasyCVR平台页面展示优化
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快，可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等，以及支持厂家私有协议与SDK接入，包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力，也具备接入AI智能分析的能......
  • 视频监控系统/视频汇聚平台EasyCVR平台页面展示优化
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快，可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等，以及支持厂家私有协议与SDK接入，包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力，也具备接入AI智能分析的......
  • 【HarmonyOS】元服务卡片router实现跳转到指定页面
    ​【关键字】元服务卡片、router跳转不同页面 【写在前面】本篇文章主要介绍开发元服务卡片时，如何实现从卡片中点击事件跳转到指定的应用内页面功能。此处以JSUI开发服务卡片为例，JS卡片支持组件设置action，包括router事件和message事件，其中router事件用于应用跳转，message事件......
  • HarmonyOS 管理页面跳转及浏览记录导航
     历史记录导航使用者在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。可以通过forward()和backward()接口向前/向后浏览上一个/下一个历史记录。在下面的示例中，点击应用的按钮来触发前端页......
  • ORACLE--Connect By、Level、Start With的使用(Hierarchical query-层次查询)
    查找员工编号为7369的领导:1SELECTLEVEL,E.*FROMEMPECONNECTBYPRIORE.MGR=E.EMPNOSTARTWITHE.EMPNO=78762ORDERBYLEVELDESC"startwith"--thisidentifiesallLEVEL=1nodesinthetree"connectby"--describeshowtowalkfromt......
  • destoon上做纯js实现html指定页面导出word
    因为最近做了范文网站需要，所以要下载为word文档，如果php进行处理，很吃后台服务器，所以想用前端进行实现。查询github发现，确实有这方面的插件。js导出word文档所需要的两个插件：FileSaver.jsjquery.wordexport.js首先引入：<!--生成word!--><scriptsrc="https://cdn.bootcss......
  • HttpClient采集页面数据
    1、导入相关依赖<!--https://mvnrepository.com/artifact/org.apache.hadoop/hadoop-client--><dependency><groupId>org.apache.hadoop</groupId><artifactId>hadoop-client</artifactId><version>3.3.0</version&......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99