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

1.静态效果图

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

2.代码

模板div id=' App ' div class=' icon-add-50 ' : style=' icon style ' @ click=' click ' @ touch move=' touch move ' @ touch start=' touch start(this，$ event)' @ touch end=' touch end '/div/div/template script导出默认{ name : ' App '，data(){ return{ /* -图标样式变量-*/icon rotatee :45，//旋转deg icontranslateX:100，//沿x轴位移像素图标翻译：100,//沿y轴位移px /* -拖动计算变量- */mouseX:0、mouse :0、objX:0、objY:0、isDown:false } }、methods : { click : function(){//图标点击事件如果(这个。图标旋转==0){这。图标旋转=315；} else { this。图标旋转=0；} }，touchstart:function(obj，e){//手指触摸触发这个。Objx=这个。IContranslatex这个。objy=这个。图标翻译；这个。MouseX=e . touch[0]。客户这。mousey=e . touch[0]。clientYthis.isDowm=true}，触摸移动：功能(e){//手指移动触发让x=e . touch[0]。clientX让y=e . touch[0]。clientYif(这个。IsDowm){ this。icon translatex=ParSeint(x)-ParSeint(这个。Mousex)ParSeint(这个。objx)；这个。icon translatey=parsent(y)-parsent(这个。Mousey)parsent(这个。objy)；} }，触摸结束：功能(e){//手指从触摸到不要碰这个。IsDowm){让x=e . touch[0].clientX让y=e . touch[0]。clientYthis。icon translatex=parsent(x)-parsent(this。Mousex)解析器(这个。objx)；这个。icon translatey=parsent(y)-parsent(这个。Mousey)parsent(这个。objy)；this.isDowm=false} } }，计算出： { icon style : function(){//图标动态样式让arr=新数组()；由…改编推动('变压器： ')；//注意：先移动后旋转，实现原地旋转；先旋转后移动，位置按照旋转后的新坐标系确定由…改编push(' translateX(' this。icon translatex ' px ')；由…改编push(' translateY(' this。icon translateY ' px ')；由…改编推('旋转('这个。图标旋转‘度’)；返回由…改编联接(" ")；} } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；} /*加号*/.图标-添加-50{位置：相对；盒子尺寸：边框盒子；宽度： 50px高度： 50pxborder: 2px纯灰色；边界半径： 50%;箱形阴影：深灰色0px 0px 2px 2px背景-颜色：矢车菊蓝色；}.{内容： }之前的图标-add-50:绝对位置：宽度： 30px高度： 2px左侧： 50%;前：名50%；左边距：-15px；页边距-顶部：-1px；背景-颜色：白色；}.{内容： }后的图标-add-50:绝对位置：宽度： 2px高度： 30px左侧： 50%;前：名50%；左边距：-1px；页边距-top :-15px；背景-颜色：白色；}/样式总结

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