动态添加展厅座位号,关键字:拖拽(移动)、右击生成、右击删除、修改

本文主要是介绍动态添加展厅座位号,关键字:拖拽(移动)、右击生成、右击删除、修改,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用说明:

1、长按可拖拽移动座位

2、右击座位可删除座位和修改座位号

3、右击图纸空白处可添加座位

注意:为了避免拖拽事件与左击事件冲突,所以采用右击模式,使用的vue语法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.引入--><script src="./vue.js"></script><style>#seat_app {position: relative;width: 1000px;}.seatBox {width: 1000px;min-height: 800px;/* height: 100%; */background: transparent;top: 0;position: absolute;border: 1px solid #f00;}.seatNumber {min-width: 30px;height: 30px;line-height: 30px;background-color: #35A714;/* border: 1px solid #f00; */display: inline-block;color: #333;font-size: 20px;text-align: center;cursor: pointer;position: absolute;color: #fff;}.seatNumber span {display: inline-block;position: absolute;width: 5px;height: 2px;background-color: #fff;}.seatNumber span:nth-child(1) {top: 0;left: 0;}.seatNumber span:nth-child(2) {top: 0;right: 0;}.seatNumber span:nth-child(3) {left: 0;bottom: 0;}.seatNumber span:nth-child(4) {bottom: 0;right: 0;}#seat_menu {width: 200px;/* height: 300px; */background: rgb(64, 164, 226);display: none;position: absolute;z-index: 8;color: #fff;}#seat_menu li {width: 80%;margin: 15px 0;cursor: pointer;border-bottom: 1px solid transparent;}#seat_menu li:hover {border-color: #fff;}#seatBg {position: absolute;top: 0;width: 100%;}.seat_bindinged {width: 360px;border: 2px solid #D30000;background-color: #fff;position: absolute;top: 40px;left: -180px;font-size: 14px;display: none;}.seat_bindinged p {padding: 0;font-size: 16px;margin: 0;height: 40px;line-height: 40px;background-color: #D30000;color: #fff;text-align: center;}.seat_bindinged li {height: 30px;line-height: 30px;color: #333;}.seat_bindinged li i {float: right;}.seat_check,.seat_lock,.seat_reserve {position: absolute;display: none;color: #333;}.seatNumber:hover .seat_check,.seatNumber:hover .seat_lock,.seatNumber:hover .seat_bindinged,.seatNumber:hover .seat_reserve {/* display: block; */}#seat_del {width: 150px;display: inline-block;background-color: rgb(202, 4, 4);min-height: 40px;line-height: 40px;color: #fff;cursor: pointer;display: none;position: absolute;z-index: 8;}#seat_del span {display: inline-block;border-bottom: 1px solid transparent;height: 35px;width: 80%;text-align: center;margin-left: 10%;}#seat_del p:hover span {border-color: #fff;}</style>
</head><body><p>使用说明: </p><p> 1、长按可拖拽移动座位</p><p>2、右击座位可删除座位和修改座位号</p><p>3、右击图纸空白处可添加座位</p><p>由于拖拽事件与左击事件冲突,所以采用右击模式</p><!-- 作用域 --><div id="seat_app"><img id="seatBg" src="./bg.png" alt=""><ul class="seatBox"><li v-for="item in seatlist" class="seatNumber":style=`top:${item.y}px;left:${item.x}px;background-color:${item.color};`><span></span><span></span><span></span><span></span>{{item.num}}<!-- 鼠标经过座位的样式 1 --><div class="seat_reserve" v-if="item.status==1">可预订</div><!-- 鼠标经过座位的样式 2--><div class="seat_check" v-if="item.status==2">审核中</div><!-- 鼠标经过座位的样式 3 --><div class="seat_bindinged" v-if="item.status==3"><p>展位状态:已预订</p><ul><li>{{item.firmName}}</li><li v-for="i in item.joblist">职位:{{i.jobname}} <i>人数:{{i.people}}人</i></li></ul></div><!-- 鼠标经过座位的样式 4 --><div class="seat_lock" v-if="item.status==4">已锁定</div></li><!-- <li class="seatNumber"><span></span><span></span><span></span><span></span>1</li> --></ul><div id="seat_menu"><ol><li @click="addSeat">添加座位</li><!-- <li @click="changeIndex"></li> --></ol></div><div id="seat_del"><p @click="removeSeat"><span>1、删除座位</span> </p><p @click="changeIndex"><span>2、修改座位号</span></p></div></div><script>// 拖拽方法var drag = function (ele) {var l = undefinedvar t = undefinedele.onmousedown = function (e) {e = e || window.event;// 计算误差(鼠标按下瞬间,鼠标距离box元素的距离)var deltaX = e.clientX - ele.offsetLeft;var deltaY = e.clientY - ele.offsetTop;document.onmousemove = function (e) {e = e || window.event;// 获取鼠标的位置,减去误差,再赋值l = e.clientX - deltaX;t = e.clientY - deltaY;// 验收,在屏幕可视区内拖拽if (l < 0) l = 0;if (t < 0) t = 0;if (l > document.documentElement.clientWidth - ele.offsetWidth) l = document.documentElement.clientWidth - ele.offsetWidth;if (t > document.documentElement.clientHeight - ele.offsetHeight) t = document.documentElement.clientHeight - ele.offsetHeight;ele.style.left = l + 'px';ele.style.top = t + 'px';}// 取消默认行为return false;}ele.onmouseup = function () {// console.log("鼠标抬起事件");console.log("数据:x=" + l, "y=" + t);}// 鼠标抬起,取消移动事件document.onmouseup = function () {document.onmousemove = null;}}// 3.实例化vuenew Vue({el: '#seat_app',data: {seatlist: [{ x: 153, y: 153, num: 1, status: 1, color: "#35A714;" },{ x: 212, y: 153, num: 2, status: 2, color: "#FC9F01;" },{x: 278,y: 153,num: 3,status: 3,color: "#D30000;",firmName: "甘肃省某某某某某某111公司",joblist: [{ jobname: "自动化工程师", people: "10" },{ jobname: "PAD板绘制工程师", people: "5" },],},{ x: 338, y: 153, num: 4, status: 4, color: "#424242;" },{ x: 397, y: 153, num: 5, status: 1, color: "#35A714;" },{ x: 458, y: 153, num: 6, status: 1, color: "#35A714;" },{ x: 520, y: 153, num: 7, status: 1, color: "#35A714;" },{ x: 580, y: 153, num: 8, status: 1, color: "#35A714;" },{ x: 642, y: 153, num: 9, status: 2, color: "#FC9F01;" },{ x: 702, y: 153, num: 10, status: 3, color: "#D30000;" },{ x: 762, y: 153, num: 11, status: 4, color: "#424242;" },],seatBox: undefined,l: null,//鼠标右击的位置t: null,//鼠标右击的位置delNumDom: null,//要删除的节点},mounted() {this.$nextTick(() => {this.seatBox = document.querySelector(".seatBox")let dom = document.querySelectorAll(".seatNumber")if (dom) {dom.forEach(item => {// console.log(item.textContent, "座位号");drag(item);})}var seat_menu = document.getElementById('seat_menu');var seatDel = document.getElementById('seat_del');$this = this;// ***********************自定义鼠标右击事件*****************************this.seatBox.oncontextmenu = function (e) {e = e || window.event;var target = e.target || e.srcElement;//事件委托// 取得鼠标位置let l = e.clientX;let t = e.clientY;console.log(l,t,e);// 右击座位if (target.className == 'seatNumber') {console.log(target, seatDel, "子集");seatDel.style.display = 'block';seatDel.style.left = l + 'px';seatDel.style.top = t + 5 + 'px';$this.delNumDom = target} else {//右击座位以外的其他地方seat_menu.style.display = 'block';seat_menu.style.left = l + 'px';seat_menu.style.top = t + 'px';}$this.l = l$this.t = treturn false}document.onclick = function () {seat_menu.style.display = 'none';seatDel.style.display = 'none';}})},methods: {addSeat() {this.doingSeat()},removeSeat() {this.delNumDom.remove()},// 替换changeIndex() {this.delNumDom.remove()let num = prompt("输入座位号")this.doingSeat(num)},doingSeat(num) {let li = document.createElement("li");li.className = "seatNumber";let length = num ? num : document.querySelectorAll(".seatNumber").length + 1;//    为了能让座位添加的时候能在右击位置的中心点,所以对top和left进行适当的加减console.log(this.l,this.t,"鼠标位置");li.style.top = `${this.t - 40}px`;li.style.left = `${this.l - 25}px`;var msg = `<span></span><span></span><span></span><span></span>${length}`li.innerHTML = msgthis.seatBox.appendChild(li);// 给新增的节点添加拖拽事件let dom = document.querySelectorAll(".seatNumber")if (dom) {dom.forEach(item => {drag(item);})}}}})</script>
</body></html>

这篇关于动态添加展厅座位号,关键字:拖拽(移动)、右击生成、右击删除、修改的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/264040

相关文章

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发,所以面试百分百会问到

MySQL逻辑删除与唯一索引冲突解决方案

《MySQL逻辑删除与唯一索引冲突解决方案》本文探讨MySQL逻辑删除与唯一索引冲突问题,提出四种解决方案:复合索引+时间戳、修改唯一字段、历史表、业务层校验,推荐方案1和方案3,适用于不同场景,感兴... 目录问题背景问题复现解决方案解决方案1.复合唯一索引 + 时间戳删除字段解决方案2:删除后修改唯一字

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

一文详解Git中分支本地和远程删除的方法

《一文详解Git中分支本地和远程删除的方法》在使用Git进行版本控制的过程中,我们会创建多个分支来进行不同功能的开发,这就容易涉及到如何正确地删除本地分支和远程分支,下面我们就来看看相关的实现方法吧... 目录技术背景实现步骤删除本地分支删除远程www.chinasem.cn分支同步删除信息到其他机器示例步骤