Vue3问题:如何实现组件拖拽实时预览功能?

2024年 1月 23日 35.6k 0

本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解。

如果您只需要解决问题,请阅读第一、二部分即可。

如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

1、需求分析

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

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

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

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

2、实现步骤

(1)关于拖拽组件库的选择

关于拖拽组件库,在github上有很多,最热门的当属vuedraggable这个库。

它基于Sortable.js,拥有完整的中文文档,所以很多朋友在做拖拽功能时,都会优先考虑它。

但是,我在使用的过程中,在组件拖拽、取消组件拖拽这里,遇到了一些小问题。不知道是我操作的问题,还是库本身存在BUG,所以最终没有选用它。

于是我发现了,一个更加好用的拖拽库vue-draggable-next。

它的出现是参考了vuedraggable这个库,所以说很多用法很相似,但是使用起来较之更加友善。总结为一个词,自由。

下面我们的拖拽功能实现,就是利用了vue-draggable-next这个库。

如果你对拖拽底层原理感兴趣,并且有空余时间,劳请阅至第三部分拖拽原理总结。

(2)拖拽功能代码实例

模版和逻辑中代码都分为了三部分:组件列表、预览画布、内容编辑。

布局时,样式根据需求自定义,此处只是提供了功能的基本逻辑实现。

使用时,关于拖拽组件的需求,根据文档中提供的属性和事件的描述,灵活配置完善。

vue-draggable-next库文档地址:https://github.com/anish2690/vue-draggable-next。

安装依赖:

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

模板代码:





组件列表



 {{ element.name }}







预览画布



编辑
删除








内容编辑

{{ nowDetails.key }}: 




逻辑代码:


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;
};

(3)功能组件代码实例(参考)

此处提供了组件列表中,任意功能组件的编写实例,组件的具体功能根据需求自定义。

特别注意,组件Props中details对象属性的结构写法,要灵活应用。

模版代码:



{{ props.details.content }}

逻辑代码:


import { defineProps } from "vue";

const props = defineProps({
details: {
type: Object,
default: {
content: {
key: '内容',
value: "我是About",
},
}
}
})

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() {
// 执行拖拽结束后的操作
}

(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 提供了一组事件和回调函数,可以在拖拽过程中监听和处理各种事件。例如,您可以监听拖拽开始、拖拽结束、拖拽元素排序等事件,并执行相应的操作。
  • 支持触摸设备:该库对触摸设备提供了良好的支持,可以在移动设备上实现流畅的拖拽交互。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论