欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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?mixin?使用示例詳解

    VUE?mixin?使用示例詳解

    混入mixin提供了一種非常靈活的方式,來分發(fā)Vue組件中的可復(fù)用功能,一個混入對象可以包含任意組件選項(xiàng),接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下
    2022-08-08
  • Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別

    Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別

    這篇文章主要介紹了Vue Computed中g(shù)et和set的用法及Computed與watch的區(qū)別,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue中table實(shí)現(xiàn)真正的跨越全選

    vue中table實(shí)現(xiàn)真正的跨越全選

    本文主要介紹了vue中table實(shí)現(xiàn)真正的跨越全選,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟

    Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟

    這篇文章主要介紹了Intellij IDEA搭建vue-cli項(xiàng)目的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • vue axios 二次封裝的示例代碼

    vue axios 二次封裝的示例代碼

    本篇文章主要介紹了vue axios 二次封裝的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue 遞歸組件的簡單使用示例

    vue 遞歸組件的簡單使用示例

    這篇文章主要介紹了vue 遞歸組件的簡單使用示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2021-01-01
  • Vue.js鼠標(biāo)懸浮更換圖片功能

    Vue.js鼠標(biāo)懸浮更換圖片功能

    這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題

    關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題

    這篇文章主要介紹了關(guān)于新建的vue3項(xiàng)目一直提示代碼格式警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 使用vue ant design分頁以及表格分頁改為中文問題

    使用vue ant design分頁以及表格分頁改為中文問題

    這篇文章主要介紹了使用vue ant design分頁以及表格分頁改為中文問題,具有很好的參考價值,希望對大家有所幫助。
    2023-04-04
  • vue實(shí)現(xiàn)多條件和模糊搜索功能

    vue實(shí)現(xiàn)多條件和模糊搜索功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多條件和模糊搜索功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05

最新評論