npm install vue-draggable-next
//or
yarn add vue-draggable-next

<template>
  <div style="display: flex;cursor: pointer;">
    <!-- 組件列表 左側(cè) -->
    <div style="width:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: center">
      <h1>組件列表</h1>
      <VueDraggableNext :list="componentNameList" :group="{ name: 'people', pull: 'clone', put: false }" :sort="false">
        <div v-for="element in componentNameList" :key="element.name">
          <div style="padding: 10px;background: #ccc;margin-bottom: 10px">
            <el-button> {{ element.name }}</el-button>
          </div>
        </div>
      </VueDraggableNext>
    </div>
    <!-- 預(yù)覽畫布 中間 -->
    <div style="width:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: center">
      <h1>預(yù)覽畫布</h1>
      <VueDraggableNext :list="componentList" group="people" :sort="false">
        <div v-for="(element, index) in componentList" :key="element.name">
          <div>
            <el-button @click="changeComponent(element)" size="small">編輯</el-button>
            <el-button @click="deleteComponent(index)" size="small">刪除</el-button>
          </div>
          <component :is="element.component" :details="element.details"></component>
        </div>
      </VueDraggableNext>
    </div>
    <!-- 內(nèi)容編輯 右側(cè) -->
    <div style="width:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: center">
      <h1>內(nèi)容編輯</h1>
      <div v-for="(nowDetails, index) in nowComponentDetail.details" :key="index">
        {{ nowDetails.key }}: <el-input clearable v-model="nowDetails.value" />
      </div>
    </div>
  </div>
</template>

<script setup>
import {markRaw, reactive, ref, watch, nextTick} from "vue";
// 引入需要拖拽的組件
import About from "@/views/AboutView.vue"
// 引入拖拽庫
import { VueDraggableNext } from "vue-draggable-next";
// 組件列表數(shù)據(jù)
const componentNameList = [
  {
    // 組件ID
    componentId:0,
    // 組件名
    name:'關(guān)于組件',
    // 組件描述
    description: '關(guān)于組件',
    // 組件信息
    component: markRaw(About),
    // 組件需要編輯內(nèi)容
    details: About.props.details.default
  },
  {
    componentId:1,
    name:'關(guān)于組件1',
    description: '關(guān)于組件1',
    component:markRaw(About),
    details: About.props.details.default
  },
];
// 預(yù)覽畫布數(shù)據(jù)
let componentList = reactive([]);
watch(componentList, () => {
  console.log(componentList, 'componentList')
})
// 畫布中刪除的點(diǎn)擊事件
const deleteComponent = (index) => {
  componentList.splice(index, 1);
};
// 內(nèi)容編輯數(shù)據(jù)
let nowComponentDetail = ref({});
// 畫布中編輯的點(diǎn)擊事件
const changeComponent = (element) => {
    nowComponentDetail.value = element;
};
</script>
<script setup>
import {markRaw, reactive, ref, watch, nextTick} from "vue";
// 引入需要拖拽的組件
import About from "@/views/AboutView.vue"
// 引入拖拽庫
import { VueDraggableNext } from "vue-draggable-next";
// 組件列表數(shù)據(jù)
const componentNameList = [
  {
    // 組件ID
    componentId:0,
    // 組件名
    name:'關(guān)于組件',
    // 組件描述
    description: '關(guān)于組件',
    // 組件信息
    component: markRaw(About),
    // 組件需要編輯內(nèi)容
    details: About.props.details.default
  },
  {
    componentId:1,
    name:'關(guān)于組件1',
    description: '關(guān)于組件1',
    component:markRaw(About),
    details: About.props.details.default
  },
];
// 預(yù)覽畫布數(shù)據(jù)
let componentList = reactive([]);
watch(componentList, () => {
  console.log(componentList, 'componentList')
})
// 畫布中刪除的點(diǎn)擊事件
const deleteComponent = (index) => {
  componentList.splice(index, 1);
};
// 內(nèi)容編輯數(shù)據(jù)
let nowComponentDetail = ref({});
// 畫布中編輯的點(diǎn)擊事件
const changeComponent = (element) => {
    nowComponentDetail.value = element;
};
</script>

<template>
  <div style="padding: 10px;background: pink;margin-bottom: 10px">
    {{ props.details.content }}
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
    details: {
      type: Object,
      default: {
        content: {
          key: '內(nèi)容',
          value: "我是About",
        },
    }
  }
})
</script>

// 獲取拖拽元素
const draggableElement = document.getElementById('draggable');
// 記錄拖拽起始位置和拖拽元素的初始位置
let startX, startY, initialX, initialY;
// 監(jiān)聽鼠標(biāo)按下事件
draggableElement.addEventListener('mousedown', dragStart);
draggableElement.addEventListener('touchstart', dragStart);
// 監(jiān)聽鼠標(biāo)移動(dòng)事件
document.addEventListener('mousemove', drag);
document.addEventListener('touchmove', drag);
// 監(jiān)聽鼠標(biāo)釋放事件
document.addEventListener('mouseup', dragEnd);
document.addEventListener('touchend', dragEnd);
// 拖拽開始事件處理程序
function dragStart(event) {
  event.preventDefault();
  if (event.type === 'touchstart') {
    startX = event.touches[0].clientX;
    startY = event.touches[0].clientY;
  } else {
    startX = event.clientX;
    startY = event.clientY;
  }
  initialX = draggableElement.offsetLeft;
  initialY = draggableElement.offsetTop;
}
// 拖拽事件處理程序
function drag(event) {
  event.preventDefault();
  if (event.type === 'touchmove') {
    const currentX = event.touches[0].clientX - startX;
    const currentY = event.touches[0].clientY - startY;
    draggableElement.style.left = initialX + currentX + 'px';
    draggableElement.style.top = initialY + currentY + 'px';
  } else {
    const currentX = event.clientX - startX;
    const currentY = event.clientY - startY;
    draggableElement.style.left = initialX + currentX + 'px';
    draggableElement.style.top = initialY + currentY + 'px';
  }
}
// 拖拽結(jié)束事件處理程序
function dragEnd() {
  // 執(zhí)行拖拽結(jié)束后的操作
}