vue内容拖拽放大缩小
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div id="drag" @mousewheel="changeCanvas($event)"
@mousedown="mouseDrag($event)" @dragover="allowDrop($event)" @dragenter="dragEnter($event)"
@mouseup="mouseUp($event)" @mousemove="mouseMove($event)">
<div id="flowContainer" ref="flowContainer"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: '111',
zoomNum: 1,
disX: null,
disY: null,
mainX: null,
mainY: null,
ifDrag: false,
}
},
methods: {
allowDrop(evt) {
this.preventDefault(evt);
},
dragEnter(evt) {
this.preventDefault(evt);
},
//阻止冒泡以及默认事件
preventDefault(ev) {
var evt = ev || window.event;
if (typeof evt.preventDefault == "function") {
evt.preventDefault();
} else {
evt.returnValue = false;
}
if (typeof evt.stopPropagation == "function") {
evt.stopPropagation();
} else {
evt.cancelBubble = true
}
},
// ==漫游====
// 拖拽
mouseDrag(e) {
// console.log('拖拽',e);
this.linemove = false
// console.log(e)
let _this = this;
this.ifDrag = true;
let pos = _this.getPos(e); //获取鼠标坐标
_this.disX = pos.x;
_this.disY = pos.y;
_this.mainX = _this.$refs.flowContainer.offsetLeft;
_this.mainY = _this.$refs.flowContainer.offsetTop;
// if (this.ifDrag) {
// this.mouseMove(e);
// }
},
mouseMove(e) {
// console.log('move', document)
var _this = this;
// document.onmousemove = function (e) {
// debugger
// console.log(e)
// e.preventDefault()
if (!this.ifDrag) {
return
}
var evt = window.event || e;
var left = (evt.clientX - _this.disX) + _this.mainX;
var top = (evt.clientY - _this.disY) + _this.mainY;
_this.$refs.flowContainer.style.left = left + 'px';
_this.$refs.flowContainer.style.top = top + 'px';
// }
// this.mouseUp();
},
mouseUp() {
// console.log('up', document.onmousemove)
var _this = this;
this.ifDrag = false
//鼠标抬起
document.onmouseup = function (e) {
// console.log(e)
var evt = window.event || e;
// document.onmousemove = null;
// document.onmouseup = null;
// _this.ifDrag = false;
};
},
// 获取位置
getPos(ev) {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop };
},
// 改变画布大小--通过鼠标滚轮 缩小，放大
changeCanvas(event) {
var delta = 0;
var canvasDom = document.getElementById('flowContainer');
var p = ["webkit", "moz", "ms", "o"];
if (!event) event = window.event;
if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
} else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
delta = -event.detail / 3;
}
if (delta > 0) {
// 向上滚
if (this.zoomNum < 2) {
this.zoomNum += 0.1;
}
} else if (delta < 0) {
// 向下滚
if (this.zoomNum > 0.2) {
this.zoomNum -= 0.1;
}
}
for (var i = 0; i < p.length; i++) {
canvasDom.style[p[i] + "Transform"] = "scale(" + this.zoomNum + ")";
}
canvasDom.style["transform"] = "scale(" + this.zoomNum + ")";
return false;
},
}
})
</script>
</body>
<style>
#drag{
width:800px;
height:800px;
background:blue;
overflow:hidden;
}
#flowContainer{
width:300px;
height:300px;
background:red;
position: relative;
overflow: hidden;
left: 20px;
top: 20px;
transform-origin: 50% 50%;
}
</style>
</html>
vue内容拖拽放大缩小
vue内容拖拽放大缩小的更多相关文章
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...
- vue的拖拽文件
<div ref='select_frame' ondragstart="return false">//防止跳转 </div> this.$refs.se ...
- vue列表拖拽排序功能实现
1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...
- vue实现拖拽组件
可以拖拽,靠边停靠,效果图如下 代码如下: 注意:代码中使用的图片未上传 DragAndDrop组件: <template> <div class="drag" ...
- vue实现拖拽排序
基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...
- vue 图片拖拽和滚轮缩放
这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...
- Vue实现拖拽穿梭框功能四种方式
一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...
- vue模块拖拽效果
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...
随机推荐
- SpringBoot2.x修改Redis序列化方式
添加一个配置类即可: /** * @Author FengZeng * @Date 2022-03-22 13:43 * @Description TODO */ @Configuration pub ...
- C++---继承和派生
继承和派生 在C++中, 代码重用是通过继承机制来实现的 继承, 就是在一个已经存在的类的基础上, 再建议一个新类 从已经有的类派生出新的类, 派生类就继承了基类的特征, 包括成员和方法 继承可以完成 ...
- Intel主板芯片组
写这个的初衷还是由于linux内核本身就是硬件的抽象,如果你对硬件的相关发展,机制以及架构不了解,实际你也是看不懂linux内核代码以及看不懂linux很多命令输出的结果的,如果你看内核代码就会发现内 ...
- kubectl creat -f 创建pod时出错
如果创建yaml时候,sts中已经存在,但是get pod又查不到已经启动的pod可以这样 [root@k3master src]# kubectl get pod //查不到eureka NAME ...
- Python BeautifulSoup4 爬虫基础、多线程学习
针对 崔庆才老师 的 https://ssr1.scrape.center 的爬虫基础练习.Threading多线程库.Time库.json库.BeautifulSoup4 爬虫库.py基本语法
- style设置 三个 竖线隔得太近了，这个属性和值 设置让他们分开一点
||| // html letter-spacing: 0.2em; // css
- Java语言学习day32--8月07日
###07正则表达式邮箱地址验证 * A: 正则表达式邮箱地址验证 * a: 案例代码 public class RegexDemo2 { public static void main(String ...
- RxJava + Retrofit源码解析
RxJava + Retrofit怎么请求网络,具体的用法这里就不讲了,本文只讲一些重点源码. 版本如下: okhttp : "com.squareup.okhttp3:okhttp:3.1 ...
- 使用Proftpd支持FTP/SFTP权限管控
简介 FTP 文件传输协议,FTP由FTP服务器(存储文件)和FTP客户端(通过FTP协议访问FTP服务器上的资源)组成 传输方式 主动模式(Port) 客户端与服务器端的TCP 21端口建立连接 - ...
- 你不知道的Python容器
你不知道的Python容器 你不知道的Python容器 散列表 ChainMap MappingProxyType 线性表 堆 参考资料 昨天阅读了<Python Tricks: The Boo ...