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实现图片的随意拖动方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍Android实现图片浮动随意拖拽效果，包括了Android实现图片浮动随意拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android实现图片浮动拖拽效果的具体代码，供大家参考，具体内容如下 实现步骤 1.先自定义一个浮动工具类 2.xml布局的引用 3.activity的实现 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学
-
本文向大家介绍Android实现让图片在屏幕上任意移动的方法(拖拽功能)，包括了Android实现让图片在屏幕上任意移动的方法(拖拽功能)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android实现让图片在屏幕上任意移动的方法。分享给大家供大家参考，具体如下： 更多关于Android相关内容感兴趣的读者可查看本站专题：《Android拍照与图片处理技巧总结》、《Android编程之a
-
本文向大家介绍PHP+jQuery实现随意拖动层并即时保存拖动位置，包括了PHP+jQuery实现随意拖动层并即时保存拖动位置的使用技巧和注意事项，需要的朋友参考一下 想拖动页面上的层，完全可以用jQuery ui的Draggable方法来实现，那如何将拖动后层的位置保存下来呢？本文将给出答案。本文讲解了如何采用PHP+MySQL+jQuery，实现随意拖动层并即时保存拖动位置。 之前我有文章：，
-
本文向大家介绍JavaScript实现随机替换图片的方法，包括了JavaScript实现随机替换图片的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现随机替换图片的方法。分享给大家供大家参考。具体如下： 下面代码可实现将页面上的图片随机替换成别的图片，或者随机显示一个图片 其中的图片文件名为： 0.gif 1.gif 2.gif 3.gif 4.gif 希望本文
-
本文向大家介绍jquery实现图片随机排列的方法，包括了jquery实现图片随机排列的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现图片随机排列的方法。分享给大家供大家参考。具体如下： 该代码可刷新后实现图片随便排列的jQuery特效 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jQuery实现鼠标拖动图片功能，包括了jQuery实现鼠标拖动图片功能的使用技巧和注意事项，需要的朋友参考一下 本例利用jQuery实现一个鼠标托动图片的功能。 首先设一个wrapper，wrapper内的坐标即图片移动的坐标 设置图片div，这个div即要拖动的div 上面设置了wrapper的定位为relative，div1的定位为absolute。 接下来设计拖动的算法： 思