2

可能重复：
Jquery Draggable + 放在前面

我有一个网站，用户可以在其中打开多个聊天窗口。

我需要将最新的窗口保持在顶部，并且我正在使用以下内容

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

这工作正常，但我发现了一个错误。如果打开了 6 个聊天框（“d​​iv.chatMessenger”的 6 个实例），则变量 chatZIndex 一次增加 6。4 打开，然后增加 4 等等。

有没有一种方法可以使用相同的设置，但无论打开多少个“div.chatMessenger”实例，每次只能将变量递增 1？

谢谢

这是设置它们的当前代码

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


    });
4

4 回答 4

1

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

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

于 2012-10-02T01:38:44.867 回答
0

这使用“on”功能的数据元素

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

},"upZIndex":function(event){
  chatZindex++;
}},"div.chatMessenger",null);
于 2012-10-02T01:39:09.373 回答
0

添加一个新类，如 active-chat，其 z-index 比 div.chatMessenger 高得多

​$(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');  

    });

});​
于 2012-10-02T01:40:09.133 回答
0

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

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

如何使用 .index()

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

或使用 bind 方法确保它只完成一次

于 2012-10-02T01:41:00.767 回答