用vue指令，element dialog顶部拖拽，并且不能拖离页面

可以使用vue-draggable-resizable插件来实现element dialog顶部拖拽的效果，并且限制其不能拖离页面。此插件支持拖拽、缩放、限制边界等功能，使用非常方便。

首先，安装vue-draggable-resizable插件：

npm install vue-draggable-resizable

然后，在需要使用拖拽效果的组件中引入该插件并注册：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <div class="dialog-header" v-draggable>
      <span>Dialog Title</span>
    </div>
    <div class="dialog-body">
      Dialog Content
    </div>
  </el-dialog>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  },
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

在上述代码中，我们为dialog的顶部header添加了一个类名为`dialog-header`的div，并且在该div上使用了`v-draggable`指令，使其具有了拖拽的能力。

需要注意的是，为了限制dialog不能拖离页面，我们需要在该指令的定义中添加一些限制逻辑。具体来说，我们需要在`v-draggable`指令中传入一个配置对象，如下：

<div class="dialog-header" v-draggable="{
  containment: '.el-dialog__wrapper',
  axis: 'y'
}">

上述代码中，`containment`属性指定了限制拖拽区域的父级元素选择器，这里选择了`.el-dialog__wrapper`，表示dialog不能拖离该元素所在的区域。

`axis`属性指定了拖拽的方向，这里选择了`y`，表示只能在垂直方向上拖拽。

这样，就可以实现element dialog顶部拖拽，并且限制其不能拖离页面的效果了。