elementui中el-dialog添加拖动功能并且拖动位置不能超出指定元素区域

要为elementui中的el-dialog添加拖动功能，可以使用以下步骤：

1. 给el-dialog元素添加一个ref属性，例如：ref="dialog"
2. 在mounted()生命周期函数中，使用以下代码获取el-dialog的DOM元素和指定区域的DOM元素：

mounted() {
  this.dialogDom = this.$refs.dialog.$el
  this.containerDom = document.querySelector('.container')
}

其中，'.container'是指定区域元素的class名，可以根据实际情况进行修改。
3. 在el-dialog的标题栏上添加mousedown事件监听器，用于开始拖动：

<template>
  <el-dialog title="Dialog Title" :visible.sync="dialogVisible" @mousedown.native="startDrag">
    <p>Dialog Content</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogDom: null,
      containerDom: null,
      dragging: false,
      startX: 0,
      startY: 0,
      offsetLeft: 0,
      offsetTop: 0
    }
  },
  methods: {
    startDrag(e) {
      if (e.target.classList.contains('el-dialog__header')) {
        this.dragging = true
        this.startX = e.clientX
        this.startY = e.clientY
        this.offsetLeft = this.dialogDom.offsetLeft
        this.offsetTop = this.dialogDom.offsetTop
      }
    }
  }
}
</script>

其中，startDrag()方法用于开始拖动，判断是否点击了el-dialog的标题栏，如果是则设置dragging为true，并且记录下鼠标的起始位置和el-dialog的初始位置。
4. 在document上添加mousemove和mouseup事件监听器，用于拖动和停止拖动：

<template>
  <el-dialog title="Dialog Title" :visible.sync="dialogVisible" @mousedown.native="startDrag">
    <p>Dialog Content</p>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogDom: null,
      containerDom: null,
      dragging: false,
      startX: 0,
      startY: 0,
      offsetLeft: 0,
      offsetTop: 0
    }
  },
  methods: {
    startDrag(e) {
      if (e.target.classList.contains('el-dialog__header')) {
        this.dragging = true
        this.startX = e.clientX
        this.startY = e.clientY
        this.offsetLeft = this.dialogDom.offsetLeft
        this.offsetTop = this.dialogDom.offsetTop
        document.addEventListener('mousemove', this.onMouseMove)
        document.addEventListener('mouseup', this.onMouseUp)
      }
    },
    onMouseMove(e) {
      if (this.dragging) {
        let left = this.offsetLeft + e.clientX - this.startX
        let top = this.offsetTop + e.clientY - this.startY
        let containerRect = this.containerDom.getBoundingClientRect()
        let dialogRect = this.dialogDom.getBoundingClientRect()
        if (left < containerRect.left) {
          left = containerRect.left
        } else if (left + dialogRect.width > containerRect.right) {
          left = containerRect.right - dialogRect.width
        }
        if (top < containerRect.top) {
          top = containerRect.top
        } else if (top + dialogRect.height > containerRect.bottom) {
          top = containerRect.bottom - dialogRect.height
        }
        this.dialogDom.style.left = left + 'px'
        this.dialogDom.style.top = top + 'px'
      }
    },
    onMouseUp() {
      if (this.dragging) {
        this.dragging = false
        document.removeEventListener('mousemove', this.onMouseMove)
        document.removeEventListener('mouseup', this.onMouseUp)
      }
    }
  }
}
</script>

其中，onMouseMove()方法用于根据鼠标移动的距离计算出el-dialog应该移动到的位置，并且限制el-dialog不能超出指定区域。onMouseUp()方法用于停止拖动，并且移除document上的事件监听器。

这样，el-dialog就具有了拖动功能，并且拖动位置不能超出指定元素区域。