事件绑定 版
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 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 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 }