js解决movebox移动问题
本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下
html:
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <linkhref="../Content/StyleSheet5.css"rel="stylesheet"/> <scriptsrc="../Scripts/JavaScript5.js"></script> <title></title> <metacharset="utf-8"/> </head> <body> <divid="center"> <divid="black"></div> <divid="movebox"> <imgid="moveimg"src="../Images/b.jpg"/> </div> <imgid="bigimg"src="../Images/b.jpg"/> </div> </body> </html>
js:
varmovebox;
window.onload=function(){
movebox=document.getElementById("movebox");
movebox.addEventListener("mousedown",function(e){
if(e.button>0){
fun2();
returnfalse;
}
e.preventDefault&&e.preventDefault();//明哥：去掉图片拖动响应狠重要
gen.x=e.clientX;
gen.y=e.clientY;
gen._x=movebox.offsetLeft;
gen._y=movebox.offsetTop;
gen.dx=gen.x-gen._x;
gen.dy=gen.y-gen._y;
document.addEventListener("mousemove",fun1,false);
document.addEventListener("mouseup",fun2,false);
},false);
};
varfun1=function(e){
gen.L=e.clientX-gen.dx;
gen.T=e.clientY-gen.dy;
vartimefun=function(){
window.getSelection().removeAllRanges();
if(gen.L<100)
gen.L=100;
elseif(gen.L>200)
gen.L=200;
if(gen.T<125)
gen.T=125;
elseif(gen.T>175)
gen.T=175;
setLT(movebox,gen.L,gen.T);
};
setTimeout(timefun,2);
};
varfun2=function(){
document.removeEventListener("mousemove",fun1,false);
document.removeEventListener("mouseuo",fun2,false);
};
vargen={
x:null,
y:null,
_x:null,
_y:null,
dx:null,
dy:null,
L:null,
T:null,
};
varsetLT=function(dom,L,T){
dom.style.left=L+"px";
dom.style.top=T+"px";
};
css:
body{
position:absolute;
margin:0;
padding:0;
}
#center{
position:absolute;
top:200px;
left:300px;
width:400px;
height:400px;
background-color:#808080;
}
#black{
position:absolute;
width:400px;
height:400px;
z-index:80;
background-color:#000;
opacity:0.6;
}
#bigimg{
z-index:50;
position:absolute;
left:100px;
top:125px;
}
#movebox{
z-index:100;
position:absolute;
width:100px;
height:100px;
left:150px;
top:150px;
overflow:hidden;
cursor:move;
background-color:#ff6a00;
}
#moveimg{
position:absolute;
left:-50px;
top:-25px;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。