我有一个包含多个聊天 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:
// 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 和堆栈,但我都无法正常工作。
会同时打开多个聊天DIV,选择的DIV需要坐在最前面。
谢谢。
最佳答案
这应该有帮助
$('div.chatMessenger').not(this).css('z-index', '100');
$(this).css('z-index', '1000');
在 on('mousedown')
函数中。
关于Jquery 可拖动 + 置于最前面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12665435/