图片的拖动

标签：const 拖动 offsetX transform offsetY let document 图片

 

 <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