,,当图片比要显示的区域大时,需要将多余的部分隐藏掉,我们可以通过绝对定位来实现,并通过动态修改图片的左值和最值从而实现图片的移动。具体实现效果如下图,如果我们移动的是div实现思路相仿。
此处需要注意的是
我们在移动图片时,需要通过拖<代码>=癴alse”将图片的<代码> & lt; img src=" https://www.yisu.com/static/pano dev/test/image - 2. jpg”可拖动的=癴alse”/祝辞,否则按下鼠标监听onmousemove事件时监听不到
然后还需要禁用图片的选中css
/*禁止元素选中*/-moz-user-select:没有;/*火狐*/-webkit-user-select:没有;/* webkit浏览器*/-ms-user-select:没有;/* IE10 */-khtml-user-select:没有;/*早期浏览器*/用户选择:没有;
Vue代码
& lt;风格lang=吧佟眘coped>
@ import url (“。/test.less”);
& lt;/style>
& lt; template>
& lt; div类=耙趁妗北?
& lt; div类=癷mage-move-wapper”比;
& lt; div类=" image-show-box " ref=癷mageShowBox”比;
& lt; div class=" drag-container“ref=癲ragContainer”: @mousedown=癉ragContainerMouseDown”比;
& lt; div类=癲rag-image-box”比;
& lt; img src=" https://www.yisu.com/static/pano dev/test/image - 2. jpg”可拖动的=癴alse”/比;
& lt; div类="点" @mousedown=癙ointMouseDown祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
dragContainer: {
箱:{
w: 0,
h: 0
},
点:{
左:0,
上图:0
},
newPoint: {
左:0,
上图:0
}
},
mousePoint: {
x: 0,
y: 0
},
imageShowBox: {
箱:{
w: 0,
h: 0
},
dragcheck: {
h:没错,
v:真
}
}
};
},
更新(){
让_this=;//确保DOM元素已经渲染成功,然后获取拖拽容器和显示区域的大小
_this。美元nextTick(函数(){
_this.dragContainer。盒={
w: _this。refs.dragContainer.offsetWidth美元,
h: _this。refs.dragContainer.offsetHeight美元
};
_this.imageShowBox。盒={
w: _this。refs.imageShowBox.offsetWidth美元,
h: _this。refs.imageShowBox.offsetHeight美元
};//判断是否允许拖拽
_this.imageShowBox。dragcheck={
h: _this.imageShowBox.box。w比;_this.dragContainer.box。w & # 63;假:没错,
v: _this.imageShowBox.box。h比;_this.dragContainer.box。h & # 63;假:真
};
});
},
方法:{//鼠标在拖拽容器中按下时触发
DragContainerMouseDown (e) {
const _this=;//记录鼠标点击时的初始坐标
这一点。mousePoint={
x: e.clientX,
y: e.clientY
};
_this.dragContainer。点=_this.dragContainer.newPoint;
document.body。onmousemove=_this.DragContainerMouseMove;
文档。onmouseup=_this.DragContainerMouseUp;
返回错误;
},//容器拖拽时触发
DragContainerMouseMove (e) {
const _this=;//鼠标偏移量=初始坐标——当前坐标
让dx=e。clientX - _this.mousePoint.x;
让dy=e。clientY - _this.mousePoint.y;//获取拖拽容器移动后的顶部和左值
如果(_this.imageShowBox.dragcheck.h)
var newx=dx比;0 & # 63;数学。min (0, _this.dragContainer.point。左+ dx):数学。马克斯(- _this.dragContainer.box。w + _this.imageShowBox.box。w, _this.dragContainer.point。左+ dx);
如果(_this.imageShowBox.dragcheck.v)
var newy=dy比;0 & # 63;数学。min (0, _this.dragContainer.point。+ (dy):数学。马克斯(- _this.dragContainer.box。h + _this.imageShowBox.box。h, _this.dragContainer.point。前+ dy);
_this.dragContainer。newPoint={
左:typeof newx !=ㄒ濉? # 63;newx: _this.dragContainer.point.left,
上图:typeof newy !=ㄒ濉? # 63;newy: _this.dragContainer.point.top
};
console.log (_this.dragContainer.newPoint);
返回错误;
},//移动完成取消onmousemove和onmouseup事件
DragContainerMouseUp (e) {
document.body。onmousemove=零;
文档。onmouseup=零;
},
PointMouseDown (e) {//阻止事件冒泡
e.stopPropagation ();
}
}
};
& lt;/script>
样式表
.page {
背景:# 444;
宽度:100%;
高度:100%;
位置:相对;
.image-move-wapper {
位置:绝对的;
右:50 px;
上图:50 px;
背景:# fff;
不必:rgba (255、255、255、0.5);
填充:10 px;
}
.image-show-box {
身高:400 px;
宽度:400 px;
光标:移动;
溢出:隐藏;
位置:相对;
.drag-container {
位置:绝对的;
左:0 px;
上图:0;/*禁止元素选中*/-moz-user-select:没有;/*火狐*/-webkit-user-select:没有;/* webkit浏览器*/-ms-user-select:没有;/* IE10 */-khtml-user-select:没有;/*早期浏览器*/用户选择:没有;
.drag-image-box {
位置:相对;
.point {
位置:绝对的;
背景:红色;
高度:30 px;
宽度:30 px;
这个特性:50%;
}
}
}
}
}
