Vue.js實(shí)現(xiàn)圖片的隨意拖動方法
更新時間:2018年03月08日 11:07:47 作者:小白之旅
下面小編就為大家分享一篇Vue.js實(shí)現(xiàn)圖片的隨意拖動方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
主要代碼如下:
<template> <div id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <script> export default{ data:function(){ return{ canDrag: false, x0:0, y0:0, x1:0, y1:0, style:null } }, methods:{ start:function(e){ //鼠標(biāo)左鍵點(diǎn)擊 if(e.button==0){ this.canDrag=true; //記錄鼠標(biāo)指針位置 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>
以上這篇Vue.js實(shí)現(xiàn)圖片的隨意拖動方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別
這篇文章主要介紹了Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟
這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題
這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10使用vue ant design分頁以及表格分頁改為中文問題
這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題,具有很好的參考價值,希望對大家有所幫助。2023-04-04