老师你这个代码的拖拽效果在IE10中无法兼容啊，我还还有添加了跨浏览器处理 函数依然无法处理
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>无标题文档</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script src="js/jianqie.js" type="text/jscript"></script>
<style>
body{
background:#333;
}
#box{
position:absolute;
top:100px;
left:200px;
width:360px;
height:460px;
}
#img1{
opacity:0.7;
position:absolute;
top:0;
left:0;
}
#img2{
position:absolute;
top:0;
left:0;
clip:rect(0,100px,100px,0);
}
#main{
position:absolute;
border:1px solid #fff;
width:100px;
height:100px;
}
.minDiv{
position:absolute;
width:8px;
height:8px;
background:#fff;
}
.left-up{
left:-4px;
top:-4px;
cursor:nw-resize;
}
.up{
left:50%;
margin-left:-4px;
top:-4px;
cursor:n-resize;
}
.right-up{
right:-4px;
top:-4px;
cursor:ne-resize;
}
.left{
left:-4px;
margin-top:-4px;
top:50%;
cursor:e-resize;
}
.right{
right:-4px;
top:50%;
margin-top:-4px;
cursor:w-resize;
}
.left-bottom{
left:-4px;
bottom:-4px;
cursor:sw-resize;
}
.bottom{
bottom:-4px;
left:50%;
margin-left:-4px;
cursor:s-resize;
}
.right-bottom{
right:-4px;
bottom:-4px;
cursor:nw-resize;
}
#preview{
position:absolute;
left:670px;
top:100px;
height:460px;
width:360px;
}
#img3{
position:absolute;
}
</style>
</head>
<body>
<div id=box>
<img src="images/psb.jpg" alt="师大光影" id="img1"/>
<img src="images/psb.jpg" alt="师大光影" id="img2"/>
<div id=main>
<div id="left-up" class="minDiv left-up"></div>
<div id="upDiv" class="minDiv up"></div>
<div id="right-up" class="minDiv right-up"></div>
<div id="leftDiv" class="minDiv left"></div>
<div id= rightDiv class="minDiv right"></div>
<div id="left-bottom" class="minDiv left-bottom"></div>
<div id="downDiv" class="minDiv bottom"></div>
<div id="right-bottom" class="minDiv right-bottom"></div>
</div>
</div>
<div id="preview"><img src="images/psb.jpg" alt="师大光影" id="img3"/></div>
</body>
</html>
// JavaScript Document代码
window.onload=function(){
//禁止图片被选中
document.onselectstart=new Function("event.returnValue=false;");
var boxDiv=document.getElementById("box");
var mainDiv=document.getElementById("main");
var rightDiv=document.getElementById("rightDiv");
var upDiv=document.getElementById("upDiv");
var leftDiv=document.getElementById("leftDiv");
var downDiv=document.getElementById("downDiv");
var leftUpDiv=document.getElementById("left-up");
var rightUpDiv=document.getElementById("right-up");
var leftBottomDiv=document.getElementById("left-bottom");
var rightBottomDiv=document.getElementById("right-bottom");
var odrag=false;//默认图框不能被拖动
var ifKeyDown=false;//鼠标未被按下
var contact="";//表示被按下事件
//鼠标点击事件
rightDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="right";
}
upDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="up";
}
leftDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="left";
}
downDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="down";
}
leftUpDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="leftUp";
}
rightUpDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="rightUp";
}
leftBottomDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="leftBottom";
}
rightBottomDiv.onmousedown=function(e){
e.stopPropagation();
ifKeyDown=true;
contact="rightBottom";
}
//鼠标松开事件
window.onmouseup=function(){
ifKeyDown=false;
}
//鼠标拖动事件
window.onmousemove=function(event){
if(ifKeyDown==true){
switch(contact){
case "right":
rightMove(event); break;
case "up":
upMove(event);break;
case "left":
leftMove(event);break;
case "down":
downMove(event);break;
case "leftUp":
leftMove(event);
upMove(event);break;
case "rightUp":
rightMove(event);
upMove(event);break;
case "leftBottom":
leftMove(event);
downMove(event);break;
case "rightBottom":
rightMove(event);
downMove(event);break;
}
}
setPreview();
setChoice();
}
//上边移动
function upMove(event){
event=event||window.event;
var y=event.clientY;
var oTop=getPosition(mainDiv).top;
var addHeight=oTop-y;
var heightBefore=mainDiv.offsetHeight-2;
mainDiv.style.height=heightBefore+addHeight+"px";
mainDiv.style.top=mainDiv.offsetTop-addHeight+"px";
}
//右边移动
function rightMove(event){
event=event||window.event;
var x=event.clientX;
var widthBefore=mainDiv.offsetWidth-2;
var oLeft=getPosition(mainDiv).left;
var addWidth=x-oLeft-widthBefore;
mainDiv.style.width=addWidth+widthBefore+"px";
}
//左边移动
function leftMove(event){
event=event||window.event;
var oLeft=getPosition(mainDiv).left;
var x=event.clientX;
var addWidth=oLeft-x;
var widthBefore=mainDiv.offsetWidth-2;
mainDiv.style.width=widthBefore+addWidth+"px";
mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";
}
//下边移动
function downMove(event){
event=event||window.event;
var oTop=getPosition(mainDiv).top;
var y=event.clientY;
var heightBefore=mainDiv.offsetHeight-2;
var mainTop=oTop+heightBefore;
var addHeight=y-mainTop;
mainDiv.style.height=heightBefore+addHeight+"px";
}
//设置选取区域高亮可见
function setChoice(){
var top=mainDiv.offsetTop;
var left=mainDiv.offsetLeft;
var right=mainDiv.offsetLeft+ mainDiv.offsetWidth;
var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
var img2=document.getElementById("img2");
img2.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
//实现剪切区域预览
function setPreview(){
var top=mainDiv.offsetTop;
var left=mainDiv.offsetLeft;
var right=mainDiv.offsetLeft+ mainDiv.offsetWidth;
var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;
var img3=document.getElementById("img3");
img3.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
img3.style.left=-left+"px";
img3.style.top=-top+"px";
}
//图框拖动事件，为什么以下代码在IE10中都无法达到拖动效果？
//第一种办法（添加跨浏览器事件处理程序）
var eventUtil={
// 添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
// 删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
eventUtil.addHandler(mainDiv,'mousedown',function(e){
var e=e||window.event;
mouse0ffsetX=e.clientX-mainDiv.offsetLeft;
mouseOffsetY=e.clientY-mainDiv.offsetTop;
odrag=true;
})
eventUtil.addHandler(document,'mousemove',function(e){
var e=e||window.event;
var e=e||window.event;
var mouseX=e.clientX;
var mouseY=e.clientY;
var moveX=0;
var moveY=0;
if(odrag==true){
moveX=mouseX-mouse0ffsetX;
moveY=mouseY-mouseOffsetY;
mainDiv.style.left= moveX+"px";
mainDiv.style.top= moveY+"px";
}
})
eventUtil.addHandler(document,'mouseup',function(){
odrag=false;
})
//第二种办法
/*mainDiv.onmousedown=function(e){
var e=e||window.event;
mouse0ffsetX=e.clientX-mainDiv.offsetLeft;
mouseOffsetY=e.clientY-mainDiv.offsetTop;
odrag=true;
}
document.onmousemove=function(e){
var e=e||window.event;
var mouseX=e.clientX;
var mouseY=e.clientY;
var moveX=0;
var moveY=0;
if(odrag==true){
moveX=mouseX-mouse0ffsetX;
moveY=mouseY-mouseOffsetY;
mainDiv.style.left= moveX+"px";
mainDiv.style.top= moveY+"px";
}
}
document.onmouseup=function(){
odrag=false;
}
*/
//获取元素相对于屏幕左边和上边的距离 利用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};
}
}
