拖拽
事件绑定 版
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 }
赞 (0)