<div @mousedown="imgMove" id="imgRef" ref="imgRef" class="full-height full-width img-style" style="position: relative" > <el-image fit="contain" :src="src" class="full-height full-width img-style" :style="imgStyle" /> </div> methods1: import { on, off } from 'element-ui/src/utils/dom' import { rafThrottle } from 'element-ui/src/utils/util' imgMove(e) { const { offsetX, offsetY } = this.transform const startX = e.pageX const startY = e.pageY this._dragHandler = rafThrottle((ev) => { e.preventDefault() this.transform.offsetX = offsetX + ev.pageX - startX this.transform.offsetY = offsetY + ev.pageY - startY }) on(document, 'mousemove', this._dragHandler) on(document, 'mouseup', () => { off(document, 'mousemove', this._dragHandler) }) e.preventDefault() }, computed: { imgStyle() { const { scale, deg, offsetX, offsetY } = this.transform const style = { transform: `scale(${scale}) rotate(${deg}deg)`, 'margin-left': `${offsetX}px`, 'margin-top': `${offsetY}px` } return style } }, methods2: imgMove(event) { event.preventDefault() let div = this.$refs.imgRef let originX = event.screenX let originY = event.screenY let translateX = this.transform.offsetX let translateY = this.transform.offsetY const move = (e) => { let afterX = e.screenX let afterY = e.screenY this.transform.offsetX = translateX + (afterX - originX) this.transform.offsetY = translateY + (afterY - originY) } div.addEventListener('mousemove', move) div.addEventListener('mouseup', () => { div.removeEventListener('mousemove', move) }) }, methods3: imgMove(el) { el.preventDefault() let oDiv = this.$refs.imgRef oDiv.onmousedown = function (e) { const disX = e.clientX - oDiv.offsetLeft const disY = e.clientY - oDiv.offsetTop document.onmousemove = function (e) { const l = e.clientX - disX const t = e.clientY - disY oDiv.style.left = l + 'px' oDiv.style.top = t + 'px' } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null } return false } }, 标签:const,拖动,offsetX,transform,offsetY,let,document,图片 From: https://www.cnblogs.com/loveyork/p/16966536.html