js可拖动的层div

作者：袖梨 2022-07-02

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

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

<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.px";
				Template.style.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>

<div id="test" style="position:absolute;background:#000;cursor:move"></div>
<script>

new Drag('test')
</script>

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

相关文章

精彩推荐