js兑现拖拉正方形
日期：2014-05-16 浏览次数：20327 次
js实现拖拉正方形
<!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.srcElemen
<!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.srcElemen
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
