记录--Vue3问题:如何实现组件拖拽实时预览功能?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
1. 需求分析
实现一个CMS内容管理系统,在后台进行内容编辑,在官网更新展示内容。
关于后台的编辑功能,大致分为两部分:组件拖拽预览
、组件内容编辑实时预览
。
对于组件拖拽预览,用户可以在含有各种功能组件的列表中,选择需要的组件进行拖拽。将组件拖拽到预览画布中后,可以在画布中预览组件的内容。
对于组件内容编辑实时预览,用户可以点击编辑按钮,显示对应组件的内容编辑信息。当修改组件内容时,在画布中可以实时预览组件的变化。
2. 实现步骤
2.1 关于拖拽组件库的选择
关于拖拽组件库,在github
上有很多,最热门的当属vuedraggable
这个库。
它基于Sortable.js
,拥有完整的中文文档,所以很多朋友在做拖拽功能时,都会优先考虑它。
但是,我在使用的过程中,在组件拖拽、取消组件拖拽这里,遇到了一些小问题。不知道是我操作的问题,还是库本身存在BUG,所以最终没有选用它。
于是我发现了,一个更加好用的拖拽库vue-draggable-next
。
它的出现是参考了vuedraggable
这个库,所以说很多用法很相似,但是使用起来较之更加友善。总结为一个词,自由。
下面我们的拖拽功能实现,就是利用了vue-draggable-next
这个库。
如果你对拖拽底层原理感兴趣,并且有空余时间,劳请阅至第三部分拖拽原理总结。
2.2 拖拽功能代码实例
模版和逻辑中代码都分为了三部分:组件列表
、预览画布
、内容编辑
。
布局时,样式根据需求自定义,此处只是提供了功能的基本逻辑实现。
使用时,关于拖拽组件的需求,根据文档中提供的属性和事件的描述,灵活配置完善。
vue-draggable-next
库文档地址:https://github.com/anish2690/vue-draggable-next
安装依赖:
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>
2.3 功能组件代码实例(参考)
此处提供了组件列表中,任意功能组件的编写实例,组件的具体功能根据需求自定义。特别注意,组件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>
3. 问题详解
3.1 拖拽实现的底层原理
拖拽的实现原理可以简单描述为以下几个步骤:
触发拖拽
:通过监听鼠标或触摸事件,当用户按下鼠标左键或触摸屏幕时,表示开始拖拽操作。记录拖拽信息
:在拖拽开始时,记录拖拽起始位置(鼠标或触摸点的坐标),以及需要拖拽的元素的初始位置(相对于文档的坐标)。更新拖拽元素位置
:在拖拽过程中,通过监听鼠标移动或触摸滑动事件,计算鼠标或触摸点的当前位置,并根据鼠标或触摸点的位置变化,更新拖拽元素的位置。这可以通过修改元素的 CSS 属性(如 left 和 top)或使用 CSS 变换(如 translateX 和 translateY)来实现。处理拖拽结束
:当用户释放鼠标左键或触摸结束时,表示拖拽结束。此时可以执行一些操作,如更新拖拽元素的最终位置、触发事件或回调函数等。
以下是拖拽实现的基本原理代码实例:
// 获取拖拽元素
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 提供了一组事件和回调函数,可以在拖拽过程中监听和处理各种事件。例如,您可以监听拖拽开始、拖拽结束、拖拽元素排序等事件,并执行相应的操作。支持触摸设备
:该库对触摸设备提供了良好的支持,可以在移动设备上实现流畅的拖拽交互。
本文转载于:
https://juejin.cn/post/7297093747703005235
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--Vue3问题:如何实现组件拖拽实时预览功能?的更多相关文章
- CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...
- .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- Qt之股票组件-股票检索--支持预览框、鼠标、键盘操作
目录 一.感慨一下 二.效果展示 三.搜索编辑框 1.编辑框 2.预览框 四.相关文章 原文链接:Qt之股票组件-股票检索--支持预览框.鼠标.键盘操作 一.感慨一下 之前做过一款炒股软件,个人觉着是 ...
- 解决Android界面布局添加EditText组件后界面无法预览
错误报告: Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V Exception details are ...
- mvc文件上传支持批量上传,拖拽以及预览,文件内容校验等
使用bootstrap-fileinput 使用方式: 1.nuget:Install-Package bootstrap-fileinput 2.语言本地化{下载fileinput_locale_z ...
- vue组件利用formdata图片预览以及上传《转载》
转载修改 在项目中直接新建一个单文件页,复制一下代码即可 upload组件: <template> <div class="vue-uploader" ...
- vue组件利用formdata图片预览以及上传
转载修改 在项目中直接新建一个单文件页,复制一下代码即可 upload组件: <template> <div class="vue-uploader" ...
- Android 使用Gallery组件实现图片播放预览
Gallery(画廊)扩展了LayoutParams,以此提供可以容纳当前的转换信息和先前的位置转换信息的场所. Activity package com.app.test01; import com ...
- MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- HTML5图片拖拽预览原理及实现
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
随机推荐
- Spark相关面试题
Spark Core面试篇01 一.简答题 1.Spark master使用zookeeper进行HA的,有哪些元数据保存在Zookeeper? 答:spark通过这个参数spark.deploy.z ...
- 【译】发布 .NET Aspire 预览版 2(二)
原文 | Damian Edwards 翻译 | 郑子铭 组件更新 组件包现在有单独的图标 大多数 Aspire 组件的 NuGet 包现在都具有代表性图标,以便在 NuGet 包管理器对话框中更轻松 ...
- Base64编码的优点与缺点
Base64编码是一种将二进制数据转换为可打印ASCII字符的编码方式.它被广泛应用于数据传输和存储,以提升数据的可读性.可传输性和安全性. Base64编码解码 | 一个覆盖广泛主题工具的高效在线平 ...
- 反编译工具Jadx for MAC 安装与配置
Jadx安装与配置 安装jadx brew install jadx 配置环境变量 先找到java安装位置 (base) # chen at Little-M1-Wrok in /usr/bin [1 ...
- thinkphp集成webuploader实战
介绍 最近用了下thinkphp搞自己的博客,期间用到了百度的webuploader上传图片.百度出来的参考质量一言难尽,写教程没有一点追求,千篇一律的复制粘贴,某些个作者自己都没搞清楚就发文,误人又 ...
- Java异常处理的20个最佳实践:告别系统崩溃
引言 在Java编程中,异常处理是一个至关重要的环节,它不仅涉及到程序的稳定性和安全性,还关系到用户体验和系统资源的合理利用.合理的异常处理能够使得程序在面对不可预知错误时,能够优雅地恢复或者给出明确 ...
- WSL2镜像文件压缩
WSL2的镜像文件(*.vhdx)支持自动扩容,但是一般不会自动缩容.一旦某次存放过大文件以后,即使后续删除,镜像文件体积仍然不会缩小,导致大量磁盘空间浪费.因此,可以定期对镜像文件进行手动压缩. 镜 ...
- Django3.2
Django3.2 前言 之前我们介绍过web应用程序和http协议,简单了解过web开发的概念.Web应用程序的本质 接收并解析HTTP请求,获取具体的请求信息 处理本次HTTP请求,即完成本次请求 ...
- 【LeetCode数组#4滑动窗口】长度最小的子数组+子数组最大平均数I
长度最小的子数组 力扣题目链接(opens new window) 给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组,并返回其长度.如果不存 ...
- 大众点评cat报警源码
类时序 时许说明 判断是否是报警机器. 1分钟启动一个线程根据设置的报警条件,时间段去查询CAT报告数据. 根据返回的报告数据,逐层解析TYPE,NAME,RANGE中的数据是否满足报警条件. 只有全 ...