组件拖拽

<template>  
<div>
  <el-dialog
    v-model="dialogVisible"
    @mousedown="startDrag"
    width="30%"  
    ref="draggableDialog"  
    :style="dialogStyle"  
    title="Tips"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
 
</template>  

<script setup>  
import { ref, onMounted, onUnmounted , computed} from 'vue';  
  
    const dialogVisible = ref(true);  
    const dialogRef = ref(null);  
    const dragging = ref(false);  
    const startX = ref(0);  
    const startY = ref(0);  
    const dialogX = ref(0);  
    const dialogY = ref(0);  
  
    const updateDialogPosition = () => {  
      if (dragging.value) {  
        const x = event.clientX - startX.value;  
        const y = event.clientY - startY.value;  
  
        // 这里可以添加边界检查  
  
        dialogX.value = x;  
        dialogY.value = y;  
      }  
    };  
  
    const dialogStyle = computed(() => ({  
      position: 'fixed', // 或者 'absolute'，取决于你的布局需求  
      top: `${dialogY.value}px`,  
      left: `${dialogX.value}px`,  
    }));  
  
    const startDrag = (event) => {  
      dragging.value = true;  
      startX.value = event.clientX - dialogX.value;  
      startY.value = event.clientY - dialogY.value;  
  
      document.addEventListener('mousemove', updateDialogPosition);  
      document.addEventListener('mouseup', () => {  
        dragging.value = false;  
        document.removeEventListener('mousemove', updateDialogPosition);  
      });  
    };  
  
    onMounted(() => {  
      // 可以在这里获取对话框的初始位置，并设置到 dialogX 和 dialogY  
      // 但由于 Element Plus 的 dialog 默认是居中的，你可能需要一些额外的逻辑  
      // 来确定初始位置，或者让用户通过拖拽来定位  
    });  
  
    onUnmounted(() => {  
      // 清理事件监听器  
      document.removeEventListener('mousemove', updateDialogPosition);  
    });  
  
   
</script>  
  
<style scoped>  
  
</style>

<template>  
<div>
  <el-dialog
    v-model="dialogVisible"
    @mousedown="startDrag"
    width="30%"  
    ref="draggableDialog"  
    :style="dialogStyle"  
    title="Tips"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
 
</template>  

<script setup>  
import { ref, onMounted, onUnmounted , computed} from 'vue';  
  
    const dialogVisible = ref(true);  
    const dialogRef = ref(null);  
    const dragging = ref(false);  
    const startX = ref(0);  
    const startY = ref(0);  
    const dialogX = ref(0);  
    const dialogY = ref(0);  
  
    const updateDialogPosition = () => {  
      if (dragging.value) {  
        const x = event.clientX - startX.value;  
        const y = event.clientY - startY.value;  
  
        // 这里可以添加边界检查  
  
        dialogX.value = x;  
        dialogY.value = y;  
      }  
    };  
  
    const dialogStyle = computed(() => ({  
      position: 'fixed', // 或者 'absolute'，取决于你的布局需求  
      top: `${dialogY.value}px`,  
      left: `${dialogX.value}px`,  
    }));  
  
    const startDrag = (event) => {  
      dragging.value = true;  
      startX.value = event.clientX - dialogX.value;  
      startY.value = event.clientY - dialogY.value;  
  
      document.addEventListener('mousemove', updateDialogPosition);  
      document.addEventListener('mouseup', () => {  
        dragging.value = false;  
        document.removeEventListener('mousemove', updateDialogPosition);  
      });  
    };  
  
    onMounted(() => {  
      // 可以在这里获取对话框的初始位置，并设置到 dialogX 和 dialogY  
      // 但由于 Element Plus 的 dialog 默认是居中的，你可能需要一些额外的逻辑  
      // 来确定初始位置，或者让用户通过拖拽来定位  
    });  
  
    onUnmounted(() => {  
      // 清理事件监听器  
      document.removeEventListener('mousemove', updateDialogPosition);  
    });  
  
   
</script>  
  
<style scoped>  
  
</style>