JavaScript限制在客戶區可見範圍的拖拽(解決scrollLeft和scrollTop的問題)（2），scrolltopscrollleft

最後更新：2017-05-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

限制範圍的拖拽，要求被拖拽的對象必須在客戶區可見範圍！

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>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More