vue el-dialog实现可拖拉

el-dialog实现拖拉，每次点击度居中显示，以下贴出代码具体实现，我是可以正常拖拉并且每次度显示在中间，效果还可以，需要的可以丢上去跑跑

组件部分：

复制代码

<el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        custom-class="draggable-dialog"
        ref="dialog"
        @open="onDialogOpen"
        @opened="onDialogOpened"
        @close="onDialogClose"
        width="646px">
      <div slot="title" class="header" @mousedown="startDrag">
        <span>公式设置</span>
      </div>
        <el-divider></el-divider>
        <div >
            这里写你的dialog业务代码
        </div>

</el-dialog>

定义变量：

函数部分：

复制代码

startDrag(event) {
      event.preventDefault();
      this.dragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;

      const dialogRef = this.$refs.dialog.$el;
      if (!dialogRef) {
        console.error('无法找到对话框引用');
        return;
      }
      console.log('获取打开后的位置dialogRef-->',dialogRef);
      console.log('获取打开后的位置dialogRef.style.left-->',dialogRef.style.left);
      console.log('获取打开后的位置dialogRef.style.top-->',dialogRef.style.left);
      // 获取当前对话框的位置
      const style = window.getComputedStyle(dialogRef);
      this.currentX = parseFloat(style.left || '0');
      this.currentY = parseFloat(style.top || '0');
      console.log('this.currentX---------->',this.currentX);
      console.log('this.currentY---------->',this.currentY);
      
      document.onmousemove = this.doDrag.bind(this);
      document.onmouseup = this.stopDrag.bind(this);
    },
    doDrag(event) {
      if (!this.dragging) return;

      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;

      // 更新当前位置
      this.currentX += deltaX;
      this.currentY += deltaY;

      // 更新起始点
      this.startX = event.clientX;
      this.startY = event.clientY;

      const dialogRef = this.$refs.dialog.$el;
      if (dialogRef) {
        dialogRef.style.left = `${this.currentX}px`;
        dialogRef.style.top = `${this.currentY}px`;

        event.preventDefault();
      }
    },
    stopDrag() {
      this.dragging = false;
      document.onmousemove = null;
      document.onmouseup = null;
    },
    onDialogOpen() {
      // 对话框即将打开时，重置位置数据
      this.currentX = 0;
      this.currentY = 0;
    },
    onDialogOpened() {
        
    },
    onDialogClose() {
    
      // 对话框关闭时，取消所有事件监听器
      document.onmousemove = null;
      document.onmouseup = null;
      const dialogRef = this.$refs.dialog.$el;
      dialogRef.style.left= 0;
      dialogRef.style.top = 0;
    },

CSS部分：

复制代码

<style scoped>

/**以下是dialog */
.draggable-dialog {
  position: fixed !important; /* �保对话框是固定定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  overflow: auto; /* �保对话框内部可以滚动 */
  /*width: 600px;  �定宽度 */
 /* height: 900px; /* �定高度 */
}
.header {
  cursor: move;
}
</style>