这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动
@mousewheel.prevent 阻止默认行为
<div span="8" class="left" @mousewheel.prevent="rollImg">
<img :src="imgUrl" alt="" class="img" ref="imgDiv" @mousedown="move">
</div>
JavaScript代码
// 拖动图片
move(e) {
e.preventDefault()
// 获取元素
var left = document.querySelector('.left')
var img = document.querySelector('.img')
var x = e.pageX - img.offsetLeft
var y = e.pageY - img.offsetTop
// 添加鼠标移动事件
left.addEventListener('mousemove', move)
function move(e) {
img.style.left = e.pageX - x + 'px'
img.style.top = e.pageY -