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

最新推荐文章于 2024-05-13 21:15:26 发布
最新推荐文章于 2024-05-13 21:15:26 发布
阅读量878 收藏 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 2125
import draggable from “vuedraggable”; <!-- 拖拽 --> <div class="content"> <draggable v-model="shopList" @update="datadragEnd" :options="{animation:500}"> <transition-group class="clearfix"> <div
vue3 座位选座,矩阵布局，可点击选中拖拽调换位置
u013928546的博客
07-20 3869
vue3 实现教室考场电影院选座,座位布局,九宫格布局 、矩阵布局，可点击选中拖拽调换位置
vue模拟搭建电影排位座
最新发布
m0_64889685的博客
05-13 550
然后可以用:class设置属性配置具体效果，可参考以下方法做出调整。将循环出来的数据加进去可获取到座位号得到以下效果。先新建一个列表然并生成数据方便后期使用。然后可以使用grid布局快速排版。如上图编写代码能得出以下效果。然后用ul搭建整体框架。然后可以得到以下效果。
Vue中用Three.js创建一个3D会议室（三）拖动与旋转
daimaxiaoyu的博客
02-14 3225
旋转和拖动
vuedraggable横向拖拽排序
weixin_44221347的博客
10-20 1510
vuedraggable横向拖拽排序。
vue-drag-resize实现拖拽，座椅摆放
Chris__wang的博客
08-29 610
vue-drag-resize实现拖拽，座椅摆放 任意拖拽
OA会议管理系统之我的会议（会议排座&可拖拽座位&附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-25 7609
书接上文，在上一篇中我们完成了会议发布，但是发布就是要召开会议吗？不见得，如果选择的会议场地已经被占用或是会议人员因为某种事情而缺席等等原因应该怎么办？这时候就到了我的会议功能的重要性了，通过发布会议的会议信息会在这里显示，等待发布人员排座和提交上级领导审核通过后，方可正式召开会议。会议排座是指根据参会人员的需求和规定，将会议场地中的座位进行布局和分配，以确保会议的顺利进行和参会人员的舒适体验。
使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)
小罗伯特
10-26 3414
最近有个项目需要实现和windows桌面类似的图标拖拽功能，找了很多组件都没找到一个合适的，但通过本博主的不懈努力最后发现了两款不错的插件： sortablejs vue-grid-layout 本来一开始我使用的是第一个，但是可能是有点转不过来，最终放弃了第一个插件，但是第二个也确实香，虽然也有不少bug但是也不是不能解决的，下面就回到正题上来给大家粗略说一下： 先上代码吧，怕大家等不及往下拉： <template> <div> <grid-layout :
动态规划解展厅监控问题
01-26
利用动态规划算法求解展厅监控问题的求解实例 利用动态规划思想编写的最少摄像头覆盖程序。 * 转移过程:状态S1(当前放置摄像头的通道,已被覆盖的展览厅) -->将通道i(当前无摄像头)放置一个摄像头 --> 状态S2...
【精品推荐】智慧展厅展览展示系统建设方案汇总共5份.zip
03-10
VR多媒体科技展厅建设方案--VR多媒体智慧展览馆建设方案共45页.pptx 多媒体互动展厅建设方案共90页.pptx 展厅VR虚拟现实方案、全息投影方案共20页.pptx 展厅系统集成建设方案-展厅VR虚拟现实方案-展厅全息投影方案共...
数字化展厅解决方案.ppt
12-30
数字化展厅解决方案 数字化展厅解决方案是一种综合的解决方案，旨在为客户提供极致的体验和销售服务。该解决方案包括两个部分：布展思路和解决方案。 第一部分：布展思路 布展思路是指设计和布置展厅的思路和方法...
类似猫眼淘票票目前最流畅的vue选座移动端座位选座
08-10
类似猫眼,淘票票,目前最流畅的vue选座移动端,座位选座,情侣座,座位留空检测,智能选座算法,座位导航拦,座位缩略图
数字化展厅信息发布系统,平板移动控制播控更智能.pdf
11-19
数字化展厅信息发布系统 数字化展厅信息发布系统是基于信息技术的发展和创新，旨在解决传统展厅的限制和不足，满足企事业单位和个人对展厅数字化信息系统的需求。该系统通过信息发布平台，实现对展厅内设备和内容的...
数字化展厅信息发布系统,平板移动控制播控更智能.docx
11-19
数字化展厅信息发布系统是一种高效、智能的信息展示解决方案，它利用先进的信息技术和硬件设备，如PAD平板电脑，实现对展厅内多媒体信息的便捷控制和管理。这种系统的核心在于将传统的静态展示转变为动态、交互式的...
js 动态生成电影院座位图
pig_ning的博客
07-15 611
js 动态生成电影院座位图
JS实现电影院选座位
m0_63466615的博客
11-06 8084
效果图 1.HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style/index.css"> <script type="text/javascript" src="js/
HTML5制作选座的页面,如何用HTML和JS实现选座位，想要效果如下
weixin_39957186的博客
06-15 936
满意答案真心vb302017.12.08采纳率：59%等级：9已帮助：514人HTML>PageTitlevarrow=2,col=11,size=20,gap=5;window.onload=function(){varwrap=document.createElement("div");wrap.style.margin="0auto";wrap.style.width=...
10分钟实现简易Vue拖拽排序
qq_37021136的博客
06-07 918
10分钟实现简易Vue拖拽排序 依然是业务需要,本王需要实现一个拖拽排序功能 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录10分钟实现简易Vue拖拽排序前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：p
原生js座位管理
wen_special的博客
11-11 4969
以前每次做ttms中的座位管理时，用的都是插件，突然就想自己写一个原生的座位管理了。先附上一张成果图。 座位管理的界面： 座位管理的修改座位状态: 座位管理中修改座位状态之后： 界面有些丑陋，但是基本的功能还是已经实现了的。包括动态的生成座位，改变座位的状态。因为只是一个界面所以数据都是假数据。在之后连数据库后会进一步的完善。需要用到的技术：html,bootstrap,css,js;(个人
"智能工业园区展厅规划与设计:总体定位、受众定位与建设方案
智能工业园区展厅规划设计与建设方案是针对智能工业园区展厅的整体规划和设计，以及实施建设的方案。展厅建设的背景是随着智能科技的发展，智能工业园区展厅成为了促进产业发展、推动科技创新的重要载体。展厅建设的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值