Posted in Javascript onMarch 29, 2016
本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../Content/StyleSheet5.css" rel="stylesheet" />
<script src="../Scripts/JavaScript5.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="center">
<div id="black"></div>
<div id="movebox">
<img id="moveimg" src="../Images/b.jpg"/>
</div>
<img id="bigimg" src="../Images/b.jpg" />
</div>
</body>
</html>
js:
var movebox;
window.onload = function () {
movebox = document.getElementById("movebox");
movebox.addEventListener("mousedown", function (e) {
if (e.button > 0) {
fun2();
return false;
}
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);
};
var fun1 = function (e) {
gen.L = e.clientX - gen.dx;
gen.T = e.clientY - gen.dy;
var timefun = function () {
window.getSelection().removeAllRanges();
if (gen.L < 100)
gen.L = 100;
else if (gen.L > 200)
gen.L = 200;
if (gen.T < 125)
gen.T = 125;
else if (gen.T > 175)
gen.T = 175;
setLT(movebox, gen.L, gen.T);
};
setTimeout(timefun, 2);
};
var fun2 = function () {
document.removeEventListener("mousemove", fun1, false);
document.removeEventListener("mouseuo", fun2, false);
};
var gen = {
x: null,
y: null,
_x: null,
_y: null,
dx: null,
dy: null,
L: null,
T:null,
};
var setLT = 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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。
js解决movebox移动问题
- Author -
月光为邻声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@