拖拽

事件绑定版

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <title>Document</title>
 7   <style>
 8     #box {
 9       width: 200px;
10       height: 200px;
11       background: red;
12       position: absolute;
13     }
14   </style>
15 </head>
16 <body>
17   <div id="box">box</div>
18   <script>
19     var oBox = document.querySelector('#box')
20     oBox.onmousedown = function (e) {
21       e = e || window.event
22       // 一旦鼠标按下了，鼠标到div的距离就应该固定下来了，所以要在这里获取
23       // 获取鼠标到div的顶部和左边的距离
24       var disX = e.offsetX
25       var disY = e.offsetY
26       // move事件写给document，因为只要在box上按下了，在文档中移动都应该触发
27       document.onmousemove = function (e) {
28         e = e || window.event
29         var left = e.clientX - disX
30         var top = e.clientY - disY
31         
32         oBox.style.left = left + 'px'
33         oBox.style.top = top + 'px'
34       }
35       // up事件也写给document，这样鼠标在拖到外面up就也会触发
36       document.onmouseup = function () {
37         // 鼠标抬起停止拖拽
38         document.onmousemove = null
39       }
40       // 避免全选文字造成的bug，在这里阻止默认行为
41       if (e.preventDefault) {
42         e.preventDefault()
43       } else {
44         return false
45       }
46     }
47   </script>
48 </body>
49 </html>

事件监听，限定范围版

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <title>Document</title>
 7   <script src="../../utils.js"></script>
 8   <style>
 9     #box {
10       width: 200px;
11       height: 200px;
12       background: red;
13       position: absolute;
14     }
15   </style>
16 </head>
17 <body>
18   <div id="box">box</div>
19   <script>
20     var oBox = document.querySelector('#box')
21     
23     on(oBox, 'mousedown', function (e) {
24       // 每次mousedown的时候都要重新计算一下最大值，防止浏览器缩放导致值不准确
25       var maxLeft = window.innerWidth - oBox.offsetWidth
26       var maxTop = window.innerHeight - oBox.offsetHeight
27       e = e || window.event
28       // 获取鼠标到box的相对坐标
29       var disX = e.offsetX
30       var disY = e.offsetY
31       function move (e) {
32         e = e || window.event
33         var top = e.clientY - disY
34         var left = e.clientX - disX
35         // 判断
36         if (top < 0) top = 0
37         if (top > maxTop) top = maxTop
38 
39         if (left < 0) left = 0
40         if (left > maxLeft) left = maxLeft
41 
42         oBox.style.left = left + 'px'
43         oBox.style.top = top + 'px'
44       }
45       on(document, 'mousemove', move)
46       on(document, 'mouseup', function () {
47         off(document, 'mousemove', move)
48       })
49       // 防止全选文字，阻止默认行为
50       if (e.preventDefault) {
51         e.preventDefault()
52       } else {
53         return false
54       }
55     })
56   </script>
57 </body>
58 </html>

utils.js代码

 1 const utils = {
 2   /**
 3    * 添加事件监听
 4    * @param ele         <DOMObject> 添加事件的DOM元素
 5    * @param type        <string>    事件类型（不带on）
 6    * @param fn          <function>  事件处理函数
 7    * @param [isCapture] <boolean>   可选参数，是否捕获，true代表捕获，false代表冒泡，默认为false
 8    */
 9   on: function (ele, type, fn, isCapture) {
10     // 如果参数没有传，默认值为false
11     if (isCapture === undefined) isCapture = false
12     if (ele.attachEvent) {
13       // IE
14       ele.attachEvent('on' + type, fn)
15     } else {
16       ele.addEventListener(type, fn, isCapture)
17     }
18   },
19   /**
20    * 移出事件监听
21    * @param ele         <DOMObject> 添加事件的DOM元素
22    * @param type        <string>    事件类型（不带on）
23    * @param fn          <function>  事件处理函数
24    * @param [isCapture] <boolean>   可选参数，是否捕获，true代表捕获，false代表冒泡，默认为false
25    */
26   off: function (ele, type, fn, isCapture) {
27     // 如果参数没有传，默认值为false
28     if (isCapture === undefined) isCapture = false
29     if (ele.detachEvent) {
30       ele.detachEvent('on' + type, fn)
31     } else {
32       ele.removeEventListener(type, fn, isCapture)
33     }
34   }
35 }

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。