js解决movebox移动问题

内容摘要
本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下
html:




<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Conte
文章正文

本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。
代码注释
上一篇Redis基本知识、安装、部署、配置笔记下一篇win7系统安装Dreamweaver CS6提示错误代码0xc000007b的解决方法

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！