在vue中实现利用jQuery让元素放大缩小拖拽移动

这一次的需求是元素能根据鼠标滚轮缩放，能用鼠标拖动的效果🎈📍

解析

一开始想直接网上冲浪找源代码，没成想找了大半天没有合适的，然后自己上手参考多方版本最后产出缝合怪。

1. 因为项目中涉及很多dom操作，所以选择jQuery来进行操作会省很多代码量（版本3.6.0）；
2. 滚动事件火狐和谷歌不兼容，所以使用不同的操作逻辑；
3. 定义每滚动一次滚轮，放大或缩小10%，控制最小缩放层级为0.1。
4. 因为需要内容也跟随元素放大缩小，所以选用scale来进行缩放。

代码

HTML

<template>
  <div class="screen">
    <div class="screen-body" id="screenBody">
      <div class="screen-table" id="screenTable">
        我是Johu我能拖动还能缩放
      </div>
    </div>
  </div>
</template>

JavaScript

import $ from 'jquery'
export default {
  name: 'ScreenJQ',
  data () {
    return {
      scaleFloor: 1,
      scaleStep: 0.1,
      preDownPos: {}
    }
  },
  mounted () {
    const docScreen = $('#screenBody')
    docScreen.on('mousewheel DOMMouseScroll', this.scrollFunc)
    docScreen.on('mousedown', this.downFunc)
    docScreen.on('mouseup', this.upFunc)
  },
  methods: {
    scrollFunc (e) {
      e = e || window.event
      if (e.originalEvent.wheelDelta) { // IE/Opera/Chrome
        this.mouseScroll(e.originalEvent.wheelDelta)
      } else if (e.originalEvent.detail) { // Firefox
        this.mouseScroll(-e.originalEvent.detail)
      }
    },
    downFunc () {
      $('#screenBody').on('mousemove', this.moveFunc)
      this.preDownPos = this.getMousePos()
    },
    moveFunc () {
      const mosPostion = this.getMousePos()
      this.moveScreenTable(mosPostion.x - this.preDownPos.x, mosPostion.y - this.preDownPos.y)
      this.preDownPos = this.getMousePos()
    },
    upFunc () {
      $('#screenBody').off('mousemove', this.moveFunc)
    },
    moveScreenTable (x, y) {
      const docScreen = document.getElementById('screenTable')
      let moveX = this.getPixelValue(docScreen, 'left')
      let moveY = this.getPixelValue(docScreen, 'top')
      moveX += x
      moveY += y
      $('#screenTable').css('left', moveX + 'px').css('top', moveY + 'px')
    },
    mouseScroll (step) {
      if (step > 0) {
        this.scaleFloor += this.scaleStep
      } else if (step < 0 && this.scaleFloor > this.scaleStep * 2) {
        this.scaleFloor -= this.scaleStep
      }
      if (this.scaleFloor > 0) {
        $('#screenTable').css('transform', 'scale(' + this.scaleFloor + ')')
      } else {
        $('#screenTable').css('transform', '')
      }
    },
    getMousePos (event) {
      const e = event || window.event
      const x = e.clientX - document.getElementById('screenBody').offsetLeft
      const y = e.clientY - document.getElementById('screenBody').offsetTop
      return { x: x, y: y }
    },
    getPixelValue (doc, key) {
      return Number(doc.style[key].replace('px', ''))
    }
  }
}

css

使用less

.screen{
    height: 100%;
    display: flex;
    .screen-body{
      position: relative;
      width: 100%;
      background: #E6E6E6;
      overflow: hidden;
      .screen-table{
        width: 200px;
        height: 200px;
        position: absolute;
        background: #ffffff;
        left: 0;
        top: 0;
        z-index: 9;
        box-shadow: 0px 0px 20px #7b7b7b;
        overflow: hidden;
      }
    }
  }

才艺展示

参考

jQuery中文文档
获取鼠标位置
鼠标滚轮事件