Vue.js怎样实现图片可以随意拖动摆放

推荐阅读：

这次给大家带来Vue.js怎样实现图片可以随意拖动摆放，Vue.js实现图片可以随意拖动摆放的注意事项有哪些，下面就是实战案例，一起来看一下。

主要代码如下：

<template>
 <p id="test_3">
 <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style">
 </p>
</template>
<script>
 export default{
 data:function(){
 return{
 canDrag: false,
 x0:0,
 y0:0,
 x1:0,
 y1:0,
 style:null
 }
 },
 methods:{
 start:function(e){
 //鼠标左键点击
 if(e.button==0){
 this.canDrag=true;
 //记录鼠标指针位置
 this.x0=e.clientX;
 this.y0=e.clientY;
 }
 },
 stop:function(e){
 this.canDrag=false;
 },
 move:function(){
 if(this.canDrag==true){
 this.x1=e.clientX;
 this.y1=e.clientX;
 let x=this.x1-this.x0;
 let y=this.y1-this.y0;
 let img=document.querySelector("#test_3 img");
 this.style=`left:${img.offsetLeft+x}px;top:${img.offsetTop+y}px`;
 this.x0=this.x1;
 this.y0=this.y1;
 }
 }
 }
 }
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

select的option叠加如何处理

vue.js中怎么导入css库