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>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

layui에서 선택의 옵션 오버레이 문제에 대한 솔루션

Vue.js 사용자 정의 이벤트 양식 입력 구성 요소 방법

Vue에서 구성 요소를 등록하는 여러 가지 방법 요약

위 내용은 Vue.js는 이미지의 무작위 드래그 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!