本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。
如果您只需要解决问题，请阅读第一、二部分即可。
如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。
实现一个CMS内容管理系统，在后台进行内容编辑，在官网更新展示内容。
关于后台的编辑功能，大致分为两部分：组件拖拽预览、组件内容编辑实时预览。
对于组件拖拽预览，用户可以在含有各种功能组件的列表中，选择需要的组件进行拖拽。将组件拖拽到预览画布中后，可以在画布中预览组件的内容。
对于组件内容编辑实时预览，用户可以点击编辑按钮，显示对应组件的内容编辑信息。当修改组件内容时，在画布中可以实时预览组件的变化。
关于拖拽组件库，在github上有很多，最热门的当属vuedraggable这个库。
它基于Sortable.js，拥有完整的中文文档，所以很多朋友在做拖拽功能时，都会优先考虑它。
但是，我在使用的过程中，在组件拖拽、取消组件拖拽这里，遇到了一些小问题。不知道是我操作的问题，还是库本身存在BUG，所以最终没有选用它。
于是我发现了，一个更加好用的拖拽库vue-draggable-next。
它的出现是参考了vuedraggable这个库，所以说很多用法很相似，但是使用起来较之更加友善。总结为一个词，自由。
下面我们的拖拽功能实现，就是利用了vue-draggable-next这个库。
如果你对拖拽底层原理感兴趣，并且有空余时间，劳请阅至第三部分拖拽原理总结。
模版和逻辑中代码都分为了三部分：组件列表、预览画布、内容编辑。
布局时，样式根据需求自定义，此处只是提供了功能的基本逻辑实现。
使用时，关于拖拽组件的需求，根据文档中提供的属性和事件的描述，灵活配置完善。
vue-draggable-next库文档地址：https://github.com/anish2690/vue-draggable-next。
安装依赖：
npm install vue-draggable-next//oryarn 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 = [{// 组件IDcomponentId: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>此处提供了组件列表中，任意功能组件的编写实例，组件的具体功能根据需求自定义。
特别注意，组件Props中details对象属性的结构写法，要灵活应用。
模版代码：
<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: '内容',value: "我是About",},}}})</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() {// 执行拖拽结束后的操作}vue-draggable-next 库特点和功能的补充说明：
本文链接：http://www.28at.com/showinfo-26-66547-0.htmlVue3问题：如何实现组件拖拽实时预览功能？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： React和Vue的生态系统有何不同？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
