具有 z-index 的可拖动、可调整大小的 div

Question

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

到目前为止一切顺利。但现在我希望最新单击/拖动的 div 始终位于顶部。所以用一点 jQuery 就很容易做到这一点。但是始终保持它们井井有条似乎要困难得多。例如：

顺序：DIV1 / DIV2 / DIV3 -> 点击 DIV2
顺序：DIV2 / DIV1 / DIV3 -> 点击 DIV3
顺序：DIV3 / DIV2 / DIV1 -> 点击 DIV2
顺序：DIV2 / DIV3 / DIV1 等

很难解释我的确切意思。但是可以在此处找到此代码的实时示例：http://www.icecub.nl/mychat。我也尝试过制作小提琴，但我无法将 div 缩小到足以使其适用于小提琴。

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

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”后面，而它不应该。我认为这与变量不是整数而是字符串有关，因此无法按照我尝试的方式进行比较。不过不确定。

Answer 1

怎么样：与其关注元素排序，不如采用松散耦合的方式，也就是说，每次用户点击一个 div 时，你都会将它的索引加一，这种排序方式应该保持为你想要的：

var curIndex = 2;

$("#boxlist, #mainchat, #userlist").mousedown(function(){
    $(this).css(zIndex, ++curIndex);
});