自写的Js网页拖动类

2024-09-05 12:17:59

字体：大中小

来源：转载

供稿：网友

自写的Js拖动类，仅供能考。

<!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=gb2312" /><title>自写的拖动类……</title><script type="text/javascript">var d=document;//给document对象一个通用的事件侦听方法d.addListener=function(e,f,b){	this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);}d.removeListener=function(e,f,b){	this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);}function $(){//接收一个id参数，返回带有startDrag方法的对象	var o=document.getElementById(arguments[0]);	o.addListener=function(e,f,b){		this.attachEvent?this.attachEvent('on'+e,f):this.addEventListener(e,f,b);	}	o.removeListener=function(e,f,b){		this.detachEvent?this.detachEvent('on'+e,f):this.removeEventListener(e,f,b);	}	o.startDrag=function(obj){//参数obj默认为o本身，可以传其它参数以确定要移动的对象		var obj=obj?obj:o;		var sx,sy;		o.style.cursor="move";		o.addListener("mousedown",function(e){			e||event;			if(e.button==1||e.button==0){				sx=e.clientX-obj.offsetLeft;sy=e.clientY-obj.offsetTop;				d.addListener("mousemove",move,false);				d.addListener("mouseup",stopDrag,false);			}		},false);			var stopDrag=function(){			d.removeListener("mousemove",move,false);			d.removeListener("mouseup",stopDrag,false);		}		var move=function(e){			e||event;			window.getSelection ? window.getSelection().removeAllRanges() : 			document.selection.empty();			if(e.preventDefault)e.preventDefault();//这两句便是解决firefox拖动问题的.			with (obj.style){				position="absolute"				left=e.clientX-sx+"px";				top=e.clientY-sy+"px";			}		}	}	return o; }window.onload=function(){$("ok").startDrag($("os"))}//本例中拖动ok元素，移动其父元素</script><style type="text/css">*{margin:0;padding:0}#ok{width:192px;height:108px;background:url(/jscss/demoimg/201008/sample1.gif)}#os{width:400px;height:300px;background:#09f;left:300px}#os2{width:400px;height:300px;background:#f90;}</style></head><body><div id="os"><p id="ok"></p></div><div id="os2"></div></body></html>

上一篇：Js让网页浏览者适时选择字体颜色

下一篇：jQuery控制页面按顺序滚动至指定位置

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注