Vue.js实现图片的随意拖动方法
更新时间：2018年03月08日 11:07:47 作者：小白之旅
下面小编就为大家分享一篇Vue.js实现图片的随意拖动方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
主要代码如下：
<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){
//鼠标左键点击
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>
以上这篇Vue.js实现图片的随意拖动方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了nuxt3中server routes的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了Vue render函数实战之实现tabs选项卡组件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue项目配置使用flow类型检查的步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
Vue echarts实例项目地区销量趋势堆叠折线图实现详解
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo2022-09-09
这篇文章主要介绍了解决VUE同一路由强制刷新页面的问题，本文给大家分享实现过程，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
本篇文章主要介绍了VUE JS 使用组件实现双向绑定，详细的介绍了vue的双向数据绑定原理以及核心代码模块，具有一定的参考价值，有兴趣的可以了解一下。2017-01-01
在本篇文章里小编给大家分享了关于vue配置接口域名方法和相关知识点总结，需要的朋友们跟着操作下。2019-05-05
这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue如何实现一个获取按键展示快捷键效果的Input组件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，Vue 提供了内置的过渡封装组件transition，该组件用于包裹要实现过渡效果的组件2021-10-10
最新评论