快捷導(dǎo)航

Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法

更新時(shí)間：2018年03月08日 11:07:47 作者：小白之旅

下面小編就為大家分享一篇Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

主要代碼如下：

<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)圖片的隨意拖動(dòng)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

nuxt3中server routes的使用詳解
本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件
這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
vue項(xiàng)目配置使用flow類型檢查的步驟
這篇文章主要介紹了vue項(xiàng)目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解
Echarts，它是一個(gè)與框架無關(guān)的 JS 圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo
2022-09-09
Vue同一路由強(qiáng)制刷新頁(yè)面的實(shí)現(xiàn)過程
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁(yè)面的問題，本文給大家分享實(shí)現(xiàn)過程，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
VUE JS 使用組件實(shí)現(xiàn)雙向綁定的示例代碼
本篇文章主要介紹了VUE JS 使用組件實(shí)現(xiàn)雙向綁定，詳細(xì)的介紹了vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-01-01
vue配置接口域名方法總結(jié)
在本篇文章里小編給大家分享了關(guān)于vue配置接口域名方法和相關(guān)知識(shí)點(diǎn)總結(jié)，需要的朋友們跟著操作下。
2019-05-05
nuxtjs中如何對(duì)axios二次封裝
這篇文章主要介紹了nuxtjs中如何對(duì)axios二次封裝問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件
這篇文章主要介紹了vue如何實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01
詳解vue過度效果與動(dòng)畫transition使用示例
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果，Vue 提供了內(nèi)置的過渡封裝組件transition，該組件用于包裹要實(shí)現(xiàn)過渡效果的組件
2021-10-10