ホームページ > 記事 > ウェブフロントエンド > 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のselectのオプションオーバーレイ問題の解決策
Vue.jsカスタムイベントフォーム入力コンポーネントメソッド
以上がVue.js は画像のランダムなドラッグ方法を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。