vue使用鼠标拖动窗口改变窗口大小遇到鼠标移动太快而失去鼠标焦点窗口大小改变失败

注意：区分方法格式和方法位置和方法名字拼写错误

拖动缓慢方法

DOM层

逻辑层

  methods: {
      mousedown: function (event) {
        var startx=event.x;
        var starty=event.y;
        this.sb_bkx=startx - event.target.offsetLeft;
        this.sb_bky=starty - event.target.offsetTop;
        this.is_moving = true;
      },
      mousemove: function (event) {
        var endx=event.x - this.sb_bkx;
        var endy=event.y - this.sb_bky;
        var _this = this
        if(this.is_moving){
            event.target.style.left=endx+'px';
            event.target.style.top=endy+'px';
        }
      },
      mouseup: function (e) {
        this.is_moving = false;
      }
  }

可以快速拖动的代码

DOM层

逻辑层

  methods: {
      mousedown: function (event) {
        var event=event||window.event;
        var _target = event.target
        var startx=event.clientX;
        var starty=event.clientY;
        var sb_bkx=startx-event.target.offsetLeft;
        var sb_bky=starty-event.target.offsetTop;
        var ww=document.documentElement.clientWidth;
        var wh = window.innerHeight;

        if (event.preventDefault) {
            event.preventDefault();
        } else{
            event.returnValue=false;
        };

        document.onmousemove=function (ev) {
            var event=ev||window.event;
            var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
            if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {
                return false;
            };
            var endx=event.clientX-sb_bkx;
            var endy=event.clientY-sb_bky;
            _target.style.left=endx+'px';
            _target.style.top=endy+'px';
        }
      },

      mouseup: function (e) {
        document.onmousemove=null;
      }
  }

小结：两种方法逻辑并没有改动，只是将DOM层的@mousemove=‘mousemove($event)’ 去掉，并在 mousedown: function (event) {} 方法里添加document.οnmοusemοve=function (ev) {}方法，既可以解决问题，