JavaScript實現拖拽和縮放效果

阿新 • • 發佈：2020-08-25

本文例項為大家分享了JavaScript實現拖拽和縮放效果的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>拖拽縮放</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
  * {
    margin: 0;
    padding: 0
  }

  #box {
    width: 100%;
    height: 100%;
    position: relative;
    background: #4bb0bb
  }

  #drag {
    width: 200px;
    height: 200px;
    position: relative;
    background: #691fff;
    cursor: move;
  }

  #scale {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #ffa500;
    cursor: se-resize;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
</style>

<body>
  <div id="box">
    <div id="drag">
      <div id="scale"></div>
    </div>
  </div>
</body>
<script>

  window.onload = function () {
    var box = document.getElementById("box")
    var drag = document.getElementById("drag")
    var scale = document.getElementById("scale")
    // mousedown mousemove mouseup
    dragTool(drag)
    scaleTool(drag,scale,box)
    // 拖拽方法
    function dragTool(node) {
      node.onmousedown = function (ev) {
        // 瀏覽器相容處理
        var e = ev || window.event;
        // 滑鼠按下記錄相對位置
        // 水平方向都距離 = 當前滑鼠左邊的距離 - 被拖拽元素距離左邊的距離
        var offsetX = e.clientX - node.offsetLeft;
        // 垂直方向都距離 = 當前滑鼠都上邊的距離 - 被拖拽元素距離距離的距離
        var offsetY = e.clientY - node.offsetTop;
        // 滑鼠移動和被拖拽的元素是相對的 這裡是滑鼠拖拽的物體在整個頁面上移動 所以
        // move加在document上
        document.onmousemove = function (ev) {
          // 當前滑鼠的事件物件
          var e = ev || window.event;
          // 定義 currentLeft = 當前滑鼠位置 - 距離左邊的距離
          var currentLeft = e.clientX - offsetX;
          // 定義 currentTop = 當前滑鼠上邊位置 - 距離上邊的距離
          var currentTop = e.clientY - offsetY
          // 限制左出界 最左是 0 
          if (currentLeft <= 0) {
            currentLeft = 0;
          }
          // 當前視窗的寬 瀏覽器相容
          var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
          // 限制右邊出界 如果大於當前視窗的寬 那麼就讓它等於當前視窗的寬減去當前元素的offsetWidth 也就是留在原地
          if (currentLeft >= windowWidth - node.offsetWidth) {
            currentLeft = windowWidth - node.offsetWidth;
          }
          // 設定上出界 最上邊是 0 
          if (currentTop <= 0) {
            currentTop = 0;
          }
          // 當前視窗的高 瀏覽器相容
          var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
          // 限制下邊出界 如果大於當前視窗的高 減去 本身的高 那麼就讓它等於 當前視窗的高減去本身的高
          if (currentTop >= windowHeight - node.offsetHeight) {
            currentTop = windowHeight - node.offsetHeight;
          }
          // 當前被拖拽元素的 left 值 等於上面計算出的 currentLeft
          node.style.left = currentLeft + 'px';
          // 當前被拖拽元素的 top 值 等於上面計算出的 currentTop
          node.style.top = currentTop + 'px';
        }
      }
      // 滑鼠彈起取消拖拽 這裡新增到 node 元素物件也可以的
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }

    // 縮放
    function scaleTool(drag,box) {
      scale.onmousedown = function (e) {
        //阻止冒泡 避免縮放觸發移動事件
        e.stopPropagation()
        // 取消事件的預設動作
        e.preventDefault()
        // 定義position
        var position = {
          'w': drag.offsetWidth,// 被縮放元素的offsetWidth
          'h': drag.offsetHeight,// 被縮放元素的offsetHeight
          'x': e.clientX,// 當前視窗滑鼠指標的水平座標
          'y': e.clientY,// 當前視窗滑鼠指標的垂直座標
        }
        drag.onmousemove = function (ev) {
          ev.preventDefault()
          // 設定最大縮放為30*30 Math.max取最大值 
          var w = Math.max(30,ev.clientX - position.x + position.w)
          var h = Math.max(30,ev.clientY - position.y + position.h)

          // 設定最大的寬高
          w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
          h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
          drag.style.width = w + 'px';
          drag.style.height = h + 'px';
        }
        // 滑鼠離開和抬起取消縮放
        drag.onmouseup = function () {
          drag.onmousemove = null;
          drag,onmouseup = null;
        }
        drag.onmouseleave = function () {
          drag.onmousemove = null;
          drag,onmouseup = null;
        }
      }
    }
  }

</script>

</html>

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