动态添加展厅座位号，关键字：拖拽（移动）、右击生成、右击删除、修改

最新推荐文章于 2024-05-13 21:15:26 发布
最新推荐文章于 2024-05-13 21:15:26 发布
阅读量848 收藏 1
点赞数
分类专栏： 实例 文章标签： css3 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TTianYe/article/details/126264967
版权

使用说明：

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 = undefined
            var t = undefined
            ele.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.实例化vue
        new 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 = t
                        return 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 = msg
                    this.seatBox.appendChild(li);
                    // 给新增的节点添加拖拽事件
                    let dom = document.querySelectorAll(".seatNumber")
                    if (dom) {
                        dom.forEach(item => {
                            drag(item);
                        })
                    }
                }

            }
        })
    </script>
</body>

</html>
陶甜也
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用vuedraggable实现拖拽排序布局
wuxiaoqing_818的博客
07-21 2105
import draggable from “vuedraggable”; <!-- 拖拽 --> <div class="content"> <draggable v-model="shopList" @update="datadragEnd" :options="{animation:500}"> <transition-group class="clearfix"> <div
类似猫眼淘票票目前最流畅的vue选座移动端座位选座
08-10
类似猫眼,淘票票,目前最流畅的vue选座移动端,座位选座,情侣座,座位留空检测,智能选座算法,座位导航拦,座位缩略图
动态规划解展厅监控问题
01-26
利用动态规划算法求解展厅监控问题的求解实例 利用动态规划思想编写的最少摄像头覆盖程序。 * 转移过程:状态S1(当前放置摄像头的通道,已被覆盖的展览厅) -->将通道i(当前无摄像头)放置一个摄像头 --> 状态S2(当前放置摄像头的通道,已被覆盖的展览厅)。 将已计算过的状态用一个HashMap保存起来可以更效率
vue模拟搭建电影排位座
最新发布
m0_64889685的博客
05-13 281
然后可以用:class设置属性配置具体效果，可参考以下方法做出调整。将循环出来的数据加进去可获取到座位号得到以下效果。先新建一个列表然并生成数据方便后期使用。然后可以使用grid布局快速排版。如上图编写代码能得出以下效果。然后用ul搭建整体框架。然后可以得到以下效果。
【影院选座功能模板】vue实现选座功能，点击切换图片，获取座位信息
seeeeeeeeeee的博客
08-04 7251
电影院选座功能，美团选座功能，最近突然看到这个功能了，就想着研究一下如何写，然后在网上看了一些帖子，总结了一下，这里套用了一个别人的数据结构，这个感觉毕竟好用。然后写一个简单的模板放在这，以后可能会再这个基础上修改或者新增功能。......
10分钟实现简易Vue拖拽排序
qq_37021136的博客
06-07 890
10分钟实现简易Vue拖拽排序 依然是业务需要,本王需要实现一个拖拽排序功能 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录10分钟实现简易Vue拖拽排序前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：p
VUE 座位图功能+扩展
羽茉的博客
08-21 1472
1、通过循环画出页面座位图。2、画出右下角的预览图。3、编写对应js方法。
Vue中用Three.js创建一个3D会议室（三）拖动与旋转
daimaxiaoyu的博客
02-14 3175
旋转和拖动
vue3 座位选座,矩阵布局，可点击选中拖拽调换位置
u013928546的博客
07-20 3565
vue3 实现教室考场电影院选座,座位布局,九宫格布局 、矩阵布局，可点击选中拖拽调换位置
vuedraggable横向拖拽排序
weixin_44221347的博客
10-20 1400
vuedraggable横向拖拽排序。
vue-drag-resize实现拖拽，座椅摆放
Chris__wang的博客
08-29 574
vue-drag-resize实现拖拽，座椅摆放 任意拖拽
数字化展厅信息发布系统,平板移动控制播控更智能.pdf
11-19
。。。
数字化展厅信息发布系统,平板移动控制播控更智能.docx
11-19
。。。
代码 销售展厅 虚拟现实 unity3d 项目源码
05-14
代码 销售展厅 虚拟现实 unity3d 项目源码代码 销售展厅 虚拟现实 unity3d 项目源码代码 销售展厅 虚拟现实 unity3d 项目源码代码 销售展厅 虚拟现实 unity3d 项目源码代码 销售展厅 虚拟现实 unity3d 项目源码代码 ...
参考资料-移动展厅设计方案.zip
02-24
参考资料-移动展厅设计方案.zip
座位选择（JS）
qq_47997447的博客
10-15 569
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } ul{ width: 500px; height: 400px; border: 1px .
Taro+vue3 实现选座位 功能 以及座位显示
阿乐的博客
01-10 857
1.类似选座位那种功能 我的功能座位 不是html元素 而是 座位图片 都是图片。2.如果大家有需求 需要源代码 可以先私信我 源代码整理中 未来会发布开源。
OA会议管理系统之我的会议（会议排座&可拖拽座位&附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-25 7128
书接上文，在上一篇中我们完成了会议发布，但是发布就是要召开会议吗？不见得，如果选择的会议场地已经被占用或是会议人员因为某种事情而缺席等等原因应该怎么办？这时候就到了我的会议功能的重要性了，通过发布会议的会议信息会在这里显示，等待发布人员排座和提交上级领导审核通过后，方可正式召开会议。会议排座是指根据参会人员的需求和规定，将会议场地中的座位进行布局和分配，以确保会议的顺利进行和参会人员的舒适体验。
使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)
小罗伯特
10-26 3293
最近有个项目需要实现和windows桌面类似的图标拖拽功能，找了很多组件都没找到一个合适的，但通过本博主的不懈努力最后发现了两款不错的插件： sortablejs vue-grid-layout 本来一开始我使用的是第一个，但是可能是有点转不过来，最终放弃了第一个插件，但是第二个也确实香，虽然也有不少bug但是也不是不能解决的，下面就回到正题上来给大家粗略说一下： 先上代码吧，怕大家等不及往下拉： <template> <div> <grid-layout :
site:download.csdn.net threejs 3d展厅
07-15
### 回答1： three.js是一种基于WebGL技术的开源JavaScript库，用于创建和展示3D场景。通过在网站的HTML文档中引入该库，可以很方便地在浏览器中创建和显示3D展厅。 首先，我们需要在浏览器中下载并引入three.js库。具体操作可以通过CSDN网站的下载页面进行，搜索关键词“three.js”，找到适合当前项目的版本并进行下载。 下载完成后，将下载的文件解压，并把相关的JavaScript文件复制到项目目录中的合适位置。然后，在项目的HTML文档中引入这些文件，以便在浏览器中使用three.js库。 接下来，我们需要编写JavaScript代码来创建和展示3D展厅。具体的操作可以参考CSDN网站的相关教程和示例代码，搜索关键词“three.js 3D展厅”。在这些教程和示例代码中，你可以找到如何创建场景、相机、灯光、模型等基本元素，并进行相应的设置和调整，以实现想要展示的效果。 最后，通过在浏览器中打开项目的HTML文档，就可以在网页中看到3D展厅的效果了。可以使用鼠标、键盘等交互设备进行场景的控制和浏览，从不同角度观察场景中的模型。 总结起来，通过在项目中引入three.js库，并根据相关的教程和示例代码，我们可以很方便地创建和展示3D展厅。这样就可以给用户提供更加生动、直观的视觉体验。 ### 回答2： three.js是一个强大的JavaScript 3D库，可以帮助开发人员在网页上创建交互式和可视化的3D场景。网站download.csdn.net上可以找到许多与three.js相关的资源和文档。 首先，你可以通过搜索"three.js"或者"3D展厅"来找到download.csdn.net上的相关资源。这个网站是一个专门为开发者提供学习资源和下载文件的平台，其中包含着许多有关three.js和3D展厅开发的文章、教程和项目。 根据搜索结果，你可以找到关于three.js的安装和使用指南、常见问题、实例代码和项目示例等资源。这些资源可以帮助你了解如何在网页上使用three.js库来创建3D展厅，以及如何处理和渲染3D模型、设置光照效果、实现交互等等。 此外，你还可以找到其他开发者分享的在three.js上实现的3D展厅的例子和项目源代码。这些示例可以作为一个起点，供你参考和学习如何构建自己的3D展厅项目。下载这些项目源代码可以帮你更好地了解如何使用three.js库中的不同功能，从而加快你的开发进度。 总之，通过在download.csdn.net搜索关键词"three.js 3D展厅"，你可以找到丰富的有关使用three.js库构建3D展厅的资源和项目，这将帮助你开始你的3D展厅开发之旅。 ### 回答3： three.js是一种基于WebGL的JavaScript库，用于创建和显示3D图形的网页应用程序。通过使用three.js，开发人员可以轻松地在网页上呈现出精美的3D展厅。 在CSDN网站上，我们可以找到很多关于three.js和3D展厅的资源。通过搜索"site:download.csdn.net threejs 3d展厅"，我们可以得到一些相关的下载资源。 在CSDN的下载网页上，我们可以找到一些three.js的3D展厅示例项目，这些项目可以帮助开发人员更好地了解如何使用three.js创建3D展厅。这些示例项目通常包含了3D展厅的基本结构、材质、光照等方面的代码，并且提供了源代码和演示效果。 此外，CSDN上也有一些关于three.js和3D展厅的教程和文章，这些资源可以帮助开发人员深入学习和理解如何使用three.js创建和优化3D展厅。这些教程可能包含了一些基础的WebGL和JavaScript知识，并且提供了实例代码供开发人员学习和参考。 总之，通过CSDN下载网页上的资源和教程，开发人员可以更好地了解和学习如何使用three.js创建精美的3D展厅。这些资源可以帮助开发人员在网页上展示出令人惊叹的3D图形效果，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值