思路讲图片设置为背景图进行设置拖动和旋转
html部分
image.png
js部分
//图片拖动
move(e) {
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = e => {
//鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;
//移动当前元素
odiv.style.left = left + "px";
odiv.style.top = top + "px";
};
document.onmouseup = e => {
document.onmousemove = null;
document.onmouseup = null;
};
},
// 滚轮放大缩小
handleZoomImg(e) {
this.isPreview = true;
console.log("鼠标滚动了", e);
e = e || window.event;
// 火狐下没有wheelDelta，用detail代替，由于detail值的正负和wheelDelta相反，所以取反
e.delta = e.wheelDelta || -e.detail;
e.preventDefault();
if (e.delta > 0) {
//当滑轮向上滚动时
this.scaleFunc(2);
}
if (e.delta < 0) {
//当滑轮向下滚动时
this.scaleFunc(-2);
}
}
css样式
.move-position {
position: relative; /*定位*/
top: 20px;
left: 0px;
z-index: 66;
}
