定位、弹窗

徐旺旺

2021-05-17 4423935d0249d35161efa7f2a095fbfc4b2fd017

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
/* eslint */
import Vue from 'vue'
 
const drag = Vue.directive('drag', {
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.public-bounced-title')
    dialogHeaderEl.style.cursor = 'move'
    dialogHeaderEl.onmousedown = function (e) {
      var distX = e.pageX - el.offsetLeft
      var distY = e.pageY - el.offsetTop
      if (e.preventDefault) {
        e.preventDefault()
      } else {
        e.returnValue = false
      }
      document.onmousemove = function (e) {
        let left = e.clientX - distX
        let top = e.clientY - distY
 
        if (left <= 0) {
          left = 5
        } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
          left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
        }
        if (top <= 0) {
          top = 5
        } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
          top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
        }
 
        el.style.left = left + 'px'
        el.style.top = top + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  }
})
export default drag