教程集 > 脚本编程 > javascript > 正文 google拖拽效果代码

google拖拽效果代码

发布时间：2023-07-07 编辑：jiaochengji.com

教程集为您提供google拖拽效果代码等资源，欢迎您收藏本站，我们将为您提供最新的google拖拽效果代码资源

提示：您可以先修改部分代码再运行

<style>    	.dragArea{  		background-color:blue;  		filter:alpha(opacity=50);  		-moz-opacity:0.5;  	}    	body{  		margin:0px;  	}  </style>  <body>  <div style="top:0px;left:0px;width:100px;height:100px;position:absolute;background:black;" onselectstart="return false;"   onmousedown="mousedown.apply(this,arguments);">  </div>  </body>  <script type="text/javascript">  /***********************************************************************    *	函数名：startdrag   *	说明：开始一段拖动行为，检查拖动行为的过程和终止并响应相应的事件。   *	参数：   *		parent		DOM对象，拖动所属的父对象，必需是容器，可以为document.body   *		onmove		函数对象，事件，拖动开始后，鼠标移动触发事件   *		onfinish	函数对象，事件，拖动结束时，触发事件一次   *		area		对象，可以缺省，必须包含4个属性top left width height，以指定鼠标移动的有效范围，默认值为parent的全部范围。   ***********************************************************************/    	function startdrag(parent,onmove,onfinish,area)  	{  		var up,out,over;    		var divarea=document.createElement("div");  		if(!area)area={  			"top":"0px",  			"left":"0px",  			"width":"100%",  			"height":"100%"  		}  		divarea.style.position="absolute";  		divarea.style.top=area.top;  		divarea.style.left=area.left;  		divarea.style.width=area.width;  		divarea.style.height=area.height;  		divarea.style.overflow="hidden";  		divarea.style.zIndex="10000";  		divarea.className="dragArea";  		parent.appendChild(divarea);      		if(divarea.attachEvent)  		{  			divarea.attachEvent("onmousemove",onmove)  			document.attachEvent("onmouseup",up=function(){  				divarea.detachEvent("onmousemove",onmove);  				document.detachEvent("onmouseup",up);  				divarea.detachEvent("onmouseout",out);  				parent.removeChild(divarea);  				onfinish(event||arguments[0]);  			});  			divarea.attachEvent("onmouseout",out=function(){  				divarea.detachEvent("onmousemove",onmove);  				document.detachEvent("onmouseup",up);  				divarea.detachEvent("onmouseout",out);  				parent.removeChild(divarea);  				onfinish(event||arguments[0]);    			});  		}    		else if(divarea.addEventListener)  		{  			divarea.addEventListener("mousemove",onmove,true);  			document.addEventListener("mouseup",up=function(){  				divarea.removeEventListener("mousemove",onmove,true);  				document.removeEventListener("mouseup",up,true);  				divarea.removeEventListener("mouseout",out,true);  				parent.removeChild(divarea);  				onfinish(event||arguments[0]);  			},true);  			divarea.addEventListener("mouseout",out=function(){  				//alert("out");  				divarea.removeEventListener("mousemove",onmove,true);  				document.removeEventListener("mouseup",up,true);  				divarea.removeEventListener("mouseout",out,true);  				parent.removeChild(divarea);  				onfinish(event||arguments[0]);  			},true);  		}    	}  </script>  <script type="text/javascript">  function mousedown()  {  	var e=arguments[0]||event;  	var me=this;  	var dy=e.clientY-parseInt(me.style.top);  	var dx=e.clientX-parseInt(me.style.left);  	startdrag(  		document.body,  		function(e){  			e=e||event;  			if(e.clientY-dy<0||e.clientY-dy>parseInt(document.body.clientHeight)-100)return;  			if(e.clientX-dx<0||e.clientX-dx>parseInt(document.body.clientWidth)-100)return;  			me.style.top=e.clientY-dy;  			me.style.left=e.clientX-dx;  		},  		function(e){  		}  	);  }  </script>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery div拖拽效果(兼容浏览器)
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
jQuery 版元素拖拽原型代码
 简单的jquery拖拽排序效果实现代码
 jquery页面拖拽并保存到cookie实例分享
 HTML5 DragEvent接口的实例讲解
 jquery实现简单的拖拽效果实例兼容所有主流浏览器
 jquery网页元素拖拽插件效果及实现
 H5实现拖拽排序的代码
 使用h5实现react拖拽排序组件的方法（附代码）

上一篇：js折叠菜单代码下一篇：鼠标滑到缩略图上时-放大图片

[关闭]

最近更新

浏览排行

~ ~