可视区域内鼠标拖拽框

来源：互联网发布：普法网络知识竞赛答题编辑：程序博客网时间：2024/06/05 00:33

要想在通过鼠标来拖拽div，就要在鼠标点下的时刻获取光标与div的距离。然后在光标移动时设置div的left值为光标的left减去那个距离，设置div的top值为光标的top减去那个距离。但是div的left与top是相对于body（即整个页面），而光标的left与top却是相对于可视区域而言的。在没有滚动条时，两者在参考系是一样的；但是在滚动条出现以后两者的参考系就不同了。所以，有两种解决办法，要么把两者的参考系都变成body，要么把两者的参考系都变成可视区域。在这里，我采取了body作为参考系的方法。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标拖拽框</title><style>body{height:1000px;width:1500px;}#box{position: absolute;top:0;left:0;background-color: red;width:100px;height:100px;cursor: pointer;}</style></head><body><div id="box"></div><script>function getPos(){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;return{x: scrollLeft, y: scrollTop};}//用以获取滚动条的距离function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}}var oDiv = document.getElementById('box');var disx = 0;var disy = 0;oDiv.onmousedown = function(ev){var oEvent = ev || event;var pos = getPos();disx = pos.x+oEvent.clientX - parseInt(getStyle(oDiv,'left'));disy = pos.y+oEvent.clientY - parseInt(getStyle(oDiv,'top'));document.onmousemove = function(ev){var oEvent = ev || event;var pos = getPos(oEvent);var l = pos.x+oEvent.clientX - disx;var h = pos.y+oEvent.clientY - disy;if(l<pos.x){l = pos.x;}if (l>document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv,'width'))) {l = document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv,'width'));}if(h<pos.y){h = pos.y;}if (h>document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv,'height'))) {h = document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv,'height'));}oDiv.style.left = l + 'px';oDiv.style.top = h + 'px';}document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;}return false;}</script></body></html>

0 0