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