我有一个带有许多聊天 DIV 的窗口,用户可以在其中与不同的人聊天。
目前,聊天 DIV 可以打开并四处移动,但我看不到将当前选择的 DIV 设置在前面。例如:当您将鼠标放在 DIV 上时,它会进入前台。
HTML:
<div id="1000000001" class="chatMessenger">
<div class="chatMessengerContainer">
</div>
</div>
CSS:
div.chatMessenger {
position: absolute;
top: 50px;
left: 50px;
width: 250px;
height: 300px;
background-color: white;
z-index: 100;
border: 1px solid black;
}
查询:
// JQUERY UI Draggable - Initialize
$('div#'+memberID).draggable({
containment: $('div#chatWrapper')
});
// JQUERY UI Draggable - Setting the Stack
$(document).on('mousedown','div.chatMessenger', function() {
alert('chat mouse down...');
//var stack = $( ".selector" ).draggable( "option", "stack" );
$(this).draggable( "option", "stack", ".products" );
});
警报在 mousedown 中触发,因此这是找到正确的元素。
我查看了 Draggable z-index 和 stack 但我无法让任何一个工作。
会有多个聊天DIV同时打开给选中的需要坐在前面的。
谢谢你。