流畅交互体验：实现Vue中el-dialog拖动效果的完美指南_eldialog拖拽功能

        在使用elementUI中的Dialog组件时，总有无理的产品提需求，在右上角增加可点击全屏的功能、给我实现弹出框可任意拖拽的功能......这种情况下，组件就不能很好的使用了，那么，只能由我们前端攻城狮进行代码攻克了，接下来就实现其中的可拖拽功能

        话不多说我将用使用自定义指令的方式(适用于多el-dialog实现可拖拽的需求，如B端系统、ERP系统等)

        当然也有使用第三方库的方式进行实现，在这里就不做过多赘述了，推荐使用vuedraggable

        好了，回归正题，接下来看实现过程

1.  创建draggable.js文件

// draggable.js
 
export default {
  bind(el) {
    let startPosition = { x: 0, y: 0 };
    let dialogPosition = { x: 0, y: 0 };
    let dragging = false;
 
    const handleMouseDown = (e) => {
      startPosition.x = e.clientX;
      startPosition.y = e.clientY;
      dialogPosition.x = parseInt(el.style.left, 10) || 0;
      dialogPosition.y = parseInt(el.style.top, 10) || 0;
 
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
 
      dragging = true;
 
      e.stopPropagation();
      e.preventDefault();
    };
 
    const handleMouseMove = (e) => {
      if (dragging) {
        const offsetX = e.clientX - startPosition.x;
        const offsetY = e.clientY - startPosition.y;
        el.style.left = `${dialogPosition.x + offsetX}px`;
        el.style.top = `${dialogPosition.y + offsetY}px`;
      }
    };
 
    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
 
      dragging = false;
    };
 
    el.addEventListener('mousedown', handleMouseDown);
  },
};

2.  在需要拖拽功能的组件内

<template>
  <div>
    <el-dialog
      title="可拖拽对话框"
      :visible="dialogVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      v-draggable
    >
      <span>这是一个可拖拽的对话框。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
 
<script>
import draggable from './draggable.js';
 
export default {
  directives: {
    draggable,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
  },
};
</script>

 看效果：

方式总结：

        将新建的draggable.js文件正确的引入组件中，进行自定义指令的注册，也可以将指令进行全局注册，相信可谓同学都会，在这我就不写了。

        上述代码中我仅实现简单直接的拖拽方式，所以 v-draggable 指令没有传递任何参数，如果有同学想要更繁琐的拖拽实现的话可以私信、评论区讨论呦