Jquery Draggable +带到前面 [英] Jquery Draggable + Bring to Front

问题描述

我有一个带有多个聊天DIV的窗口，用户可以与不同的人聊天。

目前聊天DIV可以打开并移动，但我可以看不到当前选择的DIV设置在前面。

 
 code>< div id =1000000001class =chatMessenger> 
< div class =chatMessengerContainer> 
< / div> 
< / div> 
  

CSS：

 code> 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  - 初始化
 $（'div＃'+ memberID）.draggable（{
 containment：$（'div＃chatWrapper'）
}）; 
 
 
 // JQUERY UI Draggable  - 设置栈
 $（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>

这应该有助于

  $（'div.chatMessenger'）。 z-index'，'100'）; 
 $（this）.css（'z-index'，'1000'）; 
  

内部 on（'mousedown'） function 。

I have a window with a number of chat DIV's where a user to chat to different people.

Currently the chat DIV's can be open and moved around but I can't see to get the currently select DIV to set at the front. eg: when you mousedown on a DIV it comes into the foreground.

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" );
    });

The alert triggers in the mousedown so this is finding the correct element.

I have looked at Draggable z-index and stack but I was unable to get either working.

There will be many chat DIV's open at the same time to the selected one needs to sit at the front.

thankyou.

解决方案

This should help

$('div.chatMessenger').not(this).css('z-index', '100');
$(this).css('z-index', '1000');

inside on('mousedown') function.

这篇关于Jquery Draggable +带到前面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！