2

重複の可能性：
Jquery Draggable + Bring to Front

ユーザーが多数のチャットウィンドウを開くことができるサイトがあります。

最新のウィンドウを一番上に保持する必要があり、次を使用しています

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

これは正常に機能しますが、1つのバグが見つかりました。6つのチャットボックスが開いている場合（「div.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

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');  

    });

});​
于 2012-10-02T01:40:09.133 に答える
0

新しく作成されたものに2つのマウスダウンコールバックを追加しているので、変数++の追加を複製していると思います。

調査できるコードをもっと提供してもらえますか？以下の私の答えを後であなたの追加のコードに更新します

.index（）を使用するのはどうですか

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

または、bindメソッドを使用して、1回だけ実行されるようにします

于 2012-10-02T01:41:00.767 に答える