js实现拖拉正方形

高级java工程师

浏览: 410571 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

starry129

huizhou55

suming

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Opera IE XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>定位</title>
<script type="text/javascript">
function getRealStyle(obj,s) {
var style;
if (window.getComputedStyle) {//W3C DOM
style=window.getComputedStyle(obj,null);
} else if (obj.currentStyle) {//IE
style=obj.currentStyle;
}
return style[s];
}

function innerSize() {
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
}
window.onload=function () {
var oDiv=document.getElementById("oDiv");
/*var w=getRealStyle(oDiv,'width'),
h=getRealStyle(oDiv,'height');
var innerDiv=document.getElementById("innerDiv");
var w=oDiv.clientWidth,
h=oDiv.clientHeight,
sw=oDiv.scrollWidth,
sh=oDiv.scrollHeight,
ow=oDiv.offsetWidth,
oh=oDiv.offsetHeight,
size=innerSize(),
cl=oDiv.clientLeft,
ct=oDiv.clientTop,
x=oDiv.offsetLeft,
y=oDiv.offsetTop;
//alert(w+"\n"+h);
//alert(ow+"\n"+oh);
//alert(size.width+"\n"+size.height);
//alert(sw+"\n"+sh);
//alert(x+"\n"+y);
//alert(innerDiv.offsetLeft+"\n"+innerDiv.offsetTop);
//alert(innerDiv.offsetParent.tagName);
//var de=document.documentElement;
//alert(de.scrollLeft+"\n"+de.scrollTop);

addEvent(oDiv,'click',function (evt) {
//alert("Client:"+"\n"+evt.clientX+"\n"+evt.clientY);
//alert(evt.layerX+"\n"+evt.layerY);
//alert("Page:"+"\n"+evt.pageX+"\n"+evt.pageY);
//Opera支持addEventListener方法，但不支持layerX/layerY
//Opera使用offsetX/offsetY
});*/

addEvent(oDiv,'mousedown',function (evt) {
evt.preventDefault();
this.flag=true;
this.savedMousePos={
x:evt.layerX,
y:evt.layerY
};
});
addEvent(oDiv,'mousemove',function (evt) {
evt.preventDefault();
if (!this.flag) {
return;
}
this.style.left=evt.clientX-this.savedMousePos.x+"px";
this.style.top=evt.clientY-this.savedMousePos.y+"px";
});
addEvent(document,'mouseup',function (evt) {
oDiv.flag=false;
});
};
function addEvent(obj,evt,fn) {
if (obj.addEventListener) {
if (String(window.opera)=="[object Opera]") {
obj.addEventListener(evt,function (evt) {
evt.layerX=evt.offsetX;
evt.layerY=evt.offsetY;
fn.call(this,evt);
},false);
} else {
obj.addEventListener(evt,fn,false);
}
obj.addEventListener(evt,fn,false);
return obj;
}

if (!obj.functions) obj.functions={};
if (!obj.functions[evt])
obj.functions[evt]=[];

//obj.functions["mousedown"]=[]
var functions=obj.functions[evt];
for (var i=0;i<functions.length;i++) {
if (functions[i]===fn) return obj;
}
functions.push(fn);
//fn.index=functions.length-1;

if (typeof obj["on"+evt]=="function") {
//alert(obj["on"+evt]);//当这一行执行到时，obj["on"+evt] 就是handler
//alert(obj["on"+evt]==handler);
if (obj["on"+evt]!=handler)
functions.push(obj["on"+evt]);
}
obj["on"+evt]=handler;
return obj;

}

function handler() {//哪个事件发生了?
//对event对象标准化
var evt=fixEvt(window.event);
var evtype=evt.type;
var functions=this.functions[evtype];
for (var i=0;i<functions.length;i++) {
if (functions[i]) functions[i].call(this,evt);
}
}

function fixEvt(evt) {
evt.target=evt.srcElement;
if (evt.type=="mouseover")
evt.relatedTarget=evt.fromElement;
else if ("mouseout"==evt.type)
evt.relatedTarget=evt.toElement;

evt.stopPropagation=function () {
evt.cancelBubble=true;
};
evt.preventDefault=function () {
evt.returnValue=false;
};
evt.layerX=evt.offsetX;
evt.layerY=evt.offsetY;
evt.pageX = evt.clientX+document.documentElement.scrollLeft;
evt.pageY = evt.clientY+document.documentElement.scrollTop;

return evt;
}
</script>
<style type="text/css">
#oDiv {
width:200px;
height:200px;
border:3px ridge aqua;
background:blue;
position:absolute;
left:100px;
top:100px;
}
#innerDiv {
width:30px;
height:30px;
margin:4px;
border:10px outset yellow;
background:fuchsia;

}
</style>
</head>
<body class="redStyle">
<h1>定位</h1>

<div id="oDiv">

</div>

</body>
</html>
效果看附件：