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

本篇内容主要讲解“Vue怎么利用自定义指令实现鼠标拖动元素效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue怎么利用自定义指令实现鼠标拖动元素效果”吧!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。待滑动元素必须设置 position: fixed or absolute元素滑动需要依赖于鼠标的移动，鼠标的移动位置决定了元素滑动的位置，元素的位置是通过调整左上顶点坐标来的，所以我们要知道元素滑动后的左上顶点坐标，这样才能将元素移动到指定位置（鼠标悬停的位置）。首先要计算出鼠标在移动元素前相对元素的位置 (x, y) ：鼠标相对元素位置是指相对于元素左上顶点的位置。e 指鼠标事件，el 指滑动的元素。知道了鼠标的相对位置，后续的鼠标移动，只要知道移动后的鼠标坐标，就能很容易的把元素的左上顶点坐标算出来。计算元素移动后的左上顶点坐标 (x', y') ：(x', y') 就是要移动的最终坐标，然后调整元素位置即可drag 是我们自定义的指令，在需要滑动的元素上绑定 v-drag 即可。在自定义指令 directives 内不能访问 this，如果需要修改 data 里的值，需要通过 vnode.context.字段名 = 值 修改。鼠标事件触发顺序：mouseover - mousedown - mouseup - click - mouseout滑动的前提是鼠标必须按下再滑动，所以在我们滑动完毕松开鼠标时，click 事件会被触发。解决方法：定义一个标志变量，表示是否是滑动，点击事件执行时，将此变量作为前置条件，如果是在滑动则不执行。移动端滑动时会触发默认事件，导致滑动卡顿。在要触发滑动的元素上加上 @touchmove.prevent，以阻止默认事件的发生。到此，相信大家对“Vue怎么利用自定义指令实现鼠标拖动元素效果”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: @Autowired注入依赖失败的问题如何解决

本篇内容主要讲解“@Autowired注入依赖失败的问题如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“@Autowired注入依赖失败的问题如何解决”吧!在Spring Boot项目中使用@Autowire…