具有z-index

时间：2016-02-16 10:00:22

标签： jquery css jquery-ui

我想要创建的是容器内的3个div。允许div可以拖动和调整大小，如果这样做，没有一个div影响其他div。

到目前为止一切顺利。但是现在我希望最新点击/拖动的div始终位于顶部。所以有了一些jQuery，很容易实现这一点。但总是保持秩序似乎要困难得多。例如：

订单：DIV1 / DIV2 / DIV3 - ＆gt;点击DIV2
订购：DIV2 / DIV1 / DIV3 - ＆gt;点击DIV3
订购：DIV3 / DIV2 / DIV1 - ＆gt;点击DIV2
订购：DIV2 / DIV3 / DIV1等等

有点难以解释我的意思。但是可以在此处找到此代码的实例：http://www.icecub.nl/mychat。我也尝试过制作一个小提琴，但是我无法将这些音调缩小到足以让它成为小提琴的可行性。

无论如何，重要的代码部分是：

var curIndex;

$("#boxlist, #mainchat, #userlist").mousedown(function(){
    curIndex = $(this).css("z-index");
    $(this).css("z-index", 15);
}).bind("mouseup", function(){
    var curElement = $(this).attr("id");
    switch(curElement){
        case "boxlist":
            var userList = $("#userlist").css("z-index");
            var mainChat = $("#mainchat").css("z-index");
            if(userList > mainChat){
                $("#userlist").css("z-index", 5);
                $("#mainchat").css("z-index", 1);
            } else {
                $("#userlist").css("z-index", 1);
                $("#mainchat").css("z-index", 5);
            }
            break;
        case "mainchat":
            var boxList = $("#boxlist").css("z-index");
            var userList = $("#userlist").css("z-index");
            if(boxList > userList){
                $("#boxlist").css("z-index", 5);
                $("#userlist").css("z-index", 1);
            } else {
                $("#boxlist").css("z-index", 1);
                $("#userlist").css("z-index", 5);
            }
            break;
        case "userlist":
            var boxList = $("#boxlist").css("z-index");
            var mainChat = $("mainchat").css("z-index");
            if(boxList > mainChat){
                $("#boxlist").css("z-index", 5);
                $("#mainchat").css("z-index", 1);
            } else {
                $("#boxlist").css("z-index", 1);
                $("#mainchat").css("z-index", 5);
            }
            break;
        default:
            $("#boxlist").css("z-index", 1);
            $("#mainchat").css("z-index", 10);
            $("#userlist").css("z-index", 5);
    }
});


$(document).ready(function(){
	$("#userlist, #mainchat, #boxlist")
		.draggable({ containment: "section" })
		.resizable();

	$("#colorChanger").on("change", function(){
		$("head link#theme").attr("href", "layout/css/"+$(this).val()+".css");
	});

	$("#boxlist, #mainchat, #userlist").mousedown(function(){
		$(this).css("z-index", 15);
	}).bind("mouseup", function(){
		var curElement = $(this).attr("id");
		switch(curElement){
			case "boxlist":
				var userList = $("#userlist").css("z-index");
				var mainChat = $("#mainchat").css("z-index");
				if(userList > mainChat){
					$("#userlist").css("z-index", 5);
					$("#mainchat").css("z-index", 1);
				} else {
					$("#userlist").css("z-index", 1);
					$("#mainchat").css("z-index", 5);
				}
				break;
			case "mainchat":
				var boxList = $("#boxlist").css("z-index");
				var userList = $("#userlist").css("z-index");
				if(boxList > userList){
					$("#boxlist").css("z-index", 5);
					$("#userlist").css("z-index", 1);
				} else {
					$("#boxlist").css("z-index", 1);
					$("#userlist").css("z-index", 5);
				}
				break;
			case "userlist":
				var boxList = $("#boxlist").css("z-index");
				var mainChat = $("mainchat").css("z-index");
				if(boxList > mainChat){
					$("#boxlist").css("z-index", 5);
					$("#mainchat").css("z-index", 1);
				} else {
					$("#boxlist").css("z-index", 1);
					$("#mainchat").css("z-index", 5);
				}
				break;
			default:
				$("#boxlist").css("z-index", 1);
				$("#mainchat").css("z-index", 10);
				$("#userlist").css("z-index", 5);
		}
	});
});
* {
	font-family: Verdana;
	font-size: 13px;
}

html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

section {
	margin: 0;
	padding:0;
	height: 100vh;
}

#chat_table {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
	height: calc(100% - 73px);
}

.list_table {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
}

