<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
xml:lang=
"zh"
lang=
"zh"
>
<head>
<title>鼠标拖动画矩形</title>
<meta http-equiv=
"content-type"
content=
"text/html;charset=utf-8"
>
<style type=
"text/css"
>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
html{color:
#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}
.div{position:absolute; border:1px dashed blue; width:0px; height:0px;left:0px; top:0px; overflow:hidden;}
.retc{position:absolute; border:1px solid
#CCCCCC; overflow:hidden; background:#EFEFEF}
</style>
</head>
<body>
</body>
<script language =
"javascript"
>
var
wId =
"w"
;
var
index = 0;
var
startX = 0, startY = 0;
var
flag =
false
;
var
retcLeft =
"0px"
, retcTop =
"0px"
, retcHeight =
"0px"
, retcWidth =
"0px"
;
document.onmousedown =
function
(e){
flag =
true
;
try
{
var
evt = window.event || e;
var
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var
scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
startX = evt.clientX + scrollLeft;
startY = evt.clientY + scrollTop;
index++;
var
div = document.createElement(
"div"
);
div.id = wId + index;
div.className =
"div"
;
div.style.marginLeft = startX +
"px"
;
div.style.marginTop = startY +
"px"
;
document.body.appendChild(div);
}
catch
(e){
}
}
document.onmouseup =
function
(){
try
{
document.body.removeChild($(wId + index));
var
div = document.createElement(
"div"
);
div.className =
"retc"
;
div.style.marginLeft = retcLeft;
div.style.marginTop = retcTop;
div.style.width = retcWidth;
div.style.height = retcHeight;
document.body.appendChild(div);
}
catch
(e){
}
flag =
false
;
}
document.onmousemove =
function
(e){
if
(flag){
try
{
var
evt = window.event || e;
var
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var
scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
retcLeft = (startX - evt.clientX - scrollLeft > 0 &
#63; evt.clientX + scrollLeft : startX) + "px";
retcTop = (startY - evt.clientY - scrollTop > 0 &
#63; evt.clientY + scrollTop : startY) + "px";
retcHeight = Math.abs(startY - evt.clientY - scrollTop) +
"px"
;
retcWidth = Math.abs(startX - evt.clientX - scrollLeft) +
"px"
;
$(wId + index).style.marginLeft = retcLeft;
$(wId + index).style.marginTop = retcTop;
$(wId + index).style.width = retcWidth;
$(wId + index).style.height = retcHeight;
}
catch
(e){
}
}
}
var
$ =
function
(id){
return
document.getElementById(id);
}
</script>
</html>