html模块拖拽功能

我会带着你远行 2022-08-05 05:05 259阅读 0赞

实现html模块拖拽功能   如下图

![Center][]

<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8"%>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <style type="text/css">
    body{
    	margin-top: 0px;
    }
    
    DIV.dragHeader {
    	width: 100%;
    	height: 20px;
    	line-height: 20px;
    	background-color: #8FACBC; /*模块标题背景颜色 */
    	color: #FFFFFF;
    }
    
    DIV.dragLayer {
    	/*border: 1px solid #120945;*/
    	margin-bottom: 10px;
    	/*width: 100%;*/
    	margin: auto;
    }
    
    DIV.dragLayer_over { /*拖动时内容区域样式*/
    	border: 1px solid #dce9ff;
    	/*background-color: #FFFFFF;*/
    	width: 400px;
    	filter: alpha(opacity = 80);
    	-moz-opacity: 0.8; /* Moz + FF */
    	opacity: 0.8; /*支持CSS3的浏览器（FF 1.5也支持）*/
    	margin-top: 0px; /*拖动时拖动DIV距离鼠标的位置*/
    }
    
    DIV.clone_dragLayer_over {
    	border: 1px dashed #dce9ff;
    	/*background-color: #FFF;*/
    	filter: alpha(opacity =80);
    	-moz-opacity: 0.8; /*Moz + FF*/
    	opacity: 0.8; /*支持CSS3的浏览器（FF 1.5也支持）*/
    	/*margin-bottom: 10px;*/
    	/*margin-top: 50px;*/
    }
    
    DIV.dragHeader_over { /*拖动时title*/
    	width: 400px;
    	height: 20px;
    	line-height: 20px;
    	background-color: #1c7cb8;
    	margin-top: 0px;
    }
    
    SPAN.min, SPAN.close {
    	cursor: pointer;
    	font-family: Webdings
    }
    
    #container {
    	width: 80%;
    	margin: auto;
    } /*DIV距离边的距离*/
    #leftContainer {
    	float: left;
    	width: 400px;
    	margin: 0px 1px;
    	background-color: aliceblue;
    	min-height: 100px;
    	overflow: inherit;
    }
    
    #rightContainer {
    	float: left;
    	width: 400px;
    	margin: 0px 0px;
    	background-color: aliceblue;
    	min-height: 100px;
    	overflow: initial;
    }
    
    DIV.content {
    	width: 100%;
    	padding: 4px
    }
    
    .btn {
    	border: 1px thin #ddd;
    	width: 100px;
    	height: 30px
    }
    
    header {
    	background-color: #1c7cb8;
    	text-align: center;
    	font-size: 20px;
    }
    </style>
    <script type="text/javascript">
    	var drag_val = ""; //将cookie值赋给JS
    
    	var XMLHttpReq;
    	//创建XMLHttpRequest对象       
    	function createXMLHttpRequest() {
    
    		if (window.XMLHttpRequest) { //Mozilla 浏览器
    			XMLHttpReq = new XMLHttpRequest();
    		} else if (window.ActiveXObject) { // IE浏览器
    			try {
    				XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    				}
    			}
    		}
    	}
    	//----------------------------------
    	var Drag = {
    		obj : null, //目标对象
    		cloneobj : null, //拖动对象
    		container : null, //容器
    		dragged : false, //拖动标志
    		shadow : null, //阴影
    
    		data : {},
    		init : function(id) {
    			Drag.container = $(id);
                drag_val = Drag.read("drag_val");
    			if (drag_val) {
    				var dragObj = JSON.parse(drag_val);
    				if (dragObj.rightContainer) {
    					var modules = dragObj.rightContainer;
    					for (var i = 0; i < modules.length; i++) {
    						$("rightContainer").appendChild($(modules));
    					}
    				}
    				if (dragObj.leftContainer) {
    					var modules = dragObj.leftContainer;
    					for (var i = 0; i < modules.length; i++) {
    						$("leftContainer").appendChild($(modules));
    					}
    				}
    			}
    			//			if (drag_val) {//读取cookie
    			//
    			//                for(var proc in dragObj){
    			//                    for(var i=0;i<proc.length;i++){
    			//
    			//                    }
    			//                }
    			//				var subcontainer = drag_val.split("|");
    			//				alert(subcontainer);
    			//				for (var i = 0; i < subcontainer.length; i++) {
    			//					var subcontainerItem = subcontainer[i].split(":");
    			//					if ($(subcontainerItem[0])) {
    			//						var items = subcontainerItem[1].split(",");
    			//						for (var j = 0; j < items.length; j++) {
    			//							if ($(items[j]))
    			//								$(subcontainerItem[0]).appendChild($(items[j]));
    			//						}
    			//					}
    			//				}
    			//			}
    			cleanWhitespace(Drag.container)//清除空白节点
    			var collection = Drag.container.getElementsByTagName("DIV");
    			for (var i = 0; i < collection.length; i++) {
    				if (collection[i].className == "dragLayer") {
    					var o = collection[i].firstChild;
    					SavedObject.push([ o.parentNode.id, 1,
    							o.parentNode.style.height ]);
    					o.onmousedown = Drag.start;
    				}
    			}
    			document.onmousemove = Drag.drag;
    			document.onmouseup = Drag.end;
    
    			Drag.buildData();
    		},
    
    		start : function(e) {
    			if (!e)
    				e = window.event;
    			var obj = getTarget(e);
    			if (obj.className == "min") {
    				Drag.min(e);
    				return;
    			} else if (obj.className == "close") {
    				Drag.close(e);
    				return;
    			} else {
    				if (obj.className != "dragHeader")
    					obj = obj.parentNode;
    			}
    			Drag.dragged = true;
    			Drag.obj = obj.parentNode;
    			Drag.cloneobj = Drag.obj.cloneNode(true);
    			document.body.appendChild(Drag.cloneobj);
    			Drag.shadow = document.createElement("DIV");
    			document.body.appendChild(Drag.shadow);
    			with (Drag.cloneobj.style) {
    				position = "absolute";
    				zIndex = 1000;
    				left = getRealLeft(Drag.obj) + "px";
    				top = getRealTop(Drag.obj) + "px";
    			}
    			with (Drag.shadow.style) {
    				position = "absolute";
    				zIndex = 999;
    				left = getRealLeft(Drag.obj) + 4 + "px";
    				top = getRealTop(Drag.obj) + 4 + "px";
    				width = Drag.obj.offsetWidth + "px";
    				height = Drag.obj.offsetHeight + "px";
    //				backgroundColor = "#FFF"; //拖动过程中的背景色
    				if (navigator.userAgent.indexOf("Gecko") != -1)
    					MozOpacity = "0.5";
    				else if (navigator.userAgent.indexOf("MSIE") != -1)
    					filter = "alpha(opacity=50)";
    			}
    
    			Drag.cloneobj.initMouseX = getMouseX(e);
    			Drag.cloneobj.initMouseY = getMouseY(e);
    			Drag.cloneobj.initoffsetL = getRealLeft(Drag.obj);
    			Drag.cloneobj.initoffsetY = getRealTop(Drag.obj);
    			//change style
    			Drag.cloneobj.firstChild.className = "dragHeader_over";
    			Drag.cloneobj.className = "dragLayer_over";
    			Drag.obj.className = "clone_dragLayer_over";
    		},
    
    		drag : function(e) {
    			if (!Drag.dragged || Drag.obj == null)
    				return;
    			if (!e)
    				e = window.event;
    			var currenX = getMouseX(e);
    			var currenY = getMouseY(e);
    
    			if (Drag.cloneobj.initoffsetL + currenX
    					- Drag.cloneobj.initMouseX > getRealLeft(Drag.container))
    				Drag.cloneobj.style.left = (Drag.cloneobj.initoffsetL
    						+ currenX - Drag.cloneobj.initMouseX)
    						+ "px";
    			else
    				Drag.cloneobj.style.left = getRealLeft(Drag.container)
    						+ "px";
    			if (Drag.cloneobj.initoffsetY + currenY
    					- Drag.cloneobj.initMouseY > getRealTop(Drag.container))
    				Drag.cloneobj.style.top = (Drag.cloneobj.initoffsetY
    						+ currenY - Drag.cloneobj.initMouseY)
    						+ "px";
    			else
    				Drag.cloneobj.style.top = getRealTop(Drag.container)
    						+ "px";
    
    			var collection = Drag.container.getElementsByTagName("DIV");
    			var finded = false;
    			for (var i = 0; i < collection.length; i++) {
    				var o = collection[i];
    				if (o.className == "dragLayer") {
    					if (((getRealLeft(o) <= Drag.cloneobj.offsetLeft && getRealLeft(o)
    							+ o.offsetWidth >= Drag.cloneobj.offsetLeft) || (getRealLeft(o) <= Drag.cloneobj.offsetLeft
    							+ Drag.cloneobj.offsetWidth && getRealLeft(o)
    							+ o.offsetWidth >= Drag.cloneobj.offsetLeft
    							+ Drag.cloneobj.offsetWidth))
    							&& getRealTop(o) <= Drag.cloneobj.offsetTop
    							&& getRealTop(o) + o.offsetHeight >= Drag.cloneobj.offsetTop) {
    						//window.status = getRealTop(o.parentNode)+"|"+(Drag.cloneobj.offsetTop - 8);
    						if (getRealTop(o.parentNode) >= Drag.cloneobj.offsetTop - 8) {
    							o.parentNode.insertBefore(Drag.obj, o);
    						} else {
    							if (o.nextSibling)
    								o.parentNode.insertBefore(Drag.obj,
    										o.nextSibling);
    							else
    								o.parentNode.appendChild(Drag.obj);
    						}
    						finded = true;
    						break;
    					}
    				}
    			}
    
    			if (!finded) {
    				for (var i = 0; i < Drag.container.childNodes.length; i++) {
    					var o = Drag.container.childNodes[i];
    					if (getRealLeft(o) <= Drag.cloneobj.offsetLeft
    							&& getRealLeft(o) + o.offsetWidth >= Drag.cloneobj.offsetLeft)
    						o.appendChild(Drag.obj);
    				}
    			}
    			with (Drag.shadow.style) {
    				left = (Drag.cloneobj.offsetLeft + 4) + "px";
    				top = (Drag.cloneobj.offsetTop + 4) + "px";
    			}
    		    document.title = 'left:'+Drag.cloneobj.style.left + " top:" + Drag.shadow.style.top;
    		},
    
    		end : function(e) {
    			if (!Drag.dragged)
    				return;
    			Drag.obj.className = "dragLayer";
    			Drag.dragged = false;
    			Drag.shadow.parentNode.removeChild(Drag.shadow);
    			Drag.timer = Drag.repos(150, 15);
    			Drag.buildData();
    
    			//Drag.save(); // 每次触发拖放处理后保存
    		},
    		buildData : function() {
    			for ( var field in Drag.data) {
    				delete Drag.data[field];
    			}
    			for (var i = 0; i < Drag.container.childNodes.length; i++) {
    				var o = Drag.container.childNodes[i];
    				if (!Drag.data[o.id]) {
    					Drag.data[o.id] = new Array();
    				}
    				for (var j = 0; j < o.childNodes.length; j++) {
    					if (o.childNodes[j].localName === 'div') {
    						Drag.data[o.id].push(o.childNodes[j].id);
    					}
    				}
    			}
    		},
    		repos : function(aa, ab) {
    			//var f=Drag.obj.filters.alpha.opacity;
    			var tl = getRealLeft(Drag.cloneobj);
    			var tt = getRealTop(Drag.cloneobj);
    			var kl = (tl - getRealLeft(Drag.obj)) / ab;
    			var kt = (tt - getRealTop(Drag.obj)) / ab;
    			//var kf=f/ab;
    			return setInterval(
    					function() {
    						if (ab < 1) {
    							clearInterval(Drag.timer);
    							Drag.cloneobj.parentNode
    									.removeChild(Drag.cloneobj);
    							Drag.obj = null;
    							return;
    						}
    						ab--;
    						tl -= kl;
    						tt -= kt;
    						//f-=kf;
    						Drag.cloneobj.style.left = parseInt(tl) + "px";
    						Drag.cloneobj.style.top = parseInt(tt) + "px";
    						//Drag.tdiv.filters.alpha.opacity=f;
    					}, aa / ab)
    		},
    		min : function(e) {
    			if (!e)
    				e = window.event;
    			var obj = getTarget(e);
    			var rootObj = obj.parentNode.parentNode.parentNode;
    			var id = rootObj.id;
    			if (SavedObject.getStatus(id)[1]) {
    				SavedObject.setStatus(id, 0);
    				rootObj.style.height = "20px";
    				rootObj.childNodes[1].style.display = 'none';
    			} else {
    				SavedObject.setStatus(id, 1);
    				rootObj.lastChild.style.display = '';
    				rootObj.style.height = SavedObject.getStatus(id)[2];
    			}
    			obj.innerHTML = obj.innerHTML == 0 ? 2 : 0;
    		},
    
    		close : function(e) {
    			if (!e)
    				e = window.event;
    			var obj = getTarget(e);
    			var rootObj = obj.parentNode.parentNode.parentNode;
    			rootObj.parentNode.removeChild(rootObj);
    		},
    		save : function() {
    			createXMLHttpRequest();
    			var url = "submit?drag_val=" + JSON.stringify(Drag.data);
    			XMLHttpReq.open("GET", url, true);
    			XMLHttpReq.onreadystatechange = function(){
                    if (XMLHttpReq.readyState == 4) {
                        if (XMLHttpReq.status == 200) {
                            alert('保存成功');
                        } else {
                            window.alert("保存失败");
                        }
                    }
                };
    			XMLHttpReq.send(null);
    			//document.cookie = name   + "=" + escape(value) + expire;
    		},
    		read : function(name) {
    			var cookieValue = "";
    			var search = name + "=";
    			if (document.cookie.length > 0) {
    				offset = document.cookie.indexOf(search);
    				if (offset != -1) {
    					offset += search.length;
    					end = document.cookie.indexOf(";", offset);
    					if (end == -1)
    						end = document.cookie.length;
    					cookieValue = unescape(document.cookie.substring(offset,
    							end))
    				}
    			}
    			return cookieValue;
    		}
    	}
    
    	function $(id) {
    		return document.getElementById(id);
    	}
    	function getTarget(e) {
    		return e.target || e.srcElement;
    	}
    
    	function getMouseX(e) {
    		return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft
    				- document.body.clientLeft;
    	}
    
    	function getMouseY(e) {
    		return e.pageY ? e.pageY : e.clientY + document.body.scrollTop
    				- document.body.clientTop;
    	}
    
    	function getRealLeft(o) {
    		var l = 0;
    		while (o) {
    			l += o.offsetLeft - o.scrollLeft;
    			o = o.offsetParent;
    		}
    		return (l);
    	}
    
    	function getRealTop(o) {
    		var t = 0;
    		while (o) {
    			t += o.offsetTop - o.scrollTop;
    			o = o.offsetParent;
    		}
    		return (t);
    	}
    
    	function cleanWhitespace(node) {
    		var notWhitespace = /\S/;
    		for (var i = 0; i < node.childNodes.length; i++) {
    			var childNode = node.childNodes[i];
    			if ((childNode.nodeType == 3)
    					&& (!notWhitespace.test(childNode.nodeValue))) {
    				node.removeChild(node.childNodes[i]);
    				i--;
    			}
    			if (childNode.nodeType == 1) {
    				cleanWhitespace(childNode);
    			}
    		}
    	}
    
    	var SavedObject = {
    		elements : new Array(),
    		setStatus : function(id, s) {
    			for (var i = 0; i < SavedObject.elements.length; i++) {
    				if (SavedObject.elements[i][0] == id) {
    					SavedObject.elements[i][1] = s;
    					break;
    				}
    			}
    		},
    		getStatus : function(id) {
    			for (var i = 0; i < SavedObject.elements.length; i++) {
    				if (SavedObject.elements[i][0] == id)
    					return SavedObject.elements[i];
    			}
    		},
    		push : function(o) {
    			SavedObject.elements[SavedObject.elements.length] = o;
    		}
    	}
    
    	var counter = 0;
    
    	function addModule(parentId, prefix) {
    		var node = document.createElement('div');
    		node.id = "module" + counter;
    		node.setAttribute('content', "测试");
    		node.className = 'dragLayer';
    
    		var dragNode = document.createElement('div');
    		dragNode.className = "dragHeader";
    		dragNode.style.cursor = 'move';
    
    		var dragNode_1 = document.createElement('div');
    		dragNode_1.style.float = 'left';
    		dragNode_1.innerText = prefix + "-module-" + counter;
    //		var dragNode_2 = document.createElement('div');
    //		dragNode_2.style.float = 'none';
    //	 	var dragNode_3 = document.createElement('div');
    //		dragNode_3.style.float = 'right';
    		dragNode.appendChild(dragNode_1);
    //		dragNode.appendChild(dragNode_2);
    		/* dragNode.appendChild(dragNode_3); */
    		node.appendChild(dragNode);
    
    		var contentNode = document.createElement('div');
    		contentNode.className = 'content';
    		contentNode.innerText = counter+ "测试测试车是费水电费水电费水电费是的水电费";
    		node.appendChild(contentNode);
    		$(parentId).appendChild(node);
    
    		Drag.init('container');
    		counter++;
    	}
    
    
    
    
    </script>
    </head>
    <body οnlοad="Drag.init('container')">
    	<div id="container">
    		<div id="leftContainer">
    			<header>left module</header>
    			
    		</div>
    		<div id="rightContainer">
    			<header>right module</header>
    		</div>
    	</div>
    	<button class="btn" οnclick="addModule('leftContainer','L')">添加左边</button>
    	<button class="btn" οnclick="addModule('rightContainer','R')">添加右边</button>
    	<button class="btn" οnclick="Drag.save()">保存拖拽结果</button>
    </body>
    </html>

[Center]: /images/20220805/9ac653ab686649f3bcd41311aad68991.png