當圖片比要顯示的區域大時,需要將多餘的部分隱藏掉,我們可以通過絕對定位來實現,並通過動態修改圖片的left值和top值從而實現圖片的移動。具體實現效果如下圖,如果我們移動的是div 實現思路相仿。
此處需要注意的是
我們在移動圖片時,需要通過draggable=”false” 將圖片的 <img src=”/static/pano-dev/test/image-2.jpg” 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 程式碼
<style lang="less" scoped> @import url("./test.less"); </style> <template> <div class="page"> <div class="image-move-wapper"> <div class="image-show-box" ref="imageShowBox"> <div class="drag-container" ref="dragContainer" :style="`left:` + dragContainer.newPoint.left+`px; top:` + dragContainer.newPoint.top+`px`" @mousedown="DragContainerMouseDown"> <div class="drag-image-box"> <img src="/static/pano-dev/test/image-2.jpg" draggable="false" /> <div class="point" style="left:10%; top:10%" @mousedown="PointMouseDown"></div> </div> </div> </div> </div> </div> </template> <script> 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(); } } }; </script>
樣式表
.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%; } } } } }