elementui中el-dialog拖动不超出指定元素区域

要实现el-dialog拖动不超出指定元素区域，你可以使用el-dialog的drag事件和计算元素边界的方法。具体步骤如下：

1. 给指定元素设置position: relative或者position: absolute，这样el-dialog的position: fixed就会相对于指定元素定位。

2. 监听el-dialog的drag事件，获取当前el-dialog的left和top值以及指定元素的边界值。

3. 计算移动后的el-dialog的left和top值，判断是否超出指定元素的边界，如果超出则将其置于边界内。

示例代码如下：

<template>
  <div class="container" ref="container">
    <el-dialog
      title="Draggable Dialog"
      :visible.sync="dialogVisible"
      :drag="dragOptions"
    >
      <span>Dialog Content</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dragOptions: {
        // 记录当前el-dialog的位置
        left: 0,
        top: 0,
        // 指定元素的边界
        container: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        }
      }
    }
  },
  mounted() {
    // 获取指定元素的边界
    const container = this.$refs.container.getBoundingClientRect()
    this.dragOptions.container.left = container.left
    this.dragOptions.container.top = container.top
    this.dragOptions.container.right = container.right
    this.dragOptions.container.bottom = container.bottom
  },
  methods: {
    handleDrag(event) {
      // 计算移动后的位置
      const left = this.dragOptions.left + event.offsetX
      const top = this.dragOptions.top + event.offsetY
      // 判断是否超出边界
      if (left < this.dragOptions.container.left) {
        this.dragOptions.left = this.dragOptions.container.left
      } else if (left + event.target.offsetWidth > this.dragOptions.container.right) {
        this.dragOptions.left = this.dragOptions.container.right - event.target.offsetWidth
      } else {
        this.dragOptions.left = left
      }
      if (top < this.dragOptions.container.top) {
        this.dragOptions.top = this.dragOptions.container.top
      } else if (top + event.target.offsetHeight > this.dragOptions.container.bottom) {
        this.dragOptions.top = this.dragOptions.container.bottom - event.target.offsetHeight
      } else {
        this.dragOptions.top = top
      }
    }
  }
}
</script>

在上面的示例代码中，我们给指定元素设置了position: relative，并通过ref获取了该元素的引用。在mounted钩子函数中，我们通过getBoundingClientRect方法获取了指定元素的边界，并保存在dragOptions中。在el-dialog的drag事件中，我们计算移动后的位置，并判断是否超出指定元素的边界，如果超出则将其置于边界内。