1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport"
  6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  10. </head>
  11. <body>
  12. <div id="app">
  13.   <div id="drag" @mousewheel="changeCanvas($event)"
  14.        @mousedown="mouseDrag($event)" @dragover="allowDrop($event)" @dragenter="dragEnter($event)"
  15.        @mouseup="mouseUp($event)" @mousemove="mouseMove($event)">
  16.     <div id="flowContainer" ref="flowContainer"></div>
  17.   </div>
  18. </div>
  19. <script>
  20.   new Vue({
  21.     el: '#app',
  22.     data() {
  23.       return {
  24.         msg: '111',
  25.         zoomNum: 1,
  26.         disX: null,
  27.         disY: null,
  28.         mainX: null,
  29.         mainY: null,
  30.         ifDrag: false,
  31.       }
  32.     },
  33.     methods: {
  34.       allowDrop(evt) {
  35.         this.preventDefault(evt);
  36.       },
  37.       dragEnter(evt) {
  38.         this.preventDefault(evt);
  39.       },
  40.       //阻止冒泡以及默认事件
  41.       preventDefault(ev) {
  42.         var evt = ev || window.event;
  43.         if (typeof evt.preventDefault == "function") {
  44.           evt.preventDefault();
  45.         } else {
  46.           evt.returnValue = false;
  47.         }
  48.         if (typeof evt.stopPropagation == "function") {
  49.           evt.stopPropagation();
  50.         } else {
  51.           evt.cancelBubble = true
  52.         }
  53.       },
  54.       // ==漫游====
  55.       // 拖拽
  56.       mouseDrag(e) {
  57.         // console.log('拖拽',e);
  58.         this.linemove = false
  59.         // console.log(e)
  60.         let _this = this;
  61.         this.ifDrag = true;
  62.         let pos = _this.getPos(e); //获取鼠标坐标
  63.         _this.disX = pos.x;
  64.         _this.disY = pos.y;
  65.         _this.mainX = _this.$refs.flowContainer.offsetLeft;
  66.         _this.mainY = _this.$refs.flowContainer.offsetTop;
  67.         // if (this.ifDrag) {
  68.         //   this.mouseMove(e);
  69.         // }
  70.       },
  71.       mouseMove(e) {
  72.         // console.log('move', document)
  73.         var _this = this;
  74.         // document.onmousemove = function (e) {
  75.         //   debugger
  76.         // console.log(e)
  77.         //   e.preventDefault()
  78.         if (!this.ifDrag) {
  79.           return
  80.         }
  81.         var evt = window.event || e;
  82.         var left = (evt.clientX - _this.disX) + _this.mainX;
  83.         var top = (evt.clientY - _this.disY) + _this.mainY;
  84.         _this.$refs.flowContainer.style.left = left + 'px';
  85.         _this.$refs.flowContainer.style.top = top + 'px';
  86.         // }
  87.         // this.mouseUp();
  88.       },
  89.       mouseUp() {
  90.         // console.log('up', document.onmousemove)
  91.         var _this = this;
  92.         this.ifDrag = false
  93.         //鼠标抬起
  94.         document.onmouseup = function (e) {
  95.           // console.log(e)
  96.           var evt = window.event || e;
  97.           // document.onmousemove = null;
  98.           // document.onmouseup = null;
  99.           // _this.ifDrag = false;
  100.         };
  101.       },
  102.       // 获取位置
  103.       getPos(ev) {
  104.         let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  105.         let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  106.         return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop };
  107.       },
  108.       // 改变画布大小--通过鼠标滚轮 缩小，放大
  109.       changeCanvas(event) {
  110.         var delta = 0;
  111.         var canvasDom = document.getElementById('flowContainer');
  112.         var p = ["webkit", "moz", "ms", "o"];
  113.         if (!event) event = window.event;
  114.         if (event.wheelDelta) {//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
  115.           delta = event.wheelDelta / 120;
  116.           if (window.opera) delta = -delta;//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
  117.         } else if (event.detail) {//FF浏览器使用的是detail,其值为“正负3”
  118.           delta = -event.detail / 3;
  119.         }
  120.         if (delta > 0) {
  121.           // 向上滚
  122.           if (this.zoomNum < 2) {
  123.             this.zoomNum += 0.1;
  124.           }
  125.         } else if (delta < 0) {
  126.           // 向下滚
  127.           if (this.zoomNum > 0.2) {
  128.             this.zoomNum -= 0.1;
  129.           }
  130.         }
  131.         for (var i = 0; i < p.length; i++) {
  132.           canvasDom.style[p[i] + "Transform"] = "scale(" + this.zoomNum + ")";
  133.         }
  134.         canvasDom.style["transform"] = "scale(" + this.zoomNum + ")";
  135.         return false;
  136.       },
  137.     }
  138.   })
  139. </script>
  140. </body>
  141. <style>
  142.     #drag{
  143.         width:800px;
  144.         height:800px;
  145.         background:blue;
  146.         overflow:hidden;
  147.     }
  148.   #flowContainer{
  149.       width:300px;
  150.       height:300px;
  151.       background:red;
  152.       position: relative;
  153.       overflow: hidden;
  154.       left: 20px;
  155.       top: 20px;
  156.       transform-origin: 50% 50%;
  157.   }
  158. </style>
  159. </html>

