为什么我的向左和向上都不行，而且这个代码还有一个小bug，就是在边界的时候，点一下往下 划一下，重复做这个动作就会导致选择框溢出box。注：用的谷歌浏览器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片裁剪</title>
<style type="text/css">
body{background-color: #333;}
#box{width: 460px;height: 360px;position: absolute;left: 200px;top: 100px;}
#img1,#img2,#img3{position: absolute;left: 0;top: 0;}
#img1{opacity: 0.7;}
#img2{clip: rect(0px,200px,200px,0px);}
#main{width: 200px;height: 200px;border: 1px solid white;cursor: move;}
.min{width: 8px;height: 8px;background-color: white;position: absolute;}
.left-up{left: -4px;top:-4px;cursor:nw-resize;}
.up{left:50%;top:-4px;margin-left: -4px;cursor:n-resize;}
.right-up{right: -4px;top: -4px;cursor:ne-resize;}
.left{top: 50%;left: -4px;margin-top: -4px;cursor:e-resize;}
.right{top: 50%;right: -4px;margin-top: -4px;cursor:e-resize; }
.left-down{left:-4px;bottom: -4px;cursor:sw-resize;}
.down{left: 50%;bottom: -4px;margin-left: -4px;cursor:s-resize;}
.right-down{bottom: -4px;right: -4px;cursor:se-resize;}
#preview{position: absolute;top:100px;left:680px;width:460px;height:360px;}
#preview #img3{position: absolute;top:0;left:0;}
</style>
<script type="text/javascript" src="./js实现图片裁剪/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./js实现图片裁剪/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
window.onload=function(){
document.onselectstart=new Function('event.returnValue=false;');
$( "#main" ).draggable({containment: 'parent'});
var mainDiv=document.getElementById('main');
var boxDiv=document.getElementById('box');
var mainWidth=mainDiv.offsetWidth-2;
var mainHeight=mainDiv.offsetHeight-2;
var boxWidth=box.offsetWidth-2;
var boxHeight=box.offsetHeight-2;
var rightDiv = document.getElementById("right");
var upDiv = document.getElementById("up");
var leftDiv = document.getElementById("left");
var downDiv = document.getElementById("down");
var leftUpDiv=document.getElementById("leftUp");
var rightUpDiv=document.getElementById("rightUp");
var leftDownDiv=document.getElementById("leftDown");
var rightDownDiv = document.getElementById("rightDown");
var contact="";
var set=false;
//鼠标按下事件
rightDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "right";
}
upDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "up";
}
leftDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "left";
}
downDiv.onmousedown = function(e){
e.stopPropagation(e);
set = true;
contact = "down";
}
leftUpDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "leftUp";
}
rightUpDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "rightUp";
}
leftDownDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "leftDown";
}
rightDownDiv.onmousedown = function(e){
e.stopPropagation();
set = true;
contact = "rightDown";
}
window.onmousemove=function(e){
if(set){
switch(contact){
case 'up':moveUp(e);break;
case 'left':moveLeft(e);break;
case 'right':moveRight(e);break;
case 'down':moveDown(e);break;
case 'leftUp':moveLeft(e);moveUp(e);break;
case 'rightUp':moveRight(e);moveUp(e);break;
case 'leftDown':moveLeft(e);moveDown(e);break;
case 'rightDown':moveRight(e);moveDown(e);break;
}
}
setChoice();
setPreview();
}
window.onmouseup = function(){
set= false;
contact = "";
}
setChoice();//初始化选择区域可见
//上边移动
function moveUp(e){
var mainDivTop=getPOsition(mainDiv).top;
var y=e.clientY;
if(y < getPOsition(boxDiv).top){
y = getPOsition(boxDiv).top;
}
var addHeight=mainDivTop-y;
mainDiv.style.height=mainHeight+addHeight+'px';
mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';
}
//左边移动
function moveLeft(e){
var mainDivLeft=getPOsition(mainDiv).left;
var x=e.clientX;
if(x < getPOsition(boxDiv).left){
x = getPOsition(boxDiv).left;
}
var addWidth=mainDivLeft-x;
mainDiv.style.width= mainWidth+addWidth+'px';
mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';
}
//右边移动
function moveRight(e){
var mainDivLeft=getPOsition(mainDiv).left;
var x=e.clientX;
if(x > getPOsition(boxDiv).left + boxDiv.offsetWidth){
x = getPOsition(boxDiv).left + boxDiv.offsetWidth;
}
var addWidth=x-mainDivLeft-mainWidth;
mainDiv.style.width=mainWidth+addWidth+'px';
}
//下边移动
function moveDown(e){
var mainDivTop=getPOsition(mainDiv).top;
var y=e.clientY;
if(y > getPOsition(boxDiv).top + boxDiv.offsetHeight){
y = getPOsition(boxDiv).top + boxDiv.offsetHeight;
}
var addHeight=y-mainDivTop-mainWidth;
mainDiv.style.height=mainHeight+addHeight+'px';
}
//获取元素距离屏幕的距离
function getPOsition(node){
var left=node.offsetLeft;
var top=node.offsetTop;
var current=node.offsetParent;
while(current!=null){
left+=current.offsetLeft;
top+=current.offsetTop;
current=current.offsetParent;
}
return {"left":left,"top":top};
}
//设置选取区域高亮可见
function setChoice(){
var top = mainDiv.offsetTop;
var right = mainDiv.offsetLeft+mainDiv.offsetWidth;
var bottom = mainDiv.offsetTop+mainDiv.offsetHeight;
var left = mainDiv.offsetLeft;
var img2 = document.getElementById("img2");
img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
//预览函数
function setPreview(){
var top = mainDiv.offsetTop;
var right = mainDiv.offsetLeft+mainDiv.offsetWidth;
var bottom = mainDiv.offsetTop+mainDiv.offsetHeight;
var left = mainDiv.offsetLeft;
var img3 = document.getElementById("img3");
img3.style.top = -top+"px";
img3.style.left = -left+"px";
img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
}
</script>
</head>
<body>
<div id="box">
<img src="./js实现图片裁剪/js/1.jpg" id="img1">
<img src="./js实现图片裁剪/js/1.jpg" id="img2">
<div id="main">
<div id="leftUp" class="min left-up"></div>
<div id="up" class="min up"></div>
<div id="rightUp" class="min right-up"></div>
<div id="left" class="min left"></div>
<div id="right" class="min right"></div>
<div id="leftDown" class="min left-down"></div>
<div id="down" class="min down"></div>
<div id="rightDown" class="min right-down"></div>
</div>
</div>
<div id="preview">
<img id="img3" src="./js实现图片裁剪/js/1.jpg"/>
</div>
</body>
</html>
zheshi?