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内容拖拽放大缩小
posted @ 2022-06-06 11:31 cuteyuchen 阅读(914) 评论(0) 编辑收藏举报
cuteyuchen

vue内容拖拽放大缩小

公告
