js实现裁剪框鼠标拖拽改变大小 、位置

html

<div id="area">
 <div id="cut" v-show="!loading">
   <div class="border"></div>
   <div id="dot" class="dot"></div>
 </div>
</div>

css

  #cut {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
  }
  #dot {
    width: 10px;
    height: 10px;
    position: absolute;
    right: -5px;
    bottom: -5px;
    // background-color: red;
    border-radius: 50%;
    cursor: se-resize;
  }
  .border {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid red;
  }

js

      let area = document.querySelector("#area");
      let dot = document.querySelector("#dot");
      let cut = document.querySelector("#cut");
      // onselectstart 事件是选中的事件
      document.onselectstart = function (e) {
        e.preventDefault();
      };
      // ondragstart 事件是拖拽事件
      document.ondragstart = function (e) {
        e.preventDefault();
      };
      //当右下角的按钮鼠标按下时
      dot.onmousedown = function (e) {
        // e.preventDefault()
        //阻止事件冒泡  否则事件将会影响到 选择框移动的效果  因为用的都是document.onmousemove
        e.stopPropagation();
        //得到鼠标按下时  鼠标的初始位置
        let firstX = e.clientX;
        let firstY = e.clientY;
        //得到鼠标按下时  cut元素的初始大小
        let firstWidth = cut.clientWidth;
        let firstHeight = cut.clientHeight;
        //得到鼠标按下时 cut元素距离父元素也就是大图片的距离
        let firstLeft = cut.offsetLeft;
        let firstTop = cut.offsetTop;
        //当鼠标按下且移动的时候
        document.onmousemove = function (e) {
          //得到当前鼠标的位置
          let nowX = e.clientX;
          let nowY = e.clientY;
          //算法：鼠标当前的位置-去鼠标刚刚按下时的位置 得到需要添加的大小 加上cut元素之前原有的大小  就是最新的大小
          let resultX = nowX - firstX + firstWidth;
          let resultY = nowY - firstY + firstHeight;
          //元素越界判定
          if (resultX < 0) {
            resultX = 0;
          }
          //大图的元素大小  减去cut元素原本距离父元素的top和left距离 也就是能放大的最大范围
          else if (resultX > area.clientWidth - firstLeft) {
            resultX = area.clientWidth - firstLeft;
          }
          if (resultY < 0) {
            resultY = 0;
          } else if (resultY > area.clientHeight - firstTop) {
            resultY = area.clientHeight - firstTop;
          }
          //将最新的宽高赋值给cut元素
          cut.style.width = resultX + "px";
          cut.style.height = resultY + "px";
        };
      };

      //当cut元素被按下时
      cut.onmousedown = function (e) {
        //得到当前鼠标的位置
        let firstMouseX = e.clientX;
        let firstMouseY = e.clientY;
        //得到当前元素距离父元素也就是area的top和left值
        let firstLeft = cut.offsetLeft;
        let firstTop = cut.offsetTop;
        // console.log(1);
        //当鼠标按下且移动的时候
        document.onmousemove = function (e) {
          //得到当前鼠标最新的位置
          let nowX = e.clientX;
          let nowY = e.clientY;
          //算法 鼠标最新的位置-鼠标一开始的位置 得到应该移动的距离  + 元素一开始的位置 =最新的位置
          var resultX = nowX - firstMouseX + firstLeft;
          var resultY = nowY - firstMouseY + firstTop;
          if (resultX < 0) {
            resultX = 0;
          } else if (resultX > area.clientWidth - cut.clientWidth) {
            resultX = area.clientWidth - cut.clientWidth;
          }
          if (resultY < 0) {
            resultY = 0;
          } else if (resultY > area.clientHeight - cut.clientHeight) {
            resultY = area.clientHeight - cut.clientHeight;
          }
          cut.style.left = resultX + "px";
          cut.style.top = resultY + "px";
        };
      };
      document.onmouseup = function () {
        document.onmousemove = null;
      };