vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)
作者：jaqqq-teng
概述
由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局，可点击选中标记是否有座无座拖拽调换位置横向纵向排列,这块的逻辑与ui网上很少有参考的价值,作者把这块逻辑实现了供大家参考
提示:使用vue3+ts实现,其逻辑原理也适用于其他技术栈代码逻辑也适用于电影选座矩阵布局等其他项目
先上效果
说明
以公司项目考场座位布局,实现新增矩阵布局需要把考场位置编号等信息通过调整位置标记座位是否有座横向纵向排列等功能最后把所有修改后的位置数据提交给服务器。
具体需求如下图:
详细
- 思考如何html布局
- 如何生成矩阵、如何给座位标记,拖拽调整位置编号,排列横向纵向,编辑座位布局时需要带入后台座位id标识等逻辑处理 实现步骤思路
1. html布局
以左上角为轴,x轴 从左到右方向为列 y轴 从上到下为行 代码如下:例:x=8,y=8
<div v-for="(row, rowX) in 8" :key="row" class="x">
<div class="y">
<div v-for="(column, columnY) in 8" :key="column" class="site-item">
{{ `${rowX}, ${columnY}` }}
</div>
</div>
</div>
通过html布局,座位有对应的(x,y)坐标,那么对应的有座无座标记只是控制div背景显示隐藏,对应的拖拽换位编辑以及代入的座位数据给服务器都是操作的数据源
2. 生成矩阵
代码生成(x,y)坐标数据源model对象数组 纵向布局
type SiteModel = {
x: number
y: number
seatNo: number //座位号 == 如果没有赋值为无座
seatId: '' | number //后台生成的id编号
status?: number //座位状态
}
const sites:Array<SiteModel> = []
for (let x = 0; x < 8; x++) {
for (let y = 0; y < 8; y++) {
sites.push({ x: x, y: y, seatNo: i + 1, seatId: '' })
}
}注:这里的数据源为8*8的纵向布局数据并且数据都有座
3. 座位标记
有座无座 因后台只接受有座位的坐标数据,因此获取到数据源后标记无座需要删除数据对应的model对象,同理点击div标记有座时需要在数据源插入应用的此div坐标的model对象
以下思路:
1. 创建数据源对象数组时设置一个Map集合将mode对象中的x,y作为键,对象设置为值 设置Map是在html布局中需要获取model对象,不设置Map也能实现,通过x,y坐标去遍历循环坐标数据源但这种方式对性能消耗很大
代码如下:
const _map: Map<string, ExamSiteType> = new Map(); //全局定义一个_map对象
生成矩阵代码...
_map.clear()
sites.value.forEach((item) => {
_map.set(`${item.x},${item.y}`, item)
})2.有了_map数据集合后,就可以在html布局中 实现div点击事件传入x,y代码’标记无座’|'标记有座’逻辑
const didSeletedItemAction = ( x: number, y: number) => {
if (!_map.value.get(`${x},${y}`)) { //添加
sites.value.push({ x: x, y: y, seatNo: 0, seatId: '' })
} else { //删除..
const item = _map.get(`${x},${y}`)
if (item)
sites.value.splice(examsits.value.indexOf(item), 1)
}
}3.拖拽调整位置编号
这里需要获取拖拽相关事件逻辑,最后只是在拖拽的div以及拖拽到的目标上调换model对象的seatNo编号
实现拖拽相关代码
定义starTarget开始拖拽的坐标{x,y}对象 以及拖拽后的目标对象dropTarget
const starTarget = ref({ x: 0, y: 0 })
const dropTarget = ref({ x: 0, y: 0 })设置html中draggable=true 绑定事件dragstart dragend drop
//html布局中
<div v-for="(row, rowX) in 8" :key="row" class="x">
<div class="y">
<div v-for="(column, columnY) in 8" :key="column" class="site-item" draggable @dragstart="dragStart($event, rowX, columnY)" @dragend="dragEnd($event, rowX, columnY)" @drop="drop($event, rowX, columnY)">
{{ `${rowX}, ${columnY}` }}
</div>
</div>
</div>
<script setup lang="ts">
function dragStart(event: MouseEvent, x: number, y: number) {
starTarget.value.x = x
starTarget.value.y = y
}
function dragEnd(event: MouseEvent, x: number, y: number) {
starTarget.value.x = 0
starTarget.value.y = 0
}
function drop(event: MouseEvent, x: number, y: number) {
if (_map.value.get(`${x},${y}`)) {
dropTarget.value.x = x
dropTarget.value.y = y
changeTarget()
}
}
const changeTarget = () => {
const site = _map.value.get(`${starTarget.value.x},${starTarget.value.y}`)
const dropSite = _map.value.get(`${dropTarget.value.x},${dropTarget.value.y}`)
if (site && dropSite) {
const temp = site.seatNo
site.seatNo = dropSite?.seatNo
dropSite.seatNo = temp
}
}
</script>排列横向纵向
切换横向纵向布局主要理解到html布局与div上的x,y坐标是不变的,变化的只是座位号码,故:只需要操作坐标对象的数组通过排序以x (0,0)(1,0),(2,0)... 以y(0,0)(0,1)(0,2)的排列给坐标对象重新设置编号即可
const x_layout = ref(false) //定义是否是横向布局ref
生成矩阵代码...
if (x_layout.value) {
sites.value.sort((a, b) => {
if (a.y !== b.y) {
return a.y - b.y;
} else {
return a.x - b.x;
}
})
} else {
sites.value.sort((a, b) => {
if (a.x !== b.x) {
return a.x - b.x;
} else {
return a.y - b.y;
}
})
}
//通过排序,重新赋值座位编号
for (let index = 0; index < sites.value.length; index++) {
const item = sites.value[index];
item.seatNo = index + 1
}编辑后台返回数据源时
这里拿到后台返回的数据源遍历循环通过_map集合的键(x,y)找到model并赋值id即可
if (props.item.examSites) { //后台服务器数据
props.item.examSites.forEach((item) => {
const site = _map.get(`${item.x},${item.y}`)
if (site) {
site.seatId = item.seatId
}
})
}最后html布局代码
通过_map集合获取(x,y)是否有值动态赋值class控制显隐即可 最近发现不少童鞋私信我源码,这里我把核心源码提供出来参考,其余核心参考上面逻辑代码即可
代码点击顶部即可下载 注:部分逻辑已删除(删除的代码参考文章上面的逻辑即可),代码可根据需求自行修改
代码使用释列
//使用3 种方式参考:
<ExamLayout :items="datas" :type="1" :map="_map"></ExamLayout>
<ExamLayout :items="datas" :type="2" :map="_map" :call-back="editExamItem"></ExamLayout>
<ExamLayout :items="datas" :type="3" :map="_map" ></ExamLayout>
-----------------------------解释用法:----------------------------------
使用 `ExamLayout`组件
type //1不能编辑 2可标记无座有座 3可拖拽座位
传入的数据源 datas 参考上面逻辑代码
type ExamSiteType = {
coordinateX: number //x坐标位置
coordinateY: number //y坐标位置
seatNo: number //座位号 == 如果没有赋值为无座
seatId: '' | number //真实的考试机器坐标位置
status?: number //座位考试状态 被举报 异常 死机等
}
// 数据源1
const datas = ref<Array<ExamSiteType>>([
])
// 初始化 数据源 如8行8列 总机考数 16台
function initExamData() {
const row: number = 4
const column = 4
const total = 16
examsits.value = []
let i = 0
for (let x = 0; x < row; x++) {
for (let y = 0; y < column; y++) {
if (i < total) {
datas.value.push({ coordinateX: x, coordinateY: y, seatNo: i + 1, seatId: '' })
i++
}
}
}
}
initExamData()到此这篇关于vue3 座位选座,矩阵布局，可点击选中拖拽调换位置的文章就介绍到这了,更多相关vue3矩阵布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！