图片的拖动
<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
}
},
