el-dialog拖拽

el-dialog组件提供了dragable属性，可以通过该属性实现拖拽功能。具体实现步骤如下：

1. 给el-dialog添加dragable属性，并设置为true。

2. 在created生命周期函数中添加mousedown和mousemove事件监听函数，用于处理鼠标按下和移动事件。

3. 在destroyed生命周期函数中移除mousedown和mousemove事件监听函数。

4. 在mousedown事件监听函数中记录鼠标按下的位置，并监听mousemove事件。

5. 在mousemove事件监听函数中计算鼠标移动的距离，并根据距离移动el-dialog的位置。

6. 在mouseup事件监听函数中移除mousemove事件监听函数。

7. 在el-dialog的header部分添加一个鼠标移动的样式，以提示用户该部分可以拖拽。

示例代码：

<template>
  <el-dialog :visible.sync="dialogVisible" :dragable="true">
    <span slot="header" class="dialog-header">Dialog Title</span>
    <p>Dialog Content</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      mouseX: 0,
      mouseY: 0,
      dialogLeft: 0,
      dialogTop: 0
    }
  },
  created() {
    document.addEventListener('mousemove', this.handleMouseMove)
    document.addEventListener('mouseup', this.handleMouseUp)
  },
  destroyed() {
    document.removeEventListener('mousemove', this.handleMouseMove)
    document.removeEventListener('mouseup', this.handleMouseUp)
  },
  methods: {
    handleMouseDown(event) {
      this.mouseX = event.clientX
      this.mouseY = event.clientY
      this.dialogLeft = parseInt(this.$el.style.left) || 0
      this.dialogTop = parseInt(this.$el.style.top) || 0
      document.addEventListener('mousemove', this.handleMouseMove)
    },
    handleMouseMove(event) {
      const deltaX = event.clientX - this.mouseX
      const deltaY = event.clientY - this.mouseY
      this.$el.style.left = `${this.dialogLeft + deltaX}px`
      this.$el.style.top = `${this.dialogTop + deltaY}px`
    },
    handleMouseUp() {
      document.removeEventListener('mousemove', this.handleMouseMove)
    }
  }
}
</script>

<style>
.dialog-header {
  cursor: move;
}
</style>