一网情深 >> 精选代码 >> 排版特效代码 >> 不错的全功能层拖曳效果 > 正文

不错的全功能层拖曳效果

[来源：一网情深] [作者：tyx8023整理] [日期：2008-01-22] [热度：]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Drag & Drop</title>
<style type="text/css">
body{ background-color:silver; font-size:12px}
DIV.dragLayer{
	border:1px solid #369;
	background-color:#efe;
	margin-bottom:10px;
}
DIV.dragLayer_over{
	border:1px solid #FA0;
	background-color:#efefef;
	filter:alpha(opacity=80);
	-moz-opacity:0.8; /* Moz + FF */
	opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
DIV.clone_dragLayer_over{
	border:1px dashed #FA0;
	background-color:#efefef;
	filter:alpha(opacity=80);
	-moz-opacity:0.8; /* Moz + FF */
	opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
	margin-bottom:10px;
}
DIV.dragHeader{
	width:100%; height:20px ; line-height:20px; background-color:#369; color:#FFFFFF;
}
DIV.dragHeader_over{
	width:100%; height:20px ; line-height:20px; background-color:#FA0;
}
DIV.content{text-align:left}
SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
#container,#leftcontainer,#middlecontainer,#rightcontainer{margin:0px; padding:0px;}
#leftcontainer{float:left;  width:300px;  text-align:left}
#middlecontainer{float:left;  width:400px;  text-align:center}
#rightcontainer{float:right; width:300px; text-align:right}
</style>
<script type="text/javascript">
var CoolDrag={
	obj : null, //目标对象
	cloneobj : null, //拖动对象
	container : null, //容器
	dragged : false, //拖动标志
	shadow: null, //阴影
	
	init:function(id){
		CoolDrag.container = $(id);
		if(CoolDrag.read("__sort") != ""){//读取cookie
			var __sort = CoolDrag.read("__sort");
			var subcontainer = __sort.split("|");
			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(CoolDrag.container)//清除空白节点
		var collection = CoolDrag.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 = CoolDrag.start;
			}
		}
		document.onmousemove = CoolDrag.drag;
		document.onmouseup = CoolDrag.end;
	},
	
	start:function(e){
		if(!e) e = window.event;
		var obj = getT(e);
		if(obj.className == "min"){
			CoolDrag.min(e);
			return;
		}else if(obj.className == "close"){
			CoolDrag.close(e);
			return;
		}else{
			if(obj.className != "dragHeader") obj = obj.parentNode;
		}
		CoolDrag.dragged = true;
		CoolDrag.obj = obj.parentNode;
		CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);
		document.body.appendChild(CoolDrag.cloneobj);
		CoolDrag.shadow = document.createElement("DIV");
		document.body.appendChild(CoolDrag.shadow);
		with(CoolDrag.cloneobj.style){
			position = "absolute";
			zIndex = 1000;
			left = getRealLeft(CoolDrag.obj) + "px";
			top = getRealTop(CoolDrag.obj) + "px";
		}
		with(CoolDrag.shadow.style){
			position = "absolute";
			zIndex = 999;
			left = getRealLeft(CoolDrag.obj) + 4 + "px";
			top = getRealTop(CoolDrag.obj) + 4 + "px";
			width = CoolDrag.obj.offsetWidth + "px";
			height = CoolDrag.obj.offsetHeight + "px";
			backgroundColor = "#ccc";
			if(navigator.userAgent.indexOf("Gecko") != -1)
				MozOpacity = "0.5";
			else if(navigator.userAgent.indexOf("MSIE") != -1)
				filter = "alpha(opacity=50)";
		}

CoolDrag.cloneobj.initMouseX = getMouseX(e);
		CoolDrag.cloneobj.initMouseY	= getMouseY(e);
		CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);
		CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);
		//change style
		CoolDrag.cloneobj.firstChild.className="dragHeader_over";
		CoolDrag.cloneobj.className = "dragLayer_over";
		CoolDrag.obj.className="clone_dragLayer_over";
	},
	
	drag:function(e){
		if(!CoolDrag.dragged||CoolDrag.obj==null)return;
		if(!e) e = window.event;
		var currenX = getMouseX(e);
		var currenY = getMouseY(e);
		
		if(CoolDrag.cloneobj.initoffsetL +  currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container))
			CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL +  currenX - CoolDrag.cloneobj.initMouseX) + "px";
		else
			CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";
		if(CoolDrag.cloneobj.initoffsetY +  currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container))
			CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY +  currenY - CoolDrag.cloneobj.initMouseY) + "px";
		else
			CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";

