基于Vue实现图片在指定区域内移动的思路详解

(编辑：jimmy 日期: 2024/11/19 浏览：2)

当图片比要显示的区域大时，需要将多余的部分隐藏掉，我们可以通过绝对定位来实现，并通过动态修改图片的left值和top值从而实现图片的移动。具体实现效果如下图，如果我们移动的是div 实现思路相仿。

此处需要注意的是

我们在移动图片时，需要通过draggable="false" 将图片的 <img src="/UploadFiles/2021-04-02/image-2.jpg">否则按下鼠标监听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="/UploadFiles/2021-04-02/image-2.jpg">

.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实现图片在指定区域内移动的思路详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！


        
            上一篇：详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
            下一篇：微信小程序车牌号码模拟键盘输入功能的实现代码