elementui实现dialog拖拽

### 回答1：
要实现ElementUI的Dialog拖拽功能，可以使用Vue的指令v-draggable来实现。具体步骤如下：

1. 在Dialog组件中添加v-draggable指令，如下所示：

<el-dialog v-draggable :visible.sync="dialogVisible" title="Dialog Title">
<!-- 对话框内容 -->
</el-dialog>

2. 在Vue实例中定义v-draggable指令，如下所示：

Vue.directive('draggable', {
inserted: function (el) {
el.style.position = 'fixed'
el.style.top = 'px'
el.style.left = 'px'
el.style.cursor = 'move'
el.onmousedown = function (e) {
var disx = e.clientX - el.offsetLeft
var disy = e.clientY - el.offsetTop
document.onmousemove = function (e) {
var left = e.clientX - disx
var top = e.clientY - disy
el.style.left = left + 'px'
el.style.top = top + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
})

3. 在CSS中添加样式，使Dialog组件可以被拖拽，如下所示：

.el-dialog__header {
cursor: move;
}

.el-dialog__body {
user-select: none;
}

4. 最后，就可以拖拽Dialog组件了。

### 回答2：
ElementUI是基于Vue.js的一套组件库，拥有丰富的组件和功能，其中包括Dialog组件。Dialog组件在实际开发中经常用到，而实现Dialog拖拽功能可以提高用户体验，让用户自由地控制Dialog的位置和大小。

ElementUI提供了draggable属性以实现Dialog拖拽，具体实现步骤如下：

1. 在Dialog组件中添加draggable属性，并设置为true：

<el-dialog title="Dialog标题" :visible.sync="dialogVisible" :draggable="true">
  <!-- Dialog内容 -->
</el-dialog>

2. 导入Draggable实例，并在Dialog的mounted生命周期内实例化：

import Draggable from 'vuedraggable'
export default {
  components: { Draggable },
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
    const dialogHeader = this.$el.querySelector('.el-dialog__header')
    const dragHandler = this.$el.querySelector('.el-dialog__title')
    dialogHeader.style.cursor = 'move'
    dragHandler.style.cursor = 'move'
    Draggable.create(this.$el, {
      type: 'x,y',
      edgeResistance: 0.65,
      bounds: '.el-main',
      trigger: dragHandler,
      onDragEnd: () => {
        this.dialogVisible = true
      }
    })
  }
}

3. 代码解释：

- Draggable实例：通过import引入Draggable实例。

- Dialog生命周期：在Dialog的mounted生命周期内实例化Draggable。

- dialogHeader和dragHandler：获取Dialog的头部和Title区域，设置鼠标样式。

- Draggable.create：通过Draggable实例化元素，设置参数包括拖拽方向、边缘阻力、限制拖拽范围、触发拖拽的元素和拖拽结束回调。

4. 最后，在样式上添加以下CSS样式：

.el-dialog {
  z-index: 1003!important;
}

以上就是ElementUI实现Dialog拖拽的方法。通过在Dialog中添加draggable属性，并在mounted生命周期中实例化Draggable实现对Dialog的拖拽效果，提升用户体验，增加应用质感。同时，需合理控制拖拽范围和拖拽参数以保证用户拖拽效果的良好体验。

### 回答3：
ElementUI是一个基于Vue.js的组件库，提供了众多的UI组件和工具，其中包括了一个常用的弹出对话框（Dialog），而在使用Dialog的时候往往会遇到需要进行拖拽操作的情况，本文将介绍如何使用ElementUI实现Dialog的拖拽。

ElementUI提供了一个叫做`draggable`的指令，可以用于将一个DOM元素转化为可拖拽的元素，我们可以将该指令用于Dialog的标题栏元素上即可实现Dialog的拖拽。

具体步骤如下：

1. 首先需要给Dialog组件设置一个`ref`属性，例如`<el-dialog ref="dialog">`，该属性可以用于在Vue实例中获取到Dialog组件实例。

2. 设置Dialog的`v-if`属性为`false`，并设置`visible.sync`属性为`false`，例如`<el-dialog :visible.sync="visible" v-if="false">`，这样在Dialog初始化时就不会自动弹出，也不会占用页面空间。

3. 在Dialog的`title`插槽中添加一个自定义的组件，用于实现拖拽功能，例如：

<template slot="title">
   <div class="dialog-title" v-draggable>
       {{title}}
   </div>
</template>

其中，`v-draggable`为自定义指令，在指令中实现拖拽逻辑。

4. 在Vue实例中定义`v-draggable`指令，例如：

directives: {
   draggable: {
       inserted: function (el, binding) {
           let odiv = el; //当前元素
           odiv.onmousedown = (e) => {
               //算出鼠标相对元素的位置
               let disX = e.clientX - odiv.offsetLeft;
               let disY = e.clientY - odiv.offsetTop;
               document.onmousemove = (e) => {
                   //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                   let left = e.clientX - disX;
                   let top = e.clientY - disY;
                   //移动当前元素
                   odiv.style.left = left + 'px';
                   odiv.style.top = top + 'px';
               };
               document.onmouseup = (e) => {
                   document.onmousemove = null;
                   document.onmouseup = null;
               };
           };
       },
   },
},

5. 此时我们需要在Dialog显示出来时才能实现拖拽，因此需要通过Vue实例中的`$refs`属性获取到Dialog实例，并在Dialog的`visible`值为`true`时才能挂载自定义指令，例如：

this.$refs.dialog.$el.addEventListener('mouseenter', () => {
   this.$nextTick(() => {
       if (this.$refs.dialog.visible) {
           const header = this.$refs.dialog.$el.querySelector('.el-dialog__header');
           header.className += ' draggable';
           header.setAttribute('v-draggable', '');
           this.$forceUpdate();
       }
   });
});

6. 最后，在Dialog销毁时，需要移除对自定义指令的引用，例如：

this.$refs.dialog.$el.addEventListener('mouseleave', () => {
   this.$nextTick(() => {
       const header = this.$refs.dialog.$el.querySelector('.draggable');
       if (header) {
           header.className = header.className.replace(' draggable', '');
           header.removeAttribute('v-draggable');
           this.$forceUpdate();
       }
   });
});

通过以上步骤，就可以实现Dialog的拖拽了。当鼠标移动到Dialog的标题栏时，会在标题栏上添加一个类名`draggable`，并给该元素添加自定义指令`v-draggable`，在鼠标按下并移动时，就可以实现Dialog的拖拽。当鼠标移出标题栏时，会移除对自定义指令的引用。