Question

可能重复：
Jquery Draggable + Bring to Front

我有一个用户可以打开多个聊天窗口的网站。

我需要保持最新的窗口，我正在使用以下

        var chatZIndex = 100;   
        $(document).on('mousedown','div.chatMessenger', function() {
            $(this).css('z-index', chatZIndex++);
        });

这很好但我发现了一个错误。如果有6个聊天框打开（6个'div.chatMessenger'实例），则变量chatZIndex一次递增6。 4打开，然后增加4等等。

有没有办法使用相同的设置，但只有变量一次增加1，无论'div.chatMessenger'有多少个实例打开？

THX

这是设置它们的当前代码

var memberID = 1000000000;          // This is the Member ID - REPLACE
var chatMsgTop = 45;                        // Initial Chat Open Location Top
var chatMsgLeft = 45;                       // Initial Chat Open Location Left
var chatZIndex = 100;                       // Starting Number for Chat Messenger z-index Value

// Chat Messenger - Open a New Chat Messager IM Box
$(document).on('click','div#chatFriendsContainer table tr', function() {

    memberID++;     // This is the Member ID - REPLACE

    // Increment Initial Chat Messaging Location on Windows - Avoid Overlap
    chatMsgTop += 10;
    chatMsgLeft += 10;

    var timeStamp = Math.round((new Date()).getTime() / 1000);                                                                                                                          // Timestamp
    $('div#chatWrapper').append('<div id="'+memberID+'" class="chatMessenger" data-timestamp="'+timeStamp+'"></div>');          // Create new Chat IM Container
    $('div#chatMessengerTemplate div.chatMessengerContainer').clone().appendTo('div#'+memberID);                                                        // Clone Template
    $('div#'+memberID).css({left : chatMsgLeft+'px', top : chatMsgTop+'px'});                                                                                               // Update IM Location


    // JQUERY UI Draggable - Initialize
    $('div#'+memberID).draggable({
        containment: $('div#chatWrapper')
    });


    // JQUERY UI Draggable - Update Z-Index
    $(document).on('mousedown','div.chatMessenger', function() {
        //$('div.chatMessenger').not(this).css('z-index', '100');
        //alert('here now...');

        if($('div.chatMessenger', this)) {
            $(this).css('z-index', chatZIndex++);
        }


    });

Answer 1

我怀疑你没有正确创建新的聊天窗口。如果你有这样的代码，你的代码应该可以正常工作：http://jsfiddle.net/thetext/VT8j8/。 - 你的聊天元素都是兄弟姐妹。

但相反，我认为你有这样的事情：http://jsfiddle.net/thetext/F84Aa/。 - 您的聊天元素嵌套在前一个元素中。

Answer 2

这使用'on'功能的数据元素

var chatZIndex = 100;  
$("body").on({"mousedown":function(event){
  $(this).css('z-index',chatZIndex ).trigger("upZIndex");

},"upZIndex":function(event){
  chatZindex++;
}},"div.chatMessenger",null);

Answer 3

使用比div.chatMessenger

更高的z-index添加像active-chat这样的新类

$(document).ready(function(){

    $('div.chatMessenger').click(function(){

        // Find The Current Active Chat Window Then REmove The Class
        $('.active-chat').removeClass('active-chat');
        // Assign THe active-chat class to the clicked div
        $(this).addClass('active-chat');  

    });

});

Answer 4

我认为你正在为新创建的回调添加2个mousedown回调，因此它重复添加变量++。

您能提供更多我们可以检查的代码吗？我将在下面将您的答案更新为您的附加代码

如何使用.index（）

http://api.jquery.com/index/

或使用bind方法确保它只执行一次

Jquery + z索引增量

4 个答案: