<template>
  <div class="drag-container layout-pd">
    <el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
      <el-button type="primary" @click="state.dialogVisible = true" size="default">
        <el-icon>
          <ele-Pointer />
        </el-icon>
        点击打开 Dialog
      </el-button>
    </el-card>

    <el-card shadow="hover" header="自定义div" class="mt15">
      <div class="drag-dom">
        <div class="drag-header">
          <el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
            <el-icon>
              <ele-Pointer />
            </el-icon>
            按住进行拖动测试
          </el-button>
        </div>
      </div>
    </el-card>

    <el-dialog v-model="state.dialogVisible" width="769px">
      <template #header>
        <div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
      </template>
      <p>鼠标放标题头进行 Dialog 对话框拖动</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false" size="default">取 消</el-button>
          <el-button type="primary" @click="state.dialogVisible = false" size="default">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="example/pagesDrag">
import { reactive } from 'vue'

// 定义变量内容
const state = reactive({
  dialogVisible: false,
})
</script>

<style scoped lang="scss">
.drag-container {
  .drag-dom {
    position: relative;
    display: inline-block;
    .drag-header {
      display: inline-block;
    }
  }
}
</style>
