教程集 > jQuery > jquery 教程 > 正文 js可拖动的层div

js可拖动的层div

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

教程集为您提供js可拖动的层div等资源，欢迎您收藏本站，我们将为您提供最新的js可拖动的层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>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <script type="text/javascript">  var $=function(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);};  var Drag=function()  {  var _=(typeof arguments[0]=="string")?$(arguments[0]):arguments[0];  	(!window.captureEvents)?_.setCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  	_.onmousedown=function(e)  	{  			e=e||event;  			_.Pos=(e.layerX)?{x:e.layerX,y:e.layerY}:{x:e.offsetX,y:e.offsetY};  			var Template=document.createElement("DIV");  				Template.style.position="absolute";  				Template.style.background="#000";  				Template.style.filter="alpha(opacity=20)";  				Template.style.opacity="0.2";  				Template.style.zIndex="80";  				Template.style.height=_.offsetHeight "px";  				Template.style.width=_.offsetWidth "px";  				document.body.appendChild(Template);  				Template.style.left=(e.clientX - _.Pos.x)   "px";  				Template.style.top=(e.clientY - _.Pos.y)   "px";  			document.onmousemove =function(e)  			{  				e=e||event;  				Template.style.left=(e.clientX - _.Pos.x)   "px";  				Template.style.top=(e.clientY - _.Pos.y)   "px";  			};  			document.onmouseup   =function(e)  			{  				e=e||event;  				_.style.top  = (e.clientY - _.Pos.y)   "px";  				_.style.left = (e.clientX - _.Pos.x)   "px";  				Template.style.left=(e.clientX - _.Pos.x)   "px";  				Template.style.top=(e.clientY - _.Pos.y)   "px";  				document.body.removeChild(Template);  				document.onmousemove=document.onmouseup=document.onselectstart=null;  			};  			document.onselectstart = function(){ return false; };  	}  };  </script>  </head>  <body>    <div id="test"  style="position:absolute;height:100px;width:100px;background:#000;cursor:move"></div>  <script>    new Drag('test')  </script>  </body>  </html>

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

您可能感兴趣的文章：
js实现拖动层，兼容IEFireFox
jQuery EasyDrag实现DIV拖动
 js div 可拖动层代码
 Javascript 拖动效果兼容火狐
 jQuery实现可拖动的浮动层完整代码
 js 完美拖拽特效代码
 js简单拖动层效果
 JQuery UI的拖拽功能实现方法小结
 基于jquery的鼠标拖动效果代码
 基于jquery的一行代码轻松实现拖动效果

上一篇：ajax loading 效果代码

[关闭]

js可拖动的层div

最近更新

浏览排行