JavaScript實現拖拽和縮放效果

更新時間：2020年08月24日 10:56:01 作者：Twelve--

這篇文章主要為大家詳細介紹了JavaScript實現拖拽和縮放效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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, scale, box) {
      scale.onmousedown = function (e) {
        //阻止冒泡 避免縮放觸發(fā)移動事件
        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>

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

您可能感興趣的文章: