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