Jquery Draggable +帶到前面

我有一個聊天DIV的窗口，其中用戶與不同的人聊天。Jquery Draggable +帶到前面

當前聊天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"); 
    });

警報在鼠標按下觸發所以這是找到正確的元素。

我看過Draggable z-index和堆棧，但我無法得到任何工作。

會有很多聊天DIV的同時打開，需要選擇坐在前面的人。

謝謝。

來源

2012-09-30 Adam

這應該有助於

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

內on('mousedown')功能。

來源

2012-09-30 21:56:30

輝煌 - 謝謝你非常多！ – Adam

不客氣！ –

感謝它工作正常 – sarath

對於要帶來一個正面和復位別人退了拖拽元素：

$('.container').on('mousedown', function(event) { 
    $('.container').css('z-index','1'); 
    $(this).css('z-index','1000'); 
});

來源

2013-03-08 19:42:22 mbokil

這很有幫助，因爲堆棧不適合我。 – denski

我想通了，最簡單的實現是在DOM移動div來的最後位置。所以如果你不需要關心dom中的位置，這是不使用z-index的最簡單的方法。我用它來定位一些便籤。

$("#chatWrapper").on('mousedown', '.chatMessenger', function() { 
    $(this).appendTo("#chatWrapper"); 
});

來源

2014-06-25 13:26:55 DaviideSnow

雖然有一個選項 - 「棧」，而現有的啓動拖拽元素這樣的 -

$('.draggable').draggable({ 
    stack: ".draggable" 
});

但它不能正常工作，所以我寫了一個小圖書館dragToFront與Z-打指數。以下是plunkr鏈接

https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/

來源

2016-08-01 10:39:01

Jquery Draggable +帶到前面

回答

相關問題