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

解析

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

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


才艺展示

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