.title, .title_mid, .title_right {
	height: 20px;
	margin: 0;
	overflow: hidden;
}

#main_title {
	height: 20px;
}

#main_chat {
	height: 100%;
}

#main_text {
	height: 50px;
}

#userlist {
	width: 250px;
	height: 500px;
	margin-left: 10px;
	left: 770px;
	display: block;
	position: absolute;
	z-index: 5;
}

#mainchat {
	margin-left: 5px;
	left: 270px;
	width: 500px;
	height: 500px;
	display: block;
	position: absolute;
	z-index: 10;
}

#boxlist {
	float: left;
	width: 250px;
	height: 500px;
	margin-left: 10px;
	display: block;
	position: absolute;
	z-index: 1;
}

#chatLines {
	width: calc(100% - 6px);
	height: 100%;
	margin: 0px;
	margin-bottom: 5px;
	border: solid 1px #000000;
	resize: none;
}

#chatInput {
	width: calc(100% - 192px);
	height: 50px;
	margin: 0px;
	border: solid 1px #000000;
	resize: none;
	margin-left: 1px;
	margin-top: 1px;
}

#usernameInput {
	width: calc(100% - 6px);
	height: 24px;
	margin-bottom: 5px;
	border: solid 1px #000000;
}
#connectButton {
	width: 100%;
	height: 28px;
	margin-left: -1px;
	margin-bottom: 5px;
}
#usersList {
	border: solid 1px #000000;
	margin: 0px;
	padding: 0px;
	width: calc(100% - 6px);
	height: calc(100% - 110px);
	list-style-type: none;
	margin-bottom: 5px;
	display: block;
	overflow: auto;
}
#sendButton {
	width: 184px;
	height: 54px;
	float: right;
	margin-right:2px;
}
.title {
	width: 197px;
	color: white;
	text-align: center;
	background: #ffffff url("http://www.icecub.nl/images/blue/title.png") no-repeat left top;
}

.title_mid {
	background: #ffffff url("http://www.icecub.nl/images/blue/title_mid.png") repeat-x left top;
}

.title_right {
	width: 9px;
	background: #ffffff url("http://www.icecub.nl/images/blue/title_corner_right.png") no-repeat left top;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<section>
	<div id="boxlist">
		<table class="list_table">
			<tbody>
				<tr id="main_title">
					<td class="title">Opties</td>
					<td class="title_mid"></td>
					<td class="title_right"></td>
				</tr>
			</tbody>
		</table>
		<select id="colorChanger">
			<option value="blue">Blauw</option>
			<option value="green">Groen</option>
			<option value="red">Rood</option>
		</select>
	</div>
	<div id="mainchat">
		<table id="chat_table">
			<tbody>
				<tr id="main_title">
					<td class="title">Chat</td>
					<td class="title_mid"></td>
					<td class="title_right"></td>
				</tr>
				<tr id="main_chat">
					<td colspan="3">
						<textarea id='chatLines' readonly='readonly'></textarea>
					</td>
				</tr>
			</tbody>
		</table>
		<textarea id='chatInput' placeholder='bericht'></textarea>
		<input id='sendButton' type='button' value='Verstuur' onclick='cb.onClickSend()' />
	</div>
	<div id="userlist">
		<table class="list_table">
			<tbody>
				<tr id="main_title">
					<td class="title">Leden</td>
					<td class="title_mid"></td>
					<td class="title_right"></td>
				</tr>
			</tbody>
		</table>
		<input id='usernameInput' type='text' placeholder='Gebruikersnaam' /><br />
		<input id='connectButton' type='button' value='Verbinden' onclick='cb.onClickConnect()' /><br />
		<ul id='usersList'><li style='text-align:center;'>(niet verbonden)</li></ul>
	</div>
</section>

正如你所看到的，我已经尝试用一堆if语句来修复它。我知道这是一种丑陋的方式，但我暂时想不出更好的东西。不幸的是，它不起作用。当将“boxlist”和“userlist”放在“mainchat”上并点击“userlist”时，它会将“boxlist”推到“mainchat”后面，而不应该。我认为这与变量不是整数而是字符串有关，因此我无法按照我想要的方式进行比较。但不确定。

1 个答案:

答案 0 :(得分：1)

怎么样：不是关注元素排序，而是可以采用松散耦合的方式，也就是说，每次用户点击div时，你都会将它的索引递增1，这样排序应保持为你想要的：

var curIndex = 2;

$("#boxlist, #mainchat, #userlist").mousedown(function(){
    $(this).css(zIndex, ++curIndex);
});
相关问题
最新问题