首页 > web前端 > js教程 > js拖拽功能实现代码解析

js拖拽功能实现代码解析

高洛峰
发布: 2016-12-03 16:05:06
原创
1460 人浏览过

本文解决的问题:

1、怎样在网页中实现拖曳功能;

2、document.documentElement与document.body的区别。 
document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。

3、getBoundingClientRect().left与offsetLeft的区别。 
getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。

4、e.clientX指的是鼠标点相对于窗口的坐标。

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

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>弹窗</title>

 <style type="text/css">

  #mask {

   position: fixed;

   left:0;

   top:0;

   width:100%;

   height: 100%;

   background-color: hsla(250,100%,50%,0.6);

   display: none;

  }

  #popBox {

   position: absolute;

   background-color: #fff;

   width:200px;

   height: 200px;

   /*left:50%;

   top:50%;*/

   /*margin-top: -100px;

   margin-left: -100px;*/

  }

 </style>

</head>

<body>

 <button id="clickBtn">点击</button>

 <div id="mask">

  <div id="popBox"></div>

 </div>

 <script type="text/javascript">

  var clickBtn = document.getElementById("clickBtn");

  var popBox = document.getElementById("popBox")

  var mask = document.getElementById("mask");

  clickBtn.onclick = function() {

   mask.style.display = "block";

   popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";

   popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";

  

  }

  popBox.onclick = function(e) {

   var e = e || window.event;//e指所有代码的集合,通过它可以获取事件的各种属性。

   e.cancelBubble = true;//阻止事件冒泡,即点击事件不会传递到mask这一层,意味着不会触发点击mask事件代码。

  }

  mask.onclick = function() {

   mask.style.display = "none";

  }

  

  //拖拽 mousedown->mousemove->mouseup

  popBox.onmousedown = function(e) {

   var e = e || window.event;

   var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。

   var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。

   var oY = e.clientY - pos.top;

   document.onmousemove = function(e) {

    var e = e || window.event;

    var oLeft = e.clientX - oX;

    var oTop = e.clientY - oY;

    popBox.style.left = oLeft + "px";

    popBox.style.top = oTop + "px";

    if (oLeft<0) {

     popBox.style.left = 0 + "px";

    };

    if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {

     popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。

  

  

    }

    if (oTop<0) {

     popBox.style.top = 0 + "px";

    };

    if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {

     popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";

    }

  

   }

   popBox.onmouseup = function() {

    document.onmousemove = null;

   }

  }

 </script>

</body>

</html>

登录后复制

   


相关标签:
js
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板