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; }
以上就是本文的全部内容,希望对大家的学习有所帮助。