vue div拖拽效果（指令）

import Vue from 'vue';

// 自定义元素实现弹框拖拽
Vue.directive('draw', {
  inserted: function (el) {
    el.setAttribute('style', 'position: fixed; z-index: 1000');
  },
  bind: function (el) {
    el.onmousedown = function (eventDown) {
      // 保持div和鼠标相对位置不变
      let len = eventDown.clientX - el.offsetLeft;
      let topLen = eventDown.clientY - el.offsetTop;
      el.onmousemove = function (event) {
        console.log(event, el.offsetLeft, el.offsetTop);
        event = event || window.event;
        let left = event.clientX - len;
        let top = event.clientY - topLen;

        left = Math.max(0, left);
        top = Math.max(0, top);
        left = Math.min(left, document.body.clientWidth - el.offsetWidth);
        top = Math.min(top, document.body.clientHeight - el.offsetHeight);
        el.style.left = left + 'px';
        el.style.top = top + 'px';

        el.onmouseup = function () {
          el.onmousemove = null;
          el.onmouseup = null;
        };
      };
    };
  },

  unbind: function (el) {
    el.onmousemove = null;
    el.onmouseup = null;
  }
});

<div v-draw></div>