vue自定义全局指令实现拖拽弹窗等元素

1
Vue.directive('move', {
2
  bind(el) {
3

4
      let moveElement = el.firstElementChild;
5
      el.mouseDown = (e) => {
6

7
          // X,Y为计算的偏移量，就是鼠标点击的位置相对于元素左上角圆点的距离
8
          let X = e.clientX - el.offsetLeft;
9
          let Y = e.clientY - el.offsetTop;
10
          const move = (e) => {
11
              // 0 < left && left < window.innerWidth - el.offsetWidth 保证移动过程中，元素不超出窗口
12
              let left = e.clientX - X;
13
              if (0 < left && left < window.innerWidth - el.offsetWidth) {
14
              el.style.left = left + 'px';
15
              }
16
              // console.log(left, window.innerWidth, el.offsetWidth)
17

18
              // 0 < top && top < window.innerHeight - el.offsetHeight 保证移动过程中，元素不超出窗口
19
              let top = e.clientY - Y;
20
              if (0 < top && top < window.innerHeight - el.offsetHeight) {
21
              el.style.top = top + 'px';
22
              }
23
              // console.log(top, window.innerHeight, el.offsetHeight)
24
          }
25
          document.addEventListener('mousemove', move)
26
          document.addEventListener('mouseup', () => {
27
              document.removeEventListener('mousemove', move)
28
          })
29
      }
30
      moveElement.addEventListener('mousedown', el.mouseDown);
31
  }
32
})