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>
相关推荐
好好研究3 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
paopaokaka_luck4 小时前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
伍哥的传说6 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点7 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian7 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao7 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0017 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴7 小时前
Smoothstep
前端·webgl
若梦plus8 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员8 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试