div旋转 vue_Vue实现按钮旋转和移动位置的实例代码

1.静态效果图

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

2.代码

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;