关于Vue 自定义指令实现元素拖动的详细代码
更新时间：2022年01月18日 11:51:48 作者：漠里
这篇文章主要介绍了Vue 自定义指令实现元素拖动,在使用自定义指令之前，先对自定义指令有一定的了解，主要从自定义指令定义范围，钩子函数方面入手，需要的朋友可以参考下
昨天在做的一个功能时，同时弹出多个框展示多个表格数据。
这些弹出框可以自由拖动。单独的拖动好实现，给元素绑定 mousedowm 事件。
这里就想到了 Vue 里面自定义指令来实现。
一、自定义指令
在使用自定义指令之前，先对自定义指令有一定的了解。从以下几个方面着手：
1、自定义指令定义范围
全局注册和组件内注册（注册的范围根据实际业务需求来）
// 注册一个全局指令，可以在任何组件使用
Vue.directive('focus',{
// 当被绑定的元素插入 DOM 时
inserted: function(el){
// 聚焦元素
el.focus()
}
})
// 在组件内注册，只能当前组件使用
directives:{
focus:{
inserted: function(el){
el.focus()
}
}
}
// 使用
<input v-focus>2、钩子函数
对于一个指令有下面一些钩子函数可以选择：
- bind：只调用一次，指令第一次绑定到元素时调用
- inserted：被绑定元素插入父节点时调用
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
- componentUpdated：指令所在的 VNode 及其子 VNode 全部更新后调用
- unbind：只调用一次，指令与元素解绑时调用
3、函数参数
指令钩子函数会被传入以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM
- binding：一个对象，包含以下 property：
name：指令名
value：指令绑定的值
oldValue：指令绑定的前一个值
expression：字符串形式的指令表达式
arg：传给指令的参数
modifiers：一个包含修饰符的对象
- vnode：Vue 编译生成的虚拟节点
- oldVnode：上一个虚拟节点
二、拖动实现
拖动的实现：给目标 Element 注册 mousedown 事件，在这个事件里面再对 document 的 mousemove 和 mouseup 注册。
代码如下：
directives: {
drag: {
// 拖动标题栏，让父元素改变位置，这里所以选择 inserte的
inserted: (el) => {
const target = el.parentElement
el.onmousedown = (e) => {
const disX = e.pageX - target.offsetLeft
const disY = e.pageY - target.offsetTop
document.onmousemove = (de) => {
target.style.left = de.pageX - disX + 'px'
target.style.top = de.pageY - disY + 'px'
}
document.onmouseup = (de) => {
document.onmousemove = document.onmouseup = null
}
}
}
}
}在需要的 Element 上面使用 v-drag 即可。
到此这篇关于Vue 自定义指令实现元素拖动的文章就介绍到这了,更多相关Vue 自定义指令元素拖动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决vite打包后白屏之router-view不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上。下面通过本文给大家介绍全新打包工具parcel零配置vue开发脚手架的相关知识，感兴趣的朋友一起看看吧2018-01-01
这篇文章主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要给大家介绍了关于vue项目中实现缓存的最佳方案，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
下面小编就为大家分享一篇在vue组件中使用axios的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue.js报错Failed to resolve filter问题的解决方法
这篇文章主要介绍了Vue.js报错Failed to resolve filter问题的解决方法,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了vue如何点击多个tab标签打开关闭多个页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。具体实例大家大家参考下本文2018-05-05
这篇文章主要介绍了vant-ui组件库中如何修改NavBar导航栏的样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue微信公众号网页分享的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
最新评论