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;

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("");

}

}

}

#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;

}

总结

以上所述是小编给大家介绍的Vue实现按钮旋转和移动位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！