自寫的Js網(wǎng)頁(yè)拖動(dòng)類

2024-09-05 12:17:59

字體：大中小

供稿：網(wǎng)友

自寫的Js拖動(dòng)類，僅供能考。

<!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>自寫的拖動(dòng)類……</title><script type="text/javascript">var d=document;//給document對(duì)象一個(gè)通用的事件偵聽方法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 $(){//接收一個(gè)id參數(shù)，返回帶有startDrag方法的對(duì)象	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){//參數(shù)obj默認(rèn)為o本身，可以傳其它參數(shù)以確定要移動(dòng)的對(duì)象		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拖動(dòng)問(wèn)題的.			with (obj.style){				position="absolute"				left=e.clientX-sx+"px";				top=e.clientY-sy+"px";			}		}	}	return o; }window.onload=function(){$("ok").startDrag($("os"))}//本例中拖動(dòng)ok元素，移動(dòng)其父元素</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   class="iwvjtn8m0"   id="os"><p id="ok"></p></div><div   class="iwvjtn8m0"   id="os2"></div></body></html>

上一篇：Js讓網(wǎng)頁(yè)瀏覽者適時(shí)選擇字體顏色

下一篇：jQuery控制頁(yè)面按順序滾動(dòng)至指定位置