限制范圍的拖拽，要求被拖拽的對象必須在客戶區可見范圍！
div是body的子元素，div的left/top是針對body的，不是針對可見客戶區的，所以在拖拽的過程中不得不考慮被卷走的部分，因為網頁文檔可能很大，無論寬度還是高度都可能大于客戶區，等于客戶區大小就很好處理，大于的話就得考慮scrollTop和scrollLeft，否則div會跟鼠標脫離，因為距離都算錯了。
/*切記：凡是clientX/Y 的 一定記得卷走的部分*/document.body是DOM中Document對象里的body節點,document.documentElement是文檔對象根節點(html)的引用,document.documentElement.scrollHeight網頁整體高度
function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x:sl+ev.clientX, y:st+ev.clientY};}<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>客戶區可見范圍限制拖拽</title> <style type="text/css"> * { padding: 0; margin: 0; } #div1 { width: 100px; height: 100px; background: orange; position: absolute; } </style></head><body style="width: 200000px;height: 200000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } //getPos得到的是鼠標當前位置距離頁面最左/上邊的距離,包括被卷走的部分 function getPos(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return { x : scrollLeft + ev.clientX, y : scrollTop + ev.clientY }; } function getScrollPos() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return { x : scrollLeft, y : scrollTop }; } oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); var disX = pos.x - parseInt(getStyle(oDiv, 'left')); var disY = pos.y - parseInt(getStyle(oDiv, 'top')); document.onmousemove = function(ev) { var oEvent = ev || event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; if (l < 0) { l = 0; } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) { l = document.documentElement.clientWidth - oDiv.offsetWidth; } if (t < 0) { t = 0; } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) { t = document.documentElement.clientHeight - oDiv.offsetHeight; } l = l + getScrollPos().x;//最后left是相對于body的，加上卷走的部分scrollLeft； t = t + getScrollPos().y;//加上卷走的高度scrollTop // oDiv.style.left = l + 'px'; // oDiv.style.top = t + 'px'; oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
