固定親 div 内に 2 つの浮動 div があるとします。div は、
JQuery ドラッグ可能を使用してフロートに作成されました。DOM から最初の DIV を削除すると、その下にある 2 番目の DIV
が何らかの理由でページを上っているように見えます。
私はjsfiddleを作成しました。http://jsfiddle.net/k6yxu/1/
この例では、ボックス 1 を閉じると、ボックス 2 が上に移動します。これは、Chrome、Firefox、および IE 9 で発生します。
兄弟のいずれかが DOM から削除された場合でも、これらすべてのボックス (DIV) を同じ場所に保持したいと考えています。
<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>