<!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{ 800px; height:800px; background:blue; overflow:hidden; } #flowContainer{ 300px; height:300px; background:red; position: relative; overflow: hidden; left: 20px; top: 20px; transform-origin: 50% 50%; } </style> </html>
vue内容拖拽放大缩小