Vue怎么利用自定义指令实现鼠标拖动元素效果

本篇内容主要讲解“Vue怎么利用自定义指令实现鼠标拖动元素效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue怎么利用自定义指令实现鼠标拖动元素效果”吧!

成都创新互联主要从事成都网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务乐昌,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

核心属性

  • Element.clientWidth:元素可视宽度。

  • Element.clientHeight:元素可视高度。

  • MouseEvent.clientX:鼠标相对于浏览器左上顶点的水平坐标。

  • MouseEvent.clientY:鼠标相对于浏览器左上顶点的垂直坐标。

  • Touch.clientX:触点相对于浏览器左上顶点的水平坐标(移动端属性)。

  • Touch.clientY:触点相对于浏览器左上顶点的垂直坐标(移动端属性)。

  • HTMLElement.offsetLeft:当前元素左上角相对于父节点(HTMLElement.offsetParent)的左边偏移的距离。当元素脱离文档流时(position: fixed)则相对于原点(浏览器左上顶点)偏移。【相关推荐:vuejs视频教程】

  • HTMLElement.offsetTop:当前元素左上角相对于父节点(HTMLElement.offsetParent)的顶部偏移的距离。当元素脱离文档流时(position: fixed)则相对于原点(浏览器左上顶点)偏移。

  • Element.style.top:可读可写,值为 offsetTop

  • Element.style.left:可读可写,值为 offsetLeft

Vue怎么利用自定义指令实现鼠标拖动元素效果

实现思路

待滑动元素必须设置 position: fixed or absolute

元素滑动需要依赖于鼠标的移动,鼠标的移动位置决定了元素滑动的位置,元素的位置是通过调整左上顶点坐标来的,所以我们要知道元素滑动后的左上顶点坐标,这样才能将元素移动到指定位置(鼠标悬停的位置)。

首先要计算出鼠标在移动元素前相对元素的位置 (x, y)

// 鼠标当前的位置减去元素当前的位置
(x, y) = (e.clientX - el.offsetLeft, e.clientY - el.offsetTop)

鼠标相对元素位置是指相对于元素左上顶点的位置。

e 指鼠标事件,el 指滑动的元素。

知道了鼠标的相对位置,后续的鼠标移动,只要知道移动后的鼠标坐标,就能很容易的把元素的左上顶点坐标算出来。

计算元素移动后的左上顶点坐标 (x', y')

// 鼠标当前的位置减去滑动前的相对位置
(x‘, y’) = (e.clientX - x, e.clientY - y)

(x', y') 就是要移动的最终坐标,然后调整元素位置即可

el.style.left = x' + 'px'
el.style.top = y' + 'px'

代码






    .ball-wrap {
	position: fixed;
    }

drag 是我们自定义的指令,在需要滑动的元素上绑定 v-drag 即可。

注意

自定义指令this指向问题

在自定义指令 directives 内不能访问 this,如果需要修改 data 里的值,需要通过 vnode.context.字段名 = 值 修改。

滑动后点击事件被触发

鼠标事件触发顺序:

mouseover - mousedown - mouseup - click - mouseout

滑动的前提是鼠标必须按下再滑动,所以在我们滑动完毕松开鼠标时,click 事件会被触发。

解决方法:定义一个标志变量,表示是否是滑动,点击事件执行时,将此变量作为前置条件,如果是在滑动则不执行

// ...

data() 
  return {
    isDrag: false
  }
}

// ...

el.onmousedown = (e) => {
	// ...
	vnode.context.isDrag = false
	document.onmousemove = (e) => {
    	// 标记正在移动,解决元素移动后点击事件被触发的问题
       	vnode.context.isDrag = true
       	// ...
    }
}

// ...

methods: {
	click() {
	  if (this.isDrag) {
	    return
	  }

	  // ...
	}
}

移动端滑动问题

移动端滑动时会触发默认事件,导致滑动卡顿。

在要触发滑动的元素上加上 @touchmove.prevent,以阻止默认事件的发生。

到此,相信大家对“Vue怎么利用自定义指令实现鼠标拖动元素效果”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享文章:Vue怎么利用自定义指令实现鼠标拖动元素效果
网页地址:http://pwwzsj.com/article/jdohhh.html