码迷,mamicode.com
首页 > 移动开发 > 详细

Vue练习五十八:07_03_移动效果(按轨迹移动)

时间:2020-05-09 20:36:10      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:document   inpu   this   cti   als   鼠标   移动   doc   功能   

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>

 

Vue练习五十八:07_03_移动效果(按轨迹移动)

标签:document   inpu   this   cti   als   鼠标   移动   doc   功能   

原文地址:https://www.cnblogs.com/sx00xs/p/12859831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!