当图片大于要显示的区域时，我们需要隐藏多余的部分，这可以通过绝对定位来实现，通过动态修改图片的左、顶值来移动图片。具体实现效果如下，如果我们移动div，实现思路差不多。

这里应该注意的是

当我们移动图片时，我们需要使用drag able=' false '来放置图片的img src=' http :/static/pano-dev/test/image-2 . jpg ' drag able=' false '/否则当我们按下鼠标时就无法监控onmousemove事件。

然后，您还需要禁用图片的选定css

/*检查*/-moz-user-select:无违禁元素；/* Firefox */-web kit-用户-选择：无；/*webkit浏览器*/-ms-user-select : none；/* IE10 */-khtml-user-select : none；/*早期浏览器*/user-select : none；Vue代码

风格朗='少'范围的@导入url(' ./test。减’)；/style template div class=' page ' div class=' image-move-wapper ' div class=' image-show-box ' ref=' imageshow-box ' div class=' drag-container ' ref=' drag container ' : style=' left : ' drag container。纽波特。“左”px；顶部： '拖曳容器。纽波特。top ' px ' ' @鼠标向下=' drag containermousedown ' div class=' drag-image-box ' img src=' http :/static/pano-dev/test/image-2。jpg '向下拖动=' false '/div class=' point ' style=' left :10 '；top :10% ' @ mouse down=' PointMouseDown '/div/div/div/template script导出默认值{ data(){ return { drag container : { box : { w : 0 0，h : 0 0 0 }，point: { left:top 3: } }，mouse point : }}，updated(){ let _ this=this；//确保数字正射影像图元素已经渲染成功，然后获取拖拽容器和显示区域的大小_这个$ NextTick(function(){ _ this。DragContainer。box={ w : _ this .参考文献。拖动容器。偏移量为，h: _this .参考文献。DragContainer。offset Height }；_这个。imageshowbox。box={ w : _ this .参考文献。imageshowbox。偏移量为，h: _this .参考文献。imageshowbox。偏移右侧}；//判断是否允许拖拽_这个。imageshowbox。拖动检查={ h : _ this。imageshowbox。盒子。这个。拖动容器。盒子。w？假：真，v : _ this。imageshowbox。盒子。这个。拖动容器。盒子。h？false : true }；});}，methods: { //鼠标在拖拽容器中按下时触发DragContainerMouseDown(e){ const _ this=this；//记录鼠标点击时的初始坐标这个。MousePoint={ x : e . Clientx，y : e . Clienty }；_这个。拖动容器。点=_这个。拖动容器。新观点；文件。尸体。onmousemove=_ this .dragcontainermousemovedocument . onmouseup=_ this .DragContainerMouseUp返回false}，//容器拖拽时触发DragContainerMouseMove(e){ const _ this=this；//鼠标偏移量=初始坐标-当前坐标让dx=e .客户端x-_ this。MousePoint。x；让dy=e . clienti-_ this。鼠标点。y；//获取拖拽容器移动后的左边的和顶端值如果(_这个。imageshowbox。拖动检查。h)var新x=dx 0？Math.min(0，_ this。拖动容器。重点。左dx):数学。max(-_这个。拖动容器。盒子。这个。imageshowbox。盒子。w，_这个。拖动容器。重点。左dx)；如果(_这个。imageshowbox。拖动检查。v)var new y=dy 0？Math.min(0，_ this。拖动容器。重点。top dy):数学。max(-_这个。拖动容器。盒子。这个。imageshowbox。盒子。h，_这个。拖动容器。重点。top dy)；_这个。DragContainer。NewPoint={左：型新x！='未定义？newx : _这个。拖动容器。重点。左，top:类型的newy！='未定义？纽伊： _这个。DragContainer。重点。top }；控制台。log(_ this。DragContainer。NewPoint)；返回false}，//移动完成取消鼠标移动和鼠标放开事件DragContainerMouseUp(e){ document。尸体。onmousemove=nulldocument.onmouseup=null}，PointMouseDown(e) { //阻止事件冒泡e . stopperpagation()；} }};/script样式表。第{ background: # 444宽度： 100%;高度： 100%;相对位置：image-move-wapper {位置：绝对；右： 50pxtop: 50px背景# fffbox-shadow: rgba(255，255，255，0.5)；padding: 10px }。图像显示盒{高： 400像素宽度： 400像素；光标：移动；飞越：隐藏；相对位置：拖动容器{ position : absolute eleft : 0pxtop : 0；/*禁止元素选中*/-moz-用户-选择：无；/*火狐*/-web套件-用户-选择：无；/*webkit浏览器*/-ms-用户-选择：无；/* IE10 */-khtml-用户-选择：无；/*早期浏览器*/user-选择：无；相对于{位置：拖动图像框；点{位置：绝对值；背景：红色；高度： 30px宽度： 30px边界半径： 50%;} } } }} 总结

以上所述是小编给大家介绍的基于某视频剪辑软件实现图片在指定区域内移动的思路详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！