Vue2&Vue3-Dialog对话框进行拖动方法

1.vue2中没有属性来开启对话框拖动功能

但是vue3中是有属性直接开启拖动的：如下，官方代码例子

<template>
  <el-button type="text" @click="dialogVisible = true"
    >Click to open Dialog
  </el-button>

  <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
    <span>It's a draggable Dialog</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
</script>

上面代码中的draggable就是开启拖动的属性。

 <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>

2.Vue2中没有特定属性进行开启拖动，就只能自己写vue底层。我在网上找了很久，踩了很多坑，希望能帮到有需要的人。

(1).首先给几个代码地址，如果你是前端那些方法可以解决你的问题，如果你是前后端放一起，使用的是，vue.js文件那请看下面 (2)：

Vue中使用element-ui的el-dialog对话框，实现拖拽效果_前端世界的蒋小姐的博客-CSDN博客_elementui拖拽功能element-ui的el-dialog对话框，没有拖拽移动的效果，需要自定义指令来实现对话框拖拽。1.准备：在准备一个vue组件（点击按钮弹出对话框）// 功能：弹出一个对话框--element-ui默认dialog对话框不能拖拽<template> <div> <!-- 按钮 --> <el-button @click="dialogVisible = true">点击显示对话框</el-button&https://blog.csdn.net/weixin_51258044/article/details/121854257?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-1.pc_relevant_default&spm=1001.2101.3001.4242.2&utm_relevant_index=4 

Vue自定义指令实现element-ui dialog拖拽调整位置和窗口大小_rgmymt的博客-CSDN博客实现element-ui dialog拖拽调整位置和窗口大小前言参考代码修改拖拽调整宽高前言本文主要记录给element-ui dialog添加可拖拽位置及可拖拽宽高的功能的整个过程。参考代码大部分修改拖拽调整宽高...https://blog.csdn.net/m0_43422403/article/details/111468117

(2). 在后端写vue，就只能通过new vue的方式了。import是不行的，注意

vue.directive（"dialogdrag",{·····}） 应写在new vue的前面。

dialogdrag时自定义方法名，其中任何一个字母都必须小写！！！！！！！

为了避免其他一些影响最好加上这几个属性置如下：

<el-dialog  v-dialogdrag   :close-on-click-modal="false"   :modal="false"   class="my-dialog">

这样就可以对对话框进行拖动了！！