记录–Vue3问题：如何实现组件拖拽实时预览功能？

1. 需求分析

实现一个CMS内容管理系统，在后台进行内容编辑，在官网更新展示内容。

关于后台的编辑功能，大致分为两部分：组件拖拽预览、组件内容编辑实时预览。

对于组件拖拽预览，用户可以在含有各种功能组件的列表中，选择需要的组件进行拖拽。将组件拖拽到预览画布中后，可以在画布中预览组件的内容。

对于组件内容编辑实时预览，用户可以点击编辑按钮，显示对应组件的内容编辑信息。当修改组件内容时，在画布中可以实时预览组件的变化。

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

模板代码：

<template>   <div style="display: flex;cursor: pointer;">     <!-- 组件列表 左侧 -->     <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>      <!-- 预览画布 中间 -->     <div style="width:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: center">       <h1>预览画布</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>      <!-- 内容编辑 右侧 -->     <div style="width:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: center">       <h1>内容编辑</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";  // 组件列表数据 const componentNameList = [   {     // 组件ID     componentId:0,     // 组件名     name:'关于组件',     // 组件描述     description: '关于组件',     // 组件信息     component: markRaw(About),     // 组件需要编辑内容     details: About.props.details.default   },   {     componentId:1,     name:'关于组件1',     description: '关于组件1',     component:markRaw(About),     details: About.props.details.default   }, ];   // 预览画布数据 let componentList = reactive([]);  watch(componentList, () => {   console.log(componentList, 'componentList') })    // 画布中删除的点击事件 const deleteComponent = (index) => {   componentList.splice(index, 1); };  // 内容编辑数据 let nowComponentDetail = ref({});  // 画布中编辑的点击事件 const changeComponent = (element) => {     nowComponentDetail.value = element; }; </script>

// 获取拖拽元素 const draggableElement = document.getElementById('draggable');  // 记录拖拽起始位置和拖拽元素的初始位置 let startX, startY, initialX, initialY;  // 监听鼠标按下事件 draggableElement.addEventListener('mousedown', dragStart); draggableElement.addEventListener('touchstart', dragStart);  // 监听鼠标移动事件 document.addEventListener('mousemove', drag); document.addEventListener('touchmove', drag);  // 监听鼠标释放事件 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';   } }  // 拖拽结束事件处理程序 function dragEnd() {   // 执行拖拽结束后的操作 }

3.2 关于vue-draggable-next 库的功能总结

vue-draggable-next 库特点和功能的补充说明：

• 基于 Vue 3：vue-draggable-next 是为 Vue.js 3 版本设计的拖拽库，充分利用了 Vue 3 的响应式系统和组合式 API。
• 轻量级和简单易用：该库的代码量较少，易于理解和使用。它提供了一组简单的指令和组件，可以轻松地将拖拽功能集成到 Vue.js 应用程序中。
• 支持多种拖拽模式：vue-draggable-next 支持多种拖拽模式，包括自由拖拽、列表拖拽、网格拖拽等。您可以根据需求选择适合的拖拽模式。
• 自定义拖拽样式和行为：该库允许您自定义拖拽元素的样式和行为。您可以定义拖拽时的样式、占位符元素、限制拖拽的范围等。
• 事件和回调支持：vue-draggable-next 提供了一组事件和回调函数，可以在拖拽过程中监听和处理各种事件。例如，您可以监听拖拽开始、拖拽结束、拖拽元素排序等事件，并执行相应的操作。
• 支持触摸设备：该库对触摸设备提供了良好的支持，可以在移动设备上实现流畅的拖拽交互。