为什么无法移动选取框，也不能放大？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="text.js"></script>
<style>
body {background:#333;}
#box{position:absolute;top:100px;left:200px;width:460px;height:360px;}
#img1{opacity:0.7;position:absolute;top:0;left:0;}
#img2{position:absolute;top:0;left:0;clip:rect(0,200px,200px,0)}
#main{position:absolute;border:1px solid #fff;width:200px;height:200px;}
.minDiv{position:absolute;width:6px;height:6px;background:#fff;}
.left-up{top:-3px;left:-3px;cursor:nw-resize;}
.up{left:50%;margin-top:-3px;cursor:n-resize;}
.right-up{right:-3px;top:-3px;cursor:ne-resize;}
.right{right:-3px;top:50%;margin-top: -3px;cursor:e-resize;}
.right-down{right:-3px;bottom:-3px;cursor:se-resize;}
.down{bottom:-3px;left:50%;margin-left: -3px;cursor:s-resize;}
.left-down{left:-3px;bottom:-3px;cursor:sw-resize;}
.left{left:-3px;top:50%;margin-top: -3px;cursor:w-resize;}
</style>
</head>
<body>
<div id="box">
<img src="F:\java\a1.jpg" id="img1"/>
<img src="F:\java\a1.jpg" id="img2"/>
<div id="main">
<div class="minDiv left-up"></div>
<div class="minDiv up"></div>
<div class="minDiv right-up"></div>
<div class="minDiv right"></div>
<div class="minDiv right-down"></div>
<div class="minDiv down"></div>
<div class="minDiv left-down"></div>
<div class="minDiv left"></div>
</div>
</div>
</body>
</html>/*
* @Author: anchen
* @Date: 2016-06-17 17:12:59
* @Last Modified by: anchen
* @Last Modified time: 2016-06-17 22:11:10
*/
window.onload=function()
{
var rightDiv=document.getElementById("right");
var mainDiv=document.getElementById("main");
var ifKeyDown=false;//鼠标当前状态
//鼠标按下事件
window.onmousedown=function()
{
ifKeyDown=true;
}
//鼠标松开事件
window.onmouseup=function()
{
ifKeyDown=false;
}
//鼠标移动事件
window.onmousemove=function(e)
{
if(ifKeyDown==true)
{
var x = e.clientX;//鼠标x坐标
var addWidth = "";//鼠标移动后选取框的宽度
var widthBefore = mainDiv.offsetWidth-2;//选取框变化之前的宽度
addWidth = x - getPosition(mainDiv).left - widthBefore;
mainDiv.style.width=addWidth+widthBefore+"px";//选取框变化后
}
}
}
//获取元素相当于屏幕左边的距离，利用offsetleft
function getPosition(node)
{
var left = node.offsetLeft;
var top = node.offsetTop;
var parent = node.offsetParent;
while(parent !=null)
{
left+=parent.offsetLeft;
top+=parent.offsetTop;
parent.parent.offsetParent;
}
return {"left":left,"top":top};
}两个代码已经粘贴了，哪位能帮忙解决下？
