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内容拖拽放大缩小

最新文章

热门文章
