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

更新

这是另一个聊天脚本的解决方案，但我不明白 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放在一个容器内，当你移除一个时，所有其余的都会向左移动并填充空白。它就像是一堆堆在重力堆中的书。将其中一个拉出来，剩下的提示就会落到空间里。

我知道这可能不太适合这个法案，但它比编程移动所有其余的并且自己填补空白要简单得多。你可以免费重新安排。

当一个被移除时重新排列盒子

2 个答案: