vue 移动到图片浮动_基于Vue实现图片在指定区域内移动
當圖片比要顯示的區域大時，需要將多余的部分隱藏掉，我們可以通過絕對定位來實現，并通過動態修改圖片的left值和top值從而實現圖片的移動。具體實現效果如下圖，如果我們移動的是div 實現思路相仿。
此處需要注意的是
我們在移動圖片時，需要通過draggable="false"?將圖片的 ，否則按下鼠標監聽onmousemove事件時監聽不到
然后還需要禁用圖片的選中css
/*禁止元素選中*/
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
Vue 代碼
@import url("./test.less");
export default {
data() {
return {
dragContainer: {
box: {
w: 0,
h: 0
},
point: {
left: 0,
top: 0
},
newPoint: {
left: 0,
top: 0
}
},
mousePoint: {
x: 0,
y: 0
},
imageShowBox: {
box: {
w: 0,
h: 0
},
dragcheck: {
h: true,
v: true
}
}
};
},
updated() {
let _this = this;
// 確保DOM元素已經渲染成功，然后獲取拖拽容器和顯示區域的大小
_this.$nextTick(function() {
_this.dragContainer.box = {
w: _this.$refs.dragContainer.offsetWidth,
h: _this.$refs.dragContainer.offsetHeight
};
_this.imageShowBox.box = {
w: _this.$refs.imageShowBox.offsetWidth,
h: _this.$refs.imageShowBox.offsetHeight
};
// 判斷是否允許拖拽
_this.imageShowBox.dragcheck = {
h: _this.imageShowBox.box.w > _this.dragContainer.box.w ? false : true,
v: _this.imageShowBox.box.h > _this.dragContainer.box.h ? false : true
};
});
},
methods: {
// 鼠標在拖拽容器中按下時觸發
DragContainerMouseDown(e) {
const _this = this;
// 記錄鼠標點擊時的初始坐標
this.mousePoint = {
x: e.clientX,
y: e.clientY
};
_this.dragContainer.point = _this.dragContainer.newPoint;
document.body.onmousemove = _this.DragContainerMouseMove;
document.onmouseup = _this.DragContainerMouseUp;
return false;
},
// 容器拖拽時觸發
DragContainerMouseMove(e) {
const _this = this;
// 鼠標偏移量 = 初始坐標 - 當前坐標
let dx = e.clientX - _this.mousePoint.x;
let dy = e.clientY - _this.mousePoint.y;
// 獲取拖拽容器移動后的left和top值
if (_this.imageShowBox.dragcheck.h)
var newx = dx > 0 ? Math.min(0, _this.dragContainer.point.left + dx) : Math.max(- _this.dragContainer.box.w + _this.imageShowBox.box.w, _this.dragContainer.point.left + dx );
if (_this.imageShowBox.dragcheck.v)
var newy = dy > 0 ? Math.min(0, _this.dragContainer.point.top + dy) : Math.max(- _this.dragContainer.box.h + _this.imageShowBox.box.h, _this.dragContainer.point.top + dy );
_this.dragContainer.newPoint = {
left: typeof newx != 'undefined' ? newx : _this.dragContainer.point.left,
top: typeof newy != 'undefined' ? newy : _this.dragContainer.point.top
};
console.log(_this.dragContainer.newPoint);
return false;
},
// 移動完成 取消onmousemove和onmouseup事件
DragContainerMouseUp(e) {
document.body.onmousemove = null;
document.onmouseup = null;
},
PointMouseDown(e) {
//阻止事件冒泡
e.stopPropagation();
}
}
};
樣式表
.page {
background: #444;
width: 100%;
height: 100%;
position: relative;
.image-move-wapper {
position: absolute;
right: 50px;
top: 50px;
background: #fff;
box-shadow: rgba(255, 255, 255, 0.5);
padding: 10px;
}
.image-show-box {
height: 400px;
width: 400px;
cursor: move;
overflow: hidden;
position: relative;
.drag-container {
position: absolute;
left: 0px;
top: 0;
/*禁止元素選中*/
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
.drag-image-box {
position: relative;
.point {
position: absolute;
background: red;
height: 30px;
width: 30px;
border-radius: 50%;
}
}
}
}
}
總結
以上是生活随笔為你收集整理的vue 移动到图片浮动_基于Vue实现图片在指定区域内移动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： pitr 原理_PostgreSQL热备
- 下一篇： tinymce vue 部分工具不显示_