div上下左右移动

<div 
  class="PonitDetailClass" 
 ref="PonitDetailTabRef" 
 @mousedown="handleMouseDown($event)" 
 @mouseup="handleMouseUp($event)">
</div>

// data声明
moveData =  {
    x: null,
    y: null,
  };

// 按下
  handleMouseDown(event) {
    this.moveData.x = event.pageX - this.$refs.PonitDetailTabRef.offsetLeft;
    this.moveData.y = event.pageY - this.$refs.PonitDetailTabRef.offsetTop;
    event.currentTarget.style.cursor = 'move';
    window.onmousemove = this.mouseMove;
  }
  mouseMove(event) {
    const moveLeft = event.pageX - this.moveData.x + 'px';
    const moveTop = event.pageY - this.moveData.y + 'px';
    this.$refs.PonitDetailTabRef.style.left = moveLeft;
    this.$refs.PonitDetailTabRef.style.top = moveTop;
  }
  // 抬起
  handleMouseUp(event) {
    window.onmousemove = null;
    event.currentTarget.style.cursor = 'move';
  }

// 插入到body中
  setTimeout(() => {
        const divDom = document.getElementsByClassName('PonitDetailTabClass')[0];
         if (divDom) {
                   document.body.insertBefore(divDom, document.body.lastChild);
            }
        }, 10);

// 销毁
const divDom = document.getElementsByClassName('PonitDetailTabClass')[0];
document.body.removeChild(divDom);

封装自定义指令

Vue.directive('moveDiv', {
  inserted: (el) => {
    el.style.cursor = 'move';
    el.onmousedown = ((e) => {
      const moveX = e.pageX - el.offsetLeft;
      const moveY = e.pageY - el.offsetTop;
      document.onmousemove = ((Emove) => {
        const moveLeft = Emove.pageX - moveX + 'px';
        const moveTop = Emove.pageY - moveY + 'px';
        el.style.left = moveLeft;
        el.style.top = moveTop;
      });
      document.onmouseup = () => {
        document.onmousemove = null;
      };
    });
  },
});

请直接复制粘贴无需修改 亲测可直接使用