基于vue实现可拖动弹框

el-dialog弹框拖拽

在 utils 中新建 directives.js 文件

import Vue from 'vue'// 自定义元素实现弹框拖拽[重点]
Vue.directive('draw', {inserted: function (el, binding, vNode) {el.setAttribute('style', 'position: fixed; z-index: 9999')},bind: function (el, bindding, vNode) {el.setAttribute('draggable', true)let left, top, width, heightel._dragstart = function (event) {event.stopPropagation()left = event.clientX - el.offsetLefttop = event.clientY - el.offsetTopwidth = el.offsetWidthheight = el.offsetHeight}el._checkPosition = function () { // 防止被拖出边界let width = el.offsetWidthlet height = el.offsetHeightlet left = Math.min(el.offsetLeft, document.body.clientWidth - width)left = Math.max(0, left)let top = Math.min(el.offsetTop, document.body.clientHeight - height)top = Math.max(0, top)el.style.left = left + 'px'el.style.top = top + 'px'el.style.width = width + 'px'el.style.height = height + 'px'}el._dragEnd = function (event) {event.stopPropagation()left = event.clientX - lefttop = event.clientY - topel.style.left = left + 'px'el.style.top = top + 'px'el.style.width = width + 'px'el.style.height = height + 'px'el._checkPosition()}el._documentAllowDraop = function (event) {event.preventDefault()}document.body.addEventListener('dragover', el._documentAllowDraop)el.addEventListener('dragstart', el._dragstart)el.addEventListener('dragend', el._dragEnd)window.addEventListener('resize', el._checkPosition)},unbind: function (el, bindding, vNode) {document.body.removeEventListener('dragover', el._documentAllowDraop)el.removeEventListener('dragstart', el._dragstart)el.removeEventListener('dragend', el._dragEnd)window.removeEventListener('resize', el._checkPosition)delete el._documentAllowDraopdelete el._dragstartdelete el._dragEnddelete el._checkPosition}
})// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {bind (el, binding, vnode, oldVnode) {const dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')dialogHeaderEl.style.cursor = 'move'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)dialogHeaderEl.onmousedown = (e) => {// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTop// 获取到的值带px 正则匹配替换let styL, styT// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)} else {styL = +sty.left.replace(/\px/g, '')styT = +sty.top.replace(/\px/g, '')}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离const l = e.clientX - disXconst t = e.clientY - disY// 移动当前元素dragDom.style.left = `${l + styL}px`dragDom.style.top = `${t + styT}px`// 将此时的位置传出去// binding.value({x:e.pageX,y:e.pageY})}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}}}
})// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {bind (el, binding, vnode, oldVnode) {const dragDom = binding.value.$el.querySelector('.el-dialog')el.onmousedown = (e) => {// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientX - el.offsetLeftdocument.onmousemove = function (e) {e.preventDefault() // 移动时禁用默认事件// 通过事件委托，计算移动的距离const l = e.clientX - disXdragDom.style.width = `${l}px`}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}}}
})

main.js中导入：import ‘./utils/directives.js’
使用 el-dialog 的地方加入 v-dialogDrag

<el-dialog:visible.sync="dialogVisible"v-dialogDrag>// ...</el-dialog>

自定义元素弹框拖拽(重点)

自定义指令的内容，请见utils 中新建 directives.js 文件

 <template><div class="home"><div class="drag" v-draw>可拖动窗口</div></div>
</template><style scoped>
.drag {min-width: 240px;min-height: 400px;background: #d0def8;display: flex;align-items: center;justify-content: center;
}
</style>

参考文章：

实现在vue中element-ui的el-dialog弹框拖拽

自定义元素弹框拖拽

基于vue实现可拖动弹框相关推荐

vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
vue实现搜索框搜索新增_基于Vue.js实现简单搜索框
主要用到的知识很简单,简单的vuejs2.0的知识就够了.源码用了.vue构建和ES6,用了webpack打包等等.我资历还浅,先用一个简单的.js的写. 先看效果这里有两个组件,一个组件是logo ...
基于Vue实现表格拖拽排序——sortablejs
表格拖拽排序 1.安装插件 2.页面引入sortablejs 3.准备表格渲染所需的数据 4.绘制表格结构(要绑定唯一的值row-key,不然会出错) 5.完成表格行与列的拖拽排序事件 1.安装插件 ...
vue 移动到图片浮动_基于Vue实现拖拽升级（九宫格拖拽）
前言在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局.具体代码以及demo可以点以下超链接进入效果实例 Demo 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称 ...
基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
基于vue与element-ui写出的关于搜索框搜索关键字，下方关键字高亮的demo
这是一个基于vue与element-ui写出的关于搜索框搜索关键字,下方关键字高亮的demo 希望对大家有所帮助效果如下: <template>< ...
Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件
el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入element-ui 官网npm文档:https://www.npmjs.com/ ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...

基于vue实现可拖动弹框

基于vue实现可拖动弹框

el-dialog弹框拖拽

自定义元素弹框拖拽(重点)

基于vue实现可拖动弹框相关推荐

最新文章

热门文章