vue内容拖拽放大缩小

vue内容拖拽放大缩小的更多相关文章

  1. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

  2. Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示

    本文发布自 https://www.cnblogs.com/wenruo/p/15061907.html 转载请注明出处. 简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu ...

  3. vue的拖拽文件

    <div ref='select_frame' ondragstart="return false">//防止跳转 </div> this.$refs.se ...

  4. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  5. vue实现拖拽组件

    可以拖拽,靠边停靠,效果图如下 代码如下: 注意:代码中使用的图片未上传 DragAndDrop组件: <template> <div class="drag" ...

  6. vue实现拖拽排序

    基于vue实现列表拖拽排序的效果 在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标 ...

  7. vue 图片拖拽和滚轮缩放

    这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...

  8. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

  9. vue模块拖拽效果

    正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...

随机推荐

  1. FastAPI（七十三）实战开发《在线课程学习系统》接口开发-- 回复留言

    之前文章分享FastAPI(七十二)实战开发<在线课程学习系统>接口开发-- 留言列表开发,这次我们分享如何回复留言 按照惯例,我们还是去分析这里面的逻辑. 1.判断用户是否登录 2.用户 ...

  2. spring-注入集合对象

    1.创建Stu类 package com.spring.collections; import java.util.Arrays; import java.util.List; import java ...

  3. Spring框架技术

    Spring框架技术 SSM(Spring+SpringMVC+Mybatis)阶段的学习,也算是成功出了Java新手村. 前面我们已经学习过Mybatis了. 从这里开始,很多的概念理解起来就稍微有 ...

  4. Java基础之浅谈集合

    Java基础知识.关于List.Set.Map接口的了解,以及ArrayList.LinkedList.HashSet.TreeSet.HashMap.TreeMap...

  5. 帝国cms修改成https后后台登陆空白的解决办法

    以下方法适用帝国cms7.5版本: 7.5版本已经有了http和https自动识别,但是因为一些疑难杂症的原因,自动识别判断的不准,后台登录也是空白, 我们可以打开e/config.php查找'htt ...

  6. 羽夏壳世界—— PE 结构（上）

    羽夏壳世界之 PE 结构(上),介绍难度较低的基本 PE 相关结构体.

  7. Java学习day6

    今天跟着教学视频做了个简易的学生管理系统 在编写完全部代码之后出现了在空白处右键没有run as选项的问题,通过csdn与博客园上的多个帖子介绍,得知是jdk配置不对,正确配置后问题得到解决 明天学习 ...

  8. 3种方法改变this的指向

    <body>     <div style="width: 200px;height: 200px;hotpink;"></div>     & ...

  9. Java语言学习day37--8月12日

    今日内容介绍1.List接口2.Set接口3.判断集合唯一性原理 ###01List接口的特点 A:List接口的特点: a:它是一个元素存取有序的集合. 例如,存元素的顺序是11.22.33.那么 ...

  10. ASP.NETCore统一处理404错误都有哪些方式？

    当未找到网页并且应用程序返回 404 错误时,ASP.NET Core MVC 仅呈现通用浏览器错误页面,如下图所示 这不是很优雅,是吗? 我们平时看到的404页面一般是这样的 还有这样的 试了下京东 ...