當一個被刪除時重新安排框

Question

我有一堆用戶可以創建和表示消息框的div。當用戶點擊其朋友的姓名時，會創建一個框。我已經能夠做到這一點，所以當創建一個新的盒子時，它被定位在正確的距離上，但是我一直無法弄清楚如何製作盒子，所以當一個盒子被移除時，其他盒子被移動填補空白，爲新盒子騰出空間。我知道我需要使用foreach，但我不知道如何引用框。預先感謝您的幫助。

#chatbox{ 
    border:2px solid #0969A2; 
    height:250px; 
    width:200px; 
    background-color:#fff; 
position:fixed; 
z-index:11002; 
padding:3px; 
} 

    $('#open-chat').live('click', function() { 
    var user=$(this).attr('data-name'); 
    //check if bar exists 
    if ($("#bar-icon[data-name="+user+"]").length == 0){ 
     $('.dockleft-block').append('<div id="bar-icon" data-name="'+user+'">'+user+'</div>'); 
     $('body').append('<div id="chatbox" data-name="'+user+'"></div>'); 

     //position new boxes   
     $("#chatbox[data-name="+user+"]").css('bottom', '37px'); 

     var chatBoxeslength = $("div[id=chatbox]").length-1; 

     if (chatBoxeslength == 0) { 
      $("#chatbox[data-name="+user+"]").css('left', '35px'); 
     } else { 
      width = (chatBoxeslength)*(225+7)+20; 
      $("#chatbox[data-name="+user+"]").css('left', width+'px'); 
      $("#bar-icon[data-name="+user+"]").css('left', width-35+'px'); 
     } 

    } 
    //end if length 
    });          
    //end click function 


    $('.closechatbox').live('click', function() { 
    user=$(this).attr('data-name');  
    $("#chatbox[data-name="+user+"]").remove(); 
    $("#bar-icon[data-name="+user+"]").remove(); 
//need to rearrange other boxes 
    }); 

UPDATE

這是另一個聊天腳本的解決方案，但我不明白它 anantgarg.com/chat/sampleb.php 他們如何引用每箱爲#chatbox _「+成功chatboxtitle？

function restructureChatBoxes() { 
    align = 0; 
    for (x in chatBoxes) { 
     chatboxtitle = chatBoxes[x]; 

     if ($("#chatbox_"+chatboxtitle).css('display') != 'none') { 
      if (align == 0) { 
       $("#chatbox_"+chatboxtitle).css('right', '20px'); 
      } else { 
       width = (align)*(225+7)+20; 
       $("#chatbox_"+chatboxtitle).css('right', width+'px'); 
      } 
      align++; 
     } 
    } 
} 

Answer 1

爲什麼你不只是有一個聊天窗口div的數組的引用。然後在添加和刪除它們時，調整陣列。調整數組後，您應該重新放置數組中的所有元素。

東西沿着這些路線：

var chatWindows = []; 
var windowWidth = 100; 
var padding = 10; 

function newChatWindow(divElement) 
{ 
    chatWindows.push(divElement); 
    reposition(); 
} 

function reposition() 
{ 
    var el = null; 
    for (var i = 0; i < chatWindows.length; i++) 
    { 
     el = chatWindows[i]; 
     el.style.bottom = 10 
     el.style.right = windowWidth * i + padding; 
    } 
} 

function removeChatWindow(index) 
{ 
    var el = chatWindows[index]; 
    el.parentNode.removeChild(el); 
    var newArr = []; 
    for (var i = 0; i < chatWindows.length - 1; i++) 
    { 
     if (i != index) 
     { 
      newArr.push(chatWindows[i]); 
     } 
    } 
    chatWindows = newArr; 
    reposition(); 
} 

Answer 2

我不認爲我能得到的盒子是如何佈局的時候，你使它們堅實的心理畫面，但你可能並不需要重新安排他們全部，當你刪除一個。例如，如果你將每個新的div都留在某個容器中，那麼當你移除一個新的div時，其餘的都會向左移動並填充空白。這就像一堆書籍靠重力堆放在一起。巧妙地將其中一個拉出，剩下的部分突然進入空間。

據我所知，這可能不太適合該法案，但它比編程式地移動所有其餘部分並自己填補空白要簡單得多。你可以免費重新安排。