Vue練習五十八：07_03_移動效果(按軌跡移動)

DEMO在線瀏覽：

改寫過程是需留意之處：

1，點擊按鈕后，需注銷掉所有可能存在的冒泡至document上的各類事件（click, mousedown,mouseup)以及 2 個按鈕上的mousedown和mouseup事件

2，因為需要直接操作dom元素，所以給元素設置了ref，或許應該使用指令來重構此應用。有時間再說吧。

app.vue 代碼如下：

 

<template>
  <div id="app">
    <input type="button" :value="val1" @click.stop="handleInputOne" ref="inputOne"/>
    <input type="button" :value="val2" @click.stop="handleInputTwo" ref="inputTwo"/>
    <p>{{val3}}</p>
    <div class="myDiv"  :class="{active1:isActive1,active2:isActive2}" ref="myDiv"></div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      val1:'根據鼠標點擊位置移動',
      val2:'根據鼠標軌跡移動',
      val3:'請點擊按鈕激活功能',
      pos:[],
      isActive1:true,
      isActive2:false,
    }
  },
  methods:{
    handleInputOne(e){
      var _this = this;
      this.val1 = '根據鼠標點擊位置移動';
      this.val2 = '根據鼠標軌跡移動';
      this.val1 += '(已激活)';
      this.val3 = "鼠標點擊頁面， 人物將移動至鼠標位置！";
      (e||window.event).cancelBubble = true;
      this.clearEvent();
      document.onclick=function(e){
        var myDiv = _this.$refs.myDiv;
        _this.isActive1=false;
        _this.isActive2=true;
        _this.startMove(myDiv,{x:e.clientX,y:e.clientY}, function(){_this.isActive1=true;_this.isActive2=false;});
        return false;
      }
    },
    handleInputTwo(e){
      var _this = this;
      this.val2 = '根據鼠標軌跡移動';
      this.val1 = '根據鼠標點擊位置移動';
      this.val2 += '(已激活)';
      this.val3 = '按住鼠標左鍵，在頁面划動，人物將按照鼠標軌跡移動。';
      var myDiv = _this.$refs.myDiv;
      this.pos = [{x:myDiv.offsetLeft, y: myDiv.offsetTop}];
      (e || window.event).cancelBubble = true;
      this.clearEvent();
      document.onmousedown = function(e){
        _this.pos.push({x:e.clientX, y:e.clientY});
        document.onmousemove = function(e){
          _this.pos.push({x:e.clientX,y:e.clientY});
          return false;
        }
        return false;
      }
      document.onmouseup =function(){
        document.onmousemove = null;
        _this.isActive1=false;
        _this.isActive2=true;
        var timer = setInterval(function(){
          if(_this.pos.length == 0){
            clearInterval(timer);
            _this.isActive1 = true;
            _this.isActive2 = false;
            return;
          }
          myDiv.style.left = _this.pos[0].x + 'px';
          myDiv.style.top = _this.pos[0].y + 'px';
          _this.pos.shift();
        },30)  ;
      }
    },
    clearEvent(){
      document.onclick = null;
      document.onmousedown = null;
      document.onmousemove = null;
      document.onmouseup = null;
      var inputOne = this.$refs.inputOne;
      var inputTwo = this.$refs.inputTwo;
      inputOne.onmousedown = inputOne.onmouseup = inputTwo.onmousedown = inputTwo.onmouseup=function(e){
        (e||window.event).cancelBubble = true;
      }
    },
    startMove(obj,target,callback){
      var _this = this;
      clearInterval(obj.timer);
      obj.timer=setInterval(function(){
        _this.doMove(obj,target,callback);
      },30)
    },
    doMove(obj,target,callback){
      var iX=(target.x - obj.offsetLeft) / 5;
      var iY=(target.y - obj.offsetTop) / 5;
      iX = iX > 0 ? Math.ceil(iX) : Math.floor(iX);
      iY = iY > 0 ? Math.ceil(iY) : Math.floor(iY);
      if(target.x == obj.offsetLeft && target.y==obj.offsetTop){
        clearInterval(obj.timer);
        callback && callback();
      }else{
        obj.style.left = obj.offsetLeft + iX + 'px';
        obj.style.top = obj.offsetTop + iY + 'px';
      }
    }
  },

}
</script>
<style>
body,div{
  margin: 0;
  padding: 0;
}
#app{
  position: relative;
}
.myDiv{
  position: absolute;
  width: 66px;
  height: 45px;
  
  top:100px;
  left: 50px;
}
.active1{
  background: url(./assets/lesson7/1.gif) no-repeat;
}
.active2{
  background: url(./assets/lesson7/2.gif) no-repeat;
}
p,input{
  margin: 10px;
}
</style>