| commit | author | age | ||
| 6461f5 | 1 | import Vue from 'vue'; |
| I | 2 | |
| 3 | Vue.directive('drag-modal', (el, bindings, vnode) => { | |
| 4 | Vue.nextTick(() => { | |
| 5 | let { | |
| 6 | visible, | |
| 7 | destroyOnClose | |
| 8 | } = vnode.componentInstance | |
| 9 | // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用 | |
| 10 | if (!visible) return | |
| 11 | let modal = el.getElementsByClassName('ant-modal')[0] | |
| 12 | let header = el.getElementsByClassName('ant-modal-header')[0] | |
| 13 | let left = 0 | |
| 14 | let top = 0 | |
| 15 | ||
| 16 | // 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置 | |
| 17 | if (!destroyOnClose) { | |
| 18 | left = modal.left || 0 | |
| 19 | top = modal.top || 0 | |
| 20 | } | |
| 21 | // top 初始值为 offsetTop | |
| 22 | top = top || modal.offsetTop | |
| 23 | header.onmousedown = e => { | |
| 24 | let startX = e.clientX; | |
| 25 | let startY = e.clientY; | |
| 26 | header.left = header.offsetLeft; | |
| 27 | header.top = header.offsetTop; | |
| 28 | el.onmousemove = event => { | |
| 29 | let endX = event.clientX; | |
| 30 | let endY = event.clientY; | |
| 31 | modal.left = header.left + (endX - startX) + left; | |
| 32 | modal.top = header.top + (endY - startY) + top; | |
| 33 | modal.style.left = modal.left + 'px' | |
| 34 | modal.style.top = modal.top + 'px' | |
| 35 | } | |
| 36 | el.onmouseup = event => { | |
| 37 | left = modal.left | |
| 38 | top = modal.top | |
| 39 | el.onmousemove = null; | |
| 40 | el.onmouseup = null; | |
| 41 | header.releaseCapture && header.releaseCapture(); | |
| 42 | } | |
| 43 | header.setCapture && header.setCapture(); | |
| 44 | } | |
| 45 | }) | |
| 46 | }) | |
