antd vue的modal可拖拽指令,包括表头拖拽和表体拖拽

项目需要使用antd-vue的modal可以拖拽,然后在网上搜了一下方法, 有一个老哥写了个方法
链接在这: https://blog.csdn.net/baidu_20264113/article/details/113058067

由于老哥写的是表头可拖拽, 我就稍加改了一下, 可以表体表头都拖拽,任君选择
先建一个js文件

import Vue from 'vue'// v-drag-modal: 弹窗拖拽
Vue.directive('drag-modal', (el, bindings, vnode) => {Vue.nextTick(() => {let { visible, destroyOnClose } = vnode.componentInstance// 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用if (!visible) returnlet modal = el.getElementsByClassName('ant-modal')[0]let header = el.getElementsByClassName('ant-modal-header')[0]let left = 0let top = 0// 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置if (!destroyOnClose) {left = modal.left || 0top = modal.top || 0}// top 初始值为 offsetToptop = top || modal.offsetTop// 点击title部分拖动header.onmousedown = e => {let startX = e.clientXlet startY = e.clientYheader.left = header.offsetLeftheader.top = header.offsetTopel.onmousemove = event => {let endX = event.clientXlet endY = event.clientYmodal.left = header.left + (endX - startX) + leftmodal.top = header.top + (endY - startY) + topmodal.style.left = modal.left + 'px'modal.style.top = modal.top + 'px'}el.onmouseup = event => {left = modal.lefttop = modal.topel.onmousemove = nullel.onmouseup = nullheader.releaseCapture && header.releaseCapture()}header.setCapture && header.setCapture()}// 点击表单部分拖动// modal.onmousedown = e => {//   let startX = e.clientX//   let startY = e.clientY//   header.left = header.offsetLeft//   header.top = header.offsetTop//   el.onmousemove = event => {//     let endX = event.clientX//     let endY = event.clientY//     modal.left = header.left + (endX - startX) + left//     modal.top = header.top + (endY - startY) + top//     modal.style.left = modal.left + 'px'//     modal.style.top = modal.top + 'px'//   }//   el.onmouseup = event => {//     left = modal.left//     top = modal.top//     el.onmousemove = null//     el.onmouseup = null//     header.releaseCapture && header.releaseCapture()//   }//   header.setCapture && header.setCapture()// }})
})

如果需要表体拖拽就把modal.onmousedown部分打开,header.onmousedown隐掉

然后在main.js里引入使用
然后再需要的modal里使用v-drag-modal就可以了

<a-modal v-drag-modal></a-modal>

antd vue的modal可拖拽指令,包括表头拖拽和表体拖拽相关推荐

Antd Vue range-picker 日期初始值设置与重置日期踩坑总结
一.业务场景: 1.用form表单包裹,用的是 Antd Vue range-picker链接 2.创建时间初始值设置为当天的 00:00:00-23:59:59:如下截图: 2.日期选择器如下截图: ...
vue的移动app项目中，自定义拖拽指令的问题
使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: {//组建内自定义指令drag: {// 指令的定义bind: ...
vue拖拽指令之offsetX、clientX、pageX、screenX
自己一直很想做个拖拽生成静态页面的东西,说简单也简单,这个东西按道理用jsx语法是最好的,用render方法渲染生成的json.只是自己对这块还是没信心.今天写个vue的拖拽指令,顺便理一下offse ...
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码最终效果部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse ...
基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
Angular2封装拖拽指令
一:创建drag.directive.ts 代码如下: /* 1.Directive提供@Directive装饰器功能. 2.ElementRef注入到指令构造函数中.这样代码就可以访问 DOM 元素 ...
实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
draggable禁止拖动_通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽...
前言关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

antd vue的modal可拖拽指令,包括表头拖拽和表体拖拽

如果需要表体拖拽就把modal.onmousedown部分打开,header.onmousedown隐掉

antd vue的modal可拖拽指令,包括表头拖拽和表体拖拽相关推荐

最新文章

热门文章