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