Vue实现按钮旋转和移动位置Demo

1.静态效果图

Chrom移动端浏览模式下可拖动按钮处于任意位置，并且点击可旋转按钮

2.代码

<template>
  <div id="app">
    <div class="icon-add-50" :style="iconstyle" @click='click' @touchmove='touchmove' @touchstart='touchstart(this,$event)' @touchend='touchend'></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      /*--------图标样式变量--------------*/
      iconrotate:45,//旋转deg
      icontranslateX:100,//沿x轴位移px
      icontranslateY:100,//沿y轴位移px
      /*--------拖动计算变量------------*/
      mouseX:0,
      mouseY:0,
      objX:0,
      objY:0,
      isDown:false
    }
  },
  methods:{
    click:function(){//图标点击事件
      if (this.iconrotate==0) {
         this.iconrotate=315;
      }else {
        this.iconrotate=0;
      }
    },
    touchstart:function(obj,e){//finger touch 触发
      this.objX = this.icontranslateX;
      this.objY = this.icontranslateY;
      this.mouseX = e.touches[0].clientX;
      this.mouseY = e.touches[0].clientY;
      this.isDowm = true;
    },
    touchmove:function(e){//finger move 触发
      let x = e.touches[0].clientX;
      let y = e.touches[0].clientY;
      if (this.isDowm) {
          this.icontranslateX = parseInt(x) - parseInt(this.mouseX) + parseInt(this.objX);
          this.icontranslateY = parseInt(y) - parseInt(this.mouseY) + parseInt(this.objY);
      }
    },
    touchend:function(e){//finger from touch to notouch
      if (this.isDowm) {
          let x = e.touches[0].clientX;
          let y = e.touches[0].clientY;
          this.icontranslateX = parseInt(x) - parseInt(this.mouseX)+ parseInt(this.objX);
          this.icontranslateY = parseInt(y) - parseInt(this.mouseY)+ parseInt(this.objY);
          this.isDowm=false;
      }
    }
  },
  computed:{
    iconstyle:function(){//图标动态样式
      let arr = new Array();
      arr.push('transform:');//注意：先移动后旋转，实现原地旋转；先旋转后移动，位置按照旋转后的新坐标系确定
      arr.push('translateX('+this.icontranslateX+'px) ');
      arr.push('translateY('+this.icontranslateY+'px) ');
      arr.push('rotate('+this.iconrotate+'deg) ');
      return arr.join("");
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  /*加号*/
.icon-add-50{
    position: relative;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 2px solid gray;
    border-radius: 50%;
    box-shadow:darkgrey 0px 0px 2px 2px;
    background-color: CornflowerBlue;
}
.icon-add-50:before{
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -1px;
    background-color: white;
}
.icon-add-50:after{
    content: '';
    position: absolute;
    width: 2px;
    height: 30px;
    left: 50%;
    top: 50%;
    margin-left: -1px;
    margin-top: -15px;
    background-color: white;
}
</style>