JavaScript DOM 鼠标拖拽
在前端页面交互中,鼠标拖拽是一个体验良好的功能,实现鼠标拖拽需要了解鼠标行为坐标系和涉及到的许多兼容性写法。本文介绍鼠标位置的获取和、拽功能的实现以及拖拽函数的封装
鼠标行为坐标系
鼠标行为触发事件时,事件对象上会有一些属性提供鼠标的位置信息
属性 功能 兼容性 clientX/Y 鼠标相对可视区域的坐标 / x/y 与 clientX/Y 功能相同 firefox 低版本不支持 pageX/Y 鼠标相对整个文档的坐标 兼容 IE9 及以上 layerX/Y 与 pageX/Y 功能相同 IE10 及以下同 clientX/Y screenX/Y 鼠标位置相对屏幕坐标 / offsetX/Y 鼠标位置相对块元素的坐标(包含边框) safari 不包含边框 获取鼠标相对整个文档的坐标:pageX/Y 兼容性差,需要进行封装
鼠标相对整个文档的坐标 = 鼠标相对可视区域的坐标 + 滚动条滚动距离 - 文档偏移
document.documentElement.clientTop 获取文档偏移,在 IE 一些版本中为 undefined
function pagePos(ev) { var sTop = getScrollOffset().top, sLeft = getScrollOffset().left, cTop = document.documentElement.clientTop || 0, cLeft = document.documentElement.clientLeft || 0; return { X: ev.clientX + sLeft - cLeft, Y: ev.clientY + sTop - cTop } } // 封装的函数:获取滚动条滚动距离 function getScrollOffset() { if (window.pageXOffset) { return { top: window.pageYOffset, left: window.pageXOffset } } else return { top:document.body.scrollTop || document.documentElement.scrollTop, left:document.body.scrollLeft || document.documentElement.scrollLeft } }
拖拽函数封装
拖拽效果基于鼠标事件:mousedown、mousemove、mouseup
分别为鼠标按下、鼠标移动、鼠标松开
原理:鼠标按下时,添加鼠标移动、鼠标松开的事件处理函数,鼠标移动时获取鼠标坐标,改变元素样式,鼠标松开时清除鼠标移动和鼠标松开的事件处理函数
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Index</title> <style type="text/css"> .box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box"></div> <script> var box = document.getElementsByTagName('div')[0]; box.onmousedown = function (ev) { var ev = ev || window.event, x = pagePos(ev).X - parseInt(getStyles(box)['left']), y = pagePos(ev).Y - parseInt(getStyles(box)['top']); document.onmousemove = function (ev) { var ev = ev || window.event, mPos = pagePos(ev); box.style.left = mPos.X - x + 'px'; box.style.top = mPos.Y - y + 'px'; } document.onmouseup = function () { this.onmousemove = null; this.onmouseup = null; } } // 封装的函数:获取鼠标相对整个文档的坐标 function pagePos(ev) { var sTop = getScrollOffset().top, sLeft = getScrollOffset().left, cTop = document.documentElement.clientTop || 0, cLeft = document.documentElement.clientLeft || 0; return { X: ev.clientX + sLeft - cLeft, Y: ev.clientY + sTop - cTop } } // 封装的函数:获取滚动条滚动距离 function getScrollOffset() { if (window.pageXOffset) { return { top: window.pageYOffset, left: window.pageXOffset } } else return { top: document.body.scrollTop || document.documentElement.scrollTop, left: document.body.scrollLeft || document.documentElement.scrollLeft } } // 封装的函数:获取元素样式的类数组 function getStyles(elem) { if (window.getComputedStyle) { return window.getComputedStyle(elem, null); } else return elem.currentStyle; } </script> </body> </html>
封装拖拽函数
var box = document.getElementsByTagName('div')[0]; elemDrag(box); // 封装的拖拽函数 function elemDrag(elem) { var x, y; addEvent(elem, 'mousedown', function (ev) { var ev = ev || window.event; x = pagePos(ev).X - parseInt(getStyles(elem)['left']); y = pagePos(ev).Y - parseInt(getStyles(elem)['top']); addEvent(document, 'mousemove', mousemove); addEvent(document, 'mouseup', mouseup); cancelBubble(ev); preventDefaultEvent(ev); }); function mousemove(ev) { var ev = ev || window.event; elem.style.left = pagePos(ev).X - x + 'px'; elem.style.top = pagePos(ev).Y - y + 'px'; } function mouseup(ev) { var ev = ev || window.event; removeEvent(document, 'mousemove', mousemove); removeEvent(document, 'mouseup', mouseup); } } // 绑定事件处理函数 function addEvent(elem, type, fn) { if (elem.addEventListener) { elem.addEventListener(type, fn); } else if (elem.attachEvent) { elem.attachEvent('on' + type, function (ev) { fn.call(elem, ev); // call 兼容性比 bind 好 }); } else { elem['on' + type] = fn; } } // 解绑事件处理函数 function removeEvent(elem, type, fn) { if (elem.addEventListener) { elem.removeEventListener(type, fn); } else if (elem.attachEvent) { elem.detachEvent('on' + type, fn); } else { elem['on' + type] = null; } } // 获取鼠标在整个文档中的坐标 function pagePos(ev) { var sTop = getScrollOffset().top, sLeft = getScrollOffset().left, cTop = document.documentElement.clientTop || 0, cLeft = document.documentElement.clientLeft || 0; return { X: ev.clientX + sLeft - cLeft, Y: ev.clientY + sTop - cTop } } // 获取滚动条滚动距离 function getScrollOffset() { if (window.pageXOffset) { return { top: window.pageYOffset, left: window.pageXOffset } } else return { top: document.body.scrollTop || document.documentElement.scrollTop, left: document.body.scrollLeft || document.documentElement.scrollLeft } } // 获取元素样式的类数组 function getStyles(elem) { if (window.getComputedStyle) { return window.getComputedStyle(elem, null); } else return elem.currentStyle; } // 阻止冒泡 function cancelBubble(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else ev.cancelBubble = true; // 兼容 IE8 及以下 } // 阻止默认事件 function preventDefaultEvent(ev) { if (ev.preventDefault) { ev.preventDefault(); } else ev.returnValue = false; // 兼容 IE8 及以下 }
赞 (0)