实现鼠标的拖拽功能

 注：记得给被拖拽的元素加上draggable="false"属性

      // 拖拽效果实现
      var img = document.getElementById("img"); //获取元素
      var x, y; //鼠标相对与div左边，上边的偏移
      var isDrop = false; //移动状态的判断鼠标按下才能移动
      img.onmousedown = function (e) {
        var e = e || window.event; //要用event这个对象来获取鼠标的位置
        x = e.clientX - img.offsetLeft;
        y = e.clientY - img.offsetTop;
        isDrop = true; //设为true表示可以移动
      };

      document.onmousemove = function (e) {
        //是否为可移动状态

        if (isDrop) {
          var e = e || window.event;
          var moveX = e.clientX - x; //得到距离左边移动距离
          var moveY = e.clientY - y; //得到距离上边移动距离

          console.log(moveX, moveY);
          //可移动最大距离
          var maxX = document.documentElement.clientWidth - img.offsetWidth;
          var maxY = document.documentElement.clientHeight - img.offsetHeight;

          moveX = Math.min(maxX, Math.max(0, moveX));

          moveY = Math.min(maxY, Math.max(0, moveY));
          img.style.left = moveX + "px";
          img.style.top = moveY + "px";
        } else {
          return;
        }
      };

      document.onmouseup = function () {
        isDrop = false; //设置为false不可移动
      };

      document.getElementById("img").onwheel = function gdFun(e) {
        let beishu = 0;
        if (e.deltaY < 0) {
          scale_num-=0.1
        } else {
          scale_num+=0.1
        }
        if(scale_num>=2.3){
          scale_num=2.3
          alert("已达到最大值");
        }
        if(scale_num<=0){
          scale_num=0.1
          alert("已达到最小值");
        }
        $("#img").css('transform',`scale(${scale_num}) rotate(${deg}deg)`)
      };