vue弹窗添加拖拽功能

标题vue中添加窗口拖拽功能

在要添加拖拽效果的div上添加ref和两个鼠标事件

 <div
    class="layer-panel"
    id="onlinePop"
    ref="onlinePopRef"
    @mousedown="mouseDownHandleelse($event)"
    @mouseup="mouseUpHandleelse($event)"
  >
  </div>

两个鼠标事件

  // @des: 鼠标按下
  private mouseDownHandleelse(event: any) {
    this.moveDataelse.x = event.pageX - (this.$refs as any).onlinePopRef.offsetLeft;
    this.moveDataelse.y = event.pageY - (this.$refs as any).onlinePopRef.offsetTop;
    event.currentTarget.style.cursor = 'move';
    window.onmousemove = this.mouseMoveHandleelse;
  }
  private mouseMoveHandleelse(event: any) {
    const moveLeft = event.pageX - this.moveDataelse.x + 'px';
    const moveTop = event.pageY - this.moveDataelse.y + 'px';
    (this.$refs as any).onlinePopRef.style.left = moveLeft;
    (this.$refs as any).onlinePopRef.style.top = moveTop;
  }
  // @des: 鼠标抬起
  private mouseUpHandleelse(event: any) {
    window.onmousemove = null;
    event.currentTarget.style.cursor = 'move';
  }