0

假设我在一个固定的父 div 中有两个浮动 div。
使用可拖动的 JQuery使 div 浮动。当我从 DOM 中删除第一个 DIV 时，它下面的第二个 DIV
似乎由于某种原因爬上了页面。

我创建了一个jsfiddle。http://jsfiddle.net/k6yxu/1/

在此示例中，当您关闭框 1 时，框 2 向上移动。这发生在 Chrome、Firefox 和 IE 9 中。

我想将所有这些框 (DIV) 保留在同一个地方，即使它的任何同级已从 DOM 中删除。

<style>
html, body, #container {
    height: 100%;
}
body {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#container {
    position: relative;
}
#header, #footer {
    height: 40px;
    line-height: 40px;
    background: #999;
    width: 100%;
    position: absolute;
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}
/* This is the parent of inner-content div */
 #content {
    position: absolute;
    top: 40px;
    bottom: 40px;
    width: 100%;
    overflow: visible;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
}
/* This is the direct parent of all boxes */
 #inner-content {
    overflow: inherit;
    height: 100%;
}
.box {
    border: 4px solid #999;
    height: 120px;
    width: 120px;
}
.boxHeader {
    height: 32px;
    vertical-align: middle;
}
.boxCloseButton {
    padding-top: 3px;
    padding-right: 6px;
    padding-bottom: 3px;
    padding-left: 6px;
    margin-right: 4px;
    margin-top: 6px;
    float: right;
    font-size: 13px;
    line-height: 13px;
    cursor: pointer
}
</style>
<div id="container">
    <div id="header">
        <div id="headerContent"></div>
    </div>
    <div id="content">
        <div id="inner-content">
            <div id="id0" class="box">
                <div class="boxHeader">
                    <div class="boxHeaderContent">1 <span><a class="boxCloseButton">x</a></span>

                    </div>
                </div>
            </div>
            <div id="id1" class="box">
                <div class="boxHeader">
                    <div class="boxHeaderContent">2 <span><a class="boxCloseButton">x</a></span>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
<script>
$(function() {
    $(".box").each(function () {
        $(this).draggable({
            containment: "#inner-content",
            scroll: true
        });
    });

    $(document).on("click", "a.boxCloseButton", function () {
        // Close button is clicked
        // get the parent div box
        var box = $(this).parents('div.box');
        // remove box from DOM. 
        // BUG: Removing a node from the DOM causes all its younger siblings to be re-positioned.
        // The re-positioning is random and causes un-expected behaviour.
        box.remove();
    });
}
</script>
4

2 回答 2

0

当我从 DOM 中删除第一个 DIV 时，它下面的第二个 DIV 似乎由于某种原因爬上了页面。

这不就是float的定义吗？

于 2013-04-20T23:03:14.570 回答
0

尝试使框绝对定位：http: //jsfiddle.net/k6yxu/2/

.box {
    position: absolute;
    border: 4px solid #999;
    height: 120px;
    width: 120px;
}
#id1 {
    top:124px;
}

如果你想避免top定位，你需要将每个盒子包装在一个position: relative容器中，并且只移除.box，离开容器。该容器还需要设置适当的高度。

编辑：这是上述调整的小提琴：http: //jsfiddle.net/k6yxu/3/

于 2013-04-20T23:11:59.650 回答