如何解決JavaScript限制在客戶區(qū)可見范圍的拖拽的問題

發(fā)布時(shí)間：2021-07-21 10:37:23 來源：億速云閱讀：165 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“如何解決JavaScript限制在客戶區(qū)可見范圍的拖拽的問題”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決JavaScript限制在客戶區(qū)可見范圍的拖拽的問題”這篇文章吧。

限制范圍的拖拽，要求被拖拽的對(duì)象必須在客戶區(qū)可見范圍！

div是body的子元素，div的left/top是針對(duì)body的，不是針對(duì)可見客戶區(qū)的，所以在拖拽的過程中不得不考慮被卷走的部分，因?yàn)榫W(wǎng)頁(yè)文檔可能很大，無論寬度還是高度都可能大于客戶區(qū)，等于客戶區(qū)大小就很好處理，大于的話就得考慮scrollTop和scrollLeft，否則div會(huì)跟鼠標(biāo)脫離，因?yàn)榫嚯x都算錯(cuò)了。

/*切記：凡是clientX/Y 的 一定記得卷走的部分*/
document.body是DOM中Document對(duì)象里的body節(jié)點(diǎn),
document.documentElement是文檔對(duì)象根節(jié)點(diǎn)(html)的引用,
document.documentElement.scrollHeight網(wǎng)頁(yè)整體高度

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>客戶區(qū)可見范圍限制拖拽</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }
    #div1 {
      width: 100px;
      height: 100px;
      background: orange;
      position: absolute;
    }
  </style>
</head>
<body >
  <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得到的是鼠標(biāo)當(dāng)前位置距離頁(yè)面最左/上邊的距離,包括被卷走的部分
    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是相對(duì)于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>

以上是“如何解決JavaScript限制在客戶區(qū)可見范圍的拖拽的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何解決JavaScript限制在客戶區(qū)可見范圍的拖拽的問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