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>
相关推荐
吃饺子不吃馅4 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端