8 changed files with 132 additions and 8 deletions
-
84src/utils/dialog/drag.js
-
12src/utils/dialog/index.js
-
3src/views/archivesManage/managementLibrary/mixins/index.js
-
3src/views/collectReorganizi/collectionLibrary/mixins/index.js
-
5src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
-
15src/views/system/archivesCategory/fileNoFormat/index.vue
-
2src/views/system/archivesCategory/fileNoFormat/module/form.vue
-
16src/views/system/archivesCategory/listBrowsing/module/form.vue
@ -0,0 +1,84 @@ |
|||||
|
export default { |
||||
|
bind(el, binding, vnode) { |
||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header') |
||||
|
const dragDom = el.querySelector('.el-dialog') |
||||
|
dialogHeaderEl.style.cssText += ';cursor:move;' |
||||
|
|
||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||
|
const getStyle = (function() { |
||||
|
if (window.document.currentStyle) { |
||||
|
return (dom, attr) => dom.currentStyle[attr] |
||||
|
} else { |
||||
|
return (dom, attr) => getComputedStyle(dom, false)[attr] |
||||
|
} |
||||
|
})() |
||||
|
|
||||
|
// 获取初始位置
|
||||
|
let initLeft = getStyle(dragDom, 'left') |
||||
|
let initTop = getStyle(dragDom, 'top') |
||||
|
if (initLeft.includes('%')) { |
||||
|
initLeft = +document.body.clientWidth * (+initLeft.replace(/%/g, '') / 100) |
||||
|
} else { |
||||
|
initLeft = +initLeft.replace(/\px/g, '') |
||||
|
} |
||||
|
if (initTop.includes('%')) { |
||||
|
initTop = +document.body.clientHeight * (+initTop.replace(/%/g, '') / 100) |
||||
|
} else { |
||||
|
initTop = +initTop.replace(/\px/g, '') |
||||
|
} |
||||
|
|
||||
|
// 考虑 transform 的影响
|
||||
|
const transform = getStyle(dragDom, 'transform') |
||||
|
const match = transform.match(/translate\((-?\d+(\.\d+)?%)?, (-?\d+(\.\d+)?%)?\)/) |
||||
|
let translateX = 0 |
||||
|
let translateY = 0 |
||||
|
if (match) { |
||||
|
translateX = +document.body.clientWidth * (+match[1].replace(/%/g, '') / 100) |
||||
|
translateY = +document.body.clientHeight * (+match[3].replace(/%/g, '') / 100) |
||||
|
} |
||||
|
|
||||
|
dialogHeaderEl.onmousedown = (e) => { |
||||
|
// 鼠标按下,计算当前元素距离可视区的距离
|
||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft |
||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop |
||||
|
const dragDomWidth = dragDom.offsetWidth |
||||
|
const dragDomHeight = dragDom.offsetHeight |
||||
|
const screenWidth = document.body.clientWidth |
||||
|
const screenHeight = document.body.clientHeight |
||||
|
|
||||
|
// 计算边界
|
||||
|
const minDragDomLeft = -initLeft - translateX |
||||
|
const maxDragDomLeft = screenWidth - initLeft - dragDomWidth - translateX |
||||
|
const minDragDomTop = -initTop - translateY |
||||
|
const maxDragDomTop = screenHeight - initTop - dragDomHeight - translateY |
||||
|
|
||||
|
document.onmousemove = function(e) { |
||||
|
// 通过事件委托,计算移动的距离
|
||||
|
let left = e.clientX - disX |
||||
|
let top = e.clientY - disY |
||||
|
|
||||
|
// 边界处理
|
||||
|
if (left < minDragDomLeft) { |
||||
|
left = minDragDomLeft |
||||
|
} else if (left > maxDragDomLeft) { |
||||
|
left = maxDragDomLeft |
||||
|
} |
||||
|
if (top < minDragDomTop) { |
||||
|
top = minDragDomTop |
||||
|
} else if (top > maxDragDomTop) { |
||||
|
top = maxDragDomTop |
||||
|
} |
||||
|
|
||||
|
// 移动当前元素
|
||||
|
dragDom.style.cssText += `;left:${left + initLeft + translateX}px;top:${top + initTop + translateY}px;` |
||||
|
// emit onDrag event
|
||||
|
vnode.child.$emit('dragDialog') |
||||
|
} |
||||
|
|
||||
|
document.onmouseup = function() { |
||||
|
document.onmousemove = null |
||||
|
document.onmouseup = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,12 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import drag from './drag' |
||||
|
|
||||
|
const install = function(Vue) { |
||||
|
Vue.directive('el-drag-dialog', drag) |
||||
|
} |
||||
|
if (window.Vue) { |
||||
|
window['el-drag-dialog'] = drag |
||||
|
Vue.use(install) |
||||
|
} |
||||
|
drag.install = install |
||||
|
export default drag |
Write
Preview
Loading…
Cancel
Save
Reference in new issue