会议OA之会议排座&送审

小朱爱编程

已于 2022-07-26 10:51:34 修改

阅读量205

点赞数

文章标签： html javascript css

于 2022-07-26 10:51:32 首次发布

本文链接：https://blog.csdn.net/m0_67477525/article/details/125981113

版权

最近这段时间一直都在与大家分享会议OA项目，今天继续分享关于会议OA项目的一个亮点功能，会议排座。以及一个送审功能。

一、会议排座

二、送审

最近这段时间一直都在与大家分享会议OA项目，今天继续分享关于会议OA项目的一个亮点功能，会议排座。以及一个送审功能。

一、会议排座

1、会议排座插件

为了实现会议排座功能，我们需要再网上寻找一个会议排座的插件。可以上百度搜索

在网上找到的一个插件，但是发现了以下两个问题：

①、发现元素重叠，无法判定有几个人参会 ②、元素块太小看不清

所以我们不能直接使用素材，需要改造以适用于我们的项目

改造后：

源代码：


<html>

	<head>

		<title>会议座位安排</title>

		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.tips {
				/* position: absolute; */
				background: #eee;
				display: inline-block;
				height: 60px;
				width: 60px;
				line-height: 60px;
				text-align: center;
				margin: 5px;
			}

			.add {
				position: fixed;
				right: 0;
				top: 0
			}

			#tu {
				width: 564px;
				height: 330px;
				background: lightblue
					/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
			}
		</style>
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
	</head>

	<body>


		<div id="tu"></div>
		<!-- <div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">
			<img src="/images/skinslogo.gif"><br>图片可以拖动</div>
		<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');">座位1
		</div>
		<div class="tips" id="tips3" onmouseover="dragF.drag('tips3');">座位2
		</div> -->

		<div class="add">
			<input id="dan_input" type="text" value="">
			<button onclick="return addDanMu()">添加座位</button>
			<input id="jie_input" type="button" value='下载'>
		</div>



	</body>

	<script type="text/javascript">
		var $id = function(id) {
			return document.getElementById(id);
		}

		var dragF = {
			locked: false,
			lastObj: undefined,
			drag: function(obj) {
				$id(obj).onmousedown = function(e) {
					var e = e ? e : window.event;
					if (!window.event) {
						e.preventDefault();
					} /* 阻止标注<a href='/site/js-5791-1.html' target='_blank'><u>浏览器</u></a>下拖动a,img的默认事件 */
					dragF.locked = true;
					$id(obj).style.position = "absolute";
					$id(obj).style.zIndex = "100";
					if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* 多元素拖动需要恢复上次元素状态 */
						dragF.lastObj.style.zIndex = "1";
					}

					dragF.lastObj = $id(obj);
					var tempX = $id(obj).offsetLeft;
					var tempY = $id(obj).offsetTop;

					dragF.x = e.clientX;
					dragF.y = e.clientY;
					document.onmousemove = function(e) {
						var e = e ? e : window.event;
						if (dragF.locked == false) return false;
						$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
						$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
						if (window.event) {
							e.returnValue &