vue跟随鼠标移动和边界处理

需求：需要能够拖拽图片进行移动，不会超出容器边界范围

 1.获取到鼠标移动的坐标和被点击拖拽的dom的坐标

补充前端跟坐标有关的知识点

1.pageX和pageY是整个文档开始计算的坐标, 红色表示pageX和pageY

2.offsetX和offsetY是一个鼠标在一个元素内的坐标, 蓝色表示offsetX和offsetY

3.clientX和clientY是当前屏幕可视化局域计算的坐标, 当文档不向下滚动时，红色也可以表示clientX和clientY

分析得出：当前图片已经超出可视化区域，需要使用pageX和pageY才能准确地拿到鼠标坐标

2.通过计算可以获取到当前图片左距离和上距离

这里拖拽采用的事件是：

mousedown:鼠标点击时触发

mousemove:鼠标移动时触发

mouseup:鼠标松开时触发

其中mousedown应该绑定被拖拽的元素，而mouseup就所谓了，mousemove一般通过document或者window进行监听，当然也可以是父容器。

在vue2的图片中绑定@mouseup="mouseup" @mousedown="dragImg"

1.  
   dragImg(img) {
2.  
   img.preventDefault()
3.  
   this.imgObj = img
4.  
   window.addEventListener('mousemove', this.move)
5.  
   }
6.  
    
7.  
   mouseup() {
8.  
   window.removeEventListener('mousemove', this.move)
9.  
   this.getContainerH()
10.  
    }

1.  
2.  
   this.imgObj.target.style.position = 'absolute'
3.  
   this.imgObj.target.style.left = pageX - this.imgObj.offsetX 'px'
4.  
   this.imgObj.target.style.top = pageY - this.imgObj.offsetY 'px'
5.  
    
6.  

3.进行边界判断以及父容器高度处理

 首先是最简单的上边界和左边界判断：

1.  
   //边界判断
2.  
   if (this.imgObj.target.offsetTop <= 0) {
3.  
   this.imgObj.target.style.top = 0 'px'
4.  
   }
5.  
    
6.  
   if (this.imgObj.target.offsetLeft <= 0) {
7.  
   this.imgObj.target.style.left = 0 'px'
8.  
   }

然后是右边界判断：

这里需要获取到屏幕的内在宽度，一般都作为一个工具函数，这里是通用的写法，如下代码所示：

1.  
   function getClientW() {
2.  
   return {
3.  
   width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
4.  
   height:
5.  
   window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
6.  
   }
7.  
   }

 通过当前元素的做距离加上当前元素的自身大小和屏幕内在宽度进行比较处理可得如下代码：

1.  
   if (
2.  
   this.imgObj.target.style.left.split('px')[0] this.imgObj.target.clientWidth >=
3.  
   this.client.width
4.  
   ) {
5.  
   this.imgObj.target.style.left = this.client.width - this.imgObj.target.clientWidth 'px'
6.  
   }

最后的问题是下边界无需处理，由于元素已经脱离了标准流，会导致父元素高度塌陷，为了能够显示父元素高度以此来添加背景颜色，这里需要用给父容器实时获取最新高度。

1.  
   getContainerH() {
2.  
   const singleMvIndex = this.$refs.singleMvIndex
3.  
   singleMvIndex.style.height =
4.  
   this.imgObj.target.clientHeight this.imgObj.target.offsetTop this.paddingH 'px'
5.  
   if (singleMvIndex.clientHeight < this.client.height) {
6.  
   singleMvIndex.style.height = this.client.height 'px'
7.  
   }
8.  
   },

这里用此函数在拖拽时不断调用，singleMvIndex是容器的dom，

容器高度 = 元素内在高度 元素距离父容器顶端距离 容器自带padding

容器就会不断变大，向上拖拽时容器该需要变小，

这里的做法时容器高度如果小于屏幕内在高度就会等于屏幕内在高度就解决问题了。

这里算是对一些小的问题的解决，算是分享给大家，希望能帮助到一些人，谢谢。

最后时mousemove整体代码：

1.  
   move(e) {
2.  
   let { pageX, pageY } = e
3.  
   this.imgObj.target.style.position = 'absolute'
4.  
   this.imgObj.target.style.left = pageX - this.imgObj.offsetX 'px'
5.  
   this.imgObj.target.style.top = pageY - this.imgObj.offsetY 'px'
6.  
   //边界判断
7.  
   if (this.imgObj.target.offsetTop <= 0) {
8.  
   this.imgObj.target.style.top = 0 'px'
9.  
   }
10.  
    if (this.imgObj.target.offsetLeft <= 0) {
11.  
    this.imgObj.target.style.left = 0 'px'
12.  
    }
13.  
    if (
14.  
    this.imgObj.target.style.left.split('px')[0] this.imgObj.target.clientWidth >=
15.  
    this.client.width
16.  
    ) {
17.  
    this.imgObj.target.style.left = this.client.width - this.imgObj.target.clientWidth 'px'
18.  
    }
19.  
    this.getContainerH()
20.  
    },

这篇好文章是转载于：学新通技术网