Vue3自定义drag指令详解
更新时间:2023年12月20日 16:33:03 作者:藏在角落的星
这篇文章主要为大家详细介绍了Vue3自定义drag指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
新增drag.js文件
// 拖拽的指令 class Drap { static zIndex = 1; constructor(el, option = {}) { this.el = el; this.x = 0; this.y = 0; this.option = option; this.init(); this.timeOutEvent = 0; this.ele = null } init() { this.setEleStyle(this.option || {}); //拖拽事件赋值给头部标签,此处代码可实现仅在移动头部时操作整个DOM块 // this.ele = this.el.getElementsByClassName('header')[0] // if(this.ele){ // this.ele.onmousedown = (e) => { // this.onMouseDown(e) // this.el.setCapture && this.el.setCapture() //全局捕获 // } // }else{ // this.el.onmousedown = (e) => { // this.onMouseDown(e) // this.el.setCapture && this.el.setCapture() //全局捕获 // } // } this.el.onmousedown = (e) => { this.gtouchstart(e) } } //样式设置 setEleStyle(option) { for (const key in option) { this.el.style[key] = option[key] } } //按下ele onMouseDown(e) { let zIndex = getComputedStyle(this.el).getPropertyValue('z-index'); zIndex = isNaN(zIndex) ? 1 : zIndex Drap.zIndex = Drap.zIndex > zIndex ? Number(Drap.zIndex) + 1 : Number(zIndex) + 1 this.setEleStyle({ "zIndex": Drap.zIndex, position: 'fixed', 'cursor': 'move' }) this.x = e.clientX - this.el.offsetLeft; this.y = e.clientY - this.el.offsetTop; document.onmousemove = (e) => this.onMouseMove(e); document.onmouseup = (e) => this.onMouseUp(e) } //移动move onMouseMove(e) { this.gtouchmove() let X = e.clientX - this.x let Y = e.clientY - this.y //下面代码操作DOM元素不会移出屏幕,-25应更换为-10,按自己需求设置 if (X < 0) { X = 0 } else if (X > document.documentElement.clientWidth - this.el.offsetWidth) { X = document.documentElement.clientWidth - this.el.offsetWidth - 25 } if (Y < 0) { Y = 0 } else if (Y > document.documentElement.clientHeight - this.el.offsetHeight) { Y = document.documentElement.clientHeight - this.el.offsetHeight - 25 } this.el.style.left = X + 'px' this.el.style.top = Y + 'px' } //释放 onMouseUp(e) { this.gtouchend() document.onmousemove = null document.onmouseup = null this.setEleStyle({ 'cursor': 'pointer' }) this.el.setCapture && this.el.setCapture() //释放全局捕获 } gtouchstart(e) { this.timeOutEvent = setTimeout(() => { this.timeOutEvent = 0; //真正长按后应该执行的内容 console.log("长按事件触发发"); this.onMouseDown(e) this.el.setCapture && this.el.setCapture() //全局捕获 }, 200); return false; } gtouchmove() { clearTimeout(this.timeOutEvent); //清除定时器 this.timeOutEvent = 0; console.log("取消了"); } gtouchend() { clearTimeout(this.timeOutEvent); //清除定时器 if (this.timeOutEvent !== 0) { console.log("你这是点击,不是长按"); } return false; } } const drag = { mounted(el, binding) { new Drap(el, binding.value || {}) } } export default drag
main.js添加全局导入
import drag from './directives/drag.js' app.directive('drag', drag)
页面代码使用v-drag
注:mini-dialog为自定义弹框组件
<div class="m-dia" v-if="dialogShow" v-drag> <mini-dialog @closed="closedMini"></mini-dialog> </div>
css样式
注意,可移动块必须是top和left属性
.m-dia { position: absolute; top: 75%; left: 70%; }
结语:
上述代码能完成基础自定义拖拽功能,未测试仅抓取头部才能拖动情况,且拖动代码块时光标显示为指针,不是可移动光标。
到此这篇关于Vue3自定义drag指令详解的文章就介绍到这了,更多相关Vue3自定义drag指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
这篇文章主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-07-07vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法
这篇文章主要介绍了vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
最新评论