if(!finded){
			for(var i = 0; i < CoolDrag.container.childNodes.length; i++){
				var o = CoolDrag.container.childNodes[i];
				if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft &&  getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)
					o.appendChild(CoolDrag.obj);
			}
		}
		with(CoolDrag.shadow.style){
			left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";
			top = (CoolDrag.cloneobj.offsetTop + 4) + "px";
		}
	},
	
	end:function(e){
		if(!CoolDrag.dragged)return;
		CoolDrag.obj.className = "dragLayer";
		CoolDrag.dragged = false;
		CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);
		CoolDrag.timer = CoolDrag.repos(150,15);

//保存cookie
		var str="";
		for(var i=0; i<CoolDrag.container.childNodes.length; i++){
			var o = CoolDrag.container.childNodes[i];
			if(i>0)str += "|";
			str += o.id + ":";
			for(var j=0; j < o.childNodes.length; j++){
				if(j>0)str += ",";
				str += o.childNodes[j].id ;
			}
		}
		CoolDrag.save("__sort",str,24);
	},
	repos:function(aa,ab){
		//var f=CoolDrag.obj.filters.alpha.opacity;
		var tl=getRealLeft(CoolDrag.cloneobj);
		var tt=getRealTop(CoolDrag.cloneobj);
		var kl=(tl-getRealLeft(CoolDrag.obj))/ab;
		var kt=(tt-getRealTop(CoolDrag.obj))/ab;
		//var kf=f/ab;
		return setInterval(function(){if(ab<1){
								clearInterval(CoolDrag.timer);
								CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);
								CoolDrag.obj=null;
								return;
							}
						ab--;
						tl-=kl;
						tt-=kt;
						//f-=kf;
						CoolDrag.cloneobj.style.left=parseInt(tl)+"px";
						CoolDrag.cloneobj.style.top=parseInt(tt)+"px";
						//CoolDrag.tdiv.filters.alpha.opacity=f;
					}
	,aa/ab)
	},
	min:function(e){
		if(!e) e = window.event;
		var obj = getT(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 = getT(e);
		var rootObj = obj.parentNode.parentNode.parentNode;
		rootObj.parentNode.removeChild(rootObj);
	},
	save:function(name, value, hours){
		var expire = "";
		if(hours != null)
		{
		expire = new Date((new Date()).getTime() + hours * 3600000);
		expire = "; expires=" + expire.toGMTString();
		}
		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 getT(e){
	if(e.target)
		return e.target;
	else	
		return 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);
}

</script>
</head>

<body style="margin:0px; padding:0px " onLoad="CoolDrag.init('container');">
<br />
<div id="container">
<div id="leftcontainer">
	<div style="height:100px; width:200px; " class="dragLayer" id="win1">
		<div class="dragHeader">
			<div style="float:left">第一个窗口</div>
			<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
		</div>
		<div class="content"><input type="button" value="save" onclick="CoolDrag.save()" /></div>
	</div>
	<div style="height:150px; width:200px; " class="dragLayer" id="win2">
		<div class="dragHeader">
			<div style="float:left">第二个窗口</div>
			<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
		</div>
		<div class="content">window 3</div>
	</div>
</div>
<div id="middlecontainer">
	<div style="height:100px; width:200px; " class="dragLayer" id="win3">
		<div class="dragHeader">
			<div style="float:left">第三个窗口</div>
			<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
		</div>
		<div class="content">window 3</div>
	</div>
	<div style="height:150px; width:200px; " class="dragLayer" id="win4">
		<div class="dragHeader">
			<div style="float:left">第四个窗口</div>
			<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
		</div>
		<div class="content"></div>
	</div>
</div>
<div id="rightcontainer">
	<div style="height:100px; width:200px; " class="dragLayer" id="win5">
		<div class="dragHeader">
			<div style="float:left">第五个窗口</div>
			<div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
		</div>
		<div class="content">window 5</div>
	</div>
</div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Tags:层拖曳

不错的全功能 层拖曳效果

相关文章

不错的全功能层拖曳效果