金华网站制作价格,商标买卖,定制 网站,织梦如何做淘宝客网站前端功能问题系列文章#xff0c;点击上方合集↑
序言
大家好#xff0c;我是大澈#xff01;
本文约3000字#xff0c;整篇阅读大约需要5分钟。
本文主要内容分三部分#xff0c;第一部分是需求分析#xff0c;第二部分是实现步骤#xff0c;第三部分是问题详解。 …前端功能问题系列文章点击上方合集↑
序言
大家好我是大澈
本文约3000字整篇阅读大约需要5分钟。
本文主要内容分三部分第一部分是需求分析第二部分是实现步骤第三部分是问题详解。
如果您只需要解决问题请阅读第一、二部分即可。
如果您有更多时间进一步学习问题相关知识点请阅读至第三部分。
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
模板代码
templatediv styledisplay: flex;cursor: pointer;!-- 组件列表 左侧 --div stylewidth:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: centerh1组件列表/h1VueDraggableNext :listcomponentNameList :group{ name: people, pull: clone, put: false } :sortfalsediv v-forelement in componentNameList :keyelement.namediv stylepadding: 10px;background: #ccc;margin-bottom: 10pxel-button {{ element.name }}/el-button/div/div/VueDraggableNext/div!-- 预览画布 中间 --div stylewidth:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: centerh1预览画布/h1VueDraggableNext :listcomponentList grouppeople :sortfalsediv v-for(element, index) in componentList :keyelement.namedivel-button clickchangeComponent(element) sizesmall编辑/el-buttonel-button clickdeleteComponent(index) sizesmall删除/el-button/divcomponent :iselement.component :detailselement.details/component/div/VueDraggableNext/div!-- 内容编辑 右侧 --div stylewidth:30vw;padding:30px;height:300px;border: 1px solid #000;text-align: centerh1内容编辑/h1div v-for(nowDetails, index) in nowComponentDetail.details :keyindex{{ nowDetails.key }}: el-input clearable v-modelnowDetails.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
2.3 功能组件代码实例参考
此处提供了组件列表中任意功能组件的编写实例组件的具体功能根据需求自定义。
特别注意组件Props中details对象属性的结构写法要灵活应用。
模版代码
templatediv stylepadding: 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,},}}
})
/script3. 问题详解
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 3vue-draggable-next 是为 Vue.js 3 版本设计的拖拽库充分利用了 Vue 3 的响应式系统和组合式 API。 轻量级和简单易用该库的代码量较少易于理解和使用。它提供了一组简单的指令和组件可以轻松地将拖拽功能集成到 Vue.js 应用程序中。 支持多种拖拽模式vue-draggable-next 支持多种拖拽模式包括自由拖拽、列表拖拽、网格拖拽等。您可以根据需求选择适合的拖拽模式。 自定义拖拽样式和行为该库允许您自定义拖拽元素的样式和行为。您可以定义拖拽时的样式、占位符元素、限制拖拽的范围等。 事件和回调支持vue-draggable-next 提供了一组事件和回调函数可以在拖拽过程中监听和处理各种事件。例如您可以监听拖拽开始、拖拽结束、拖拽元素排序等事件并执行相应的操作。 支持触摸设备该库对触摸设备提供了良好的支持可以在移动设备上实现流畅的拖拽交互。
结语
建立这个平台的初衷 打造一个仅包含前端问题的问答平台让大家高效搜索处理同样问题。 通过不断积累问题一起练习逻辑思维并顺便学习相关的知识点。 遇到难题遇到有共鸣的问题一起讨论一起沉淀一起成长。
感谢关注微信公众号“程序员大澈”然后加入问答群让我们一起解决实现所有BUG
