我有动态 div,它们有一个绝对位置,位于一个 div 中。我想首先显示父级之后的所有 div,但它们必须是父级的一部分。我使用的是可拖动和可调整大小的,所以你可以更改位置并调整 div 的大小。之后你可以保存所有和下次你将拥有保存位置的那个 div。这就是为什么我需要父级内部的 div。
这是我的代码:
$('#box').draggable();
$('#box0').draggable();
$('#box').resizable();
$('#box0').resizable();
#container {
height: 250px;
border: 5px dotted #292929;
}
#box {
float:left;
width:100px;
height:75px;
padding:15px;
margin-right:5px;
background:rgb(107, 193, 243);
}
#box0 {
float:left;
width:100px;
height:75px;
padding:15px;
margin-right:5px;
background:rgb(118, 136, 240);
cursor:move;
}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container">
<div id="box">
1. BOX
<p id="top"></p>
<p id="left"></p>
<p id="height"></p>
<p id="width"></p>
</div>
<div id="box0">
2. BOX
<p id="top"></p>
<p id="left"></p>
<p id="height"></p>
<p id="width"></p>
</div>
</div>
这是我需要的:
最佳答案
拖动效果会改变 top
和 left
的值。
要获得结果,请添加默认的 top
值。
我做了 260px
。容器高度 200,容器边界 5,空间额外 5。
希望这有帮助:)
$('#box').draggable();
$('#box0').draggable();
$('#box').resizable();
$('#box0').resizable();
#container {
height: 250px;
border: 5px dotted #292929;
}
#box {
float: left;
width: 100px;
height: 75px;
padding: 15px;
margin-right: 5px;
background: rgb(107, 193, 243);
top: 260px;
}
#box0 {
float: left;
width: 100px;
height: 75px;
padding: 15px;
margin-right: 5px;
background: rgb(118, 136, 240);
cursor: move;
top: 260px;
}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container">
<div id="box">
1. BOX
<p id="top"></p>
<p id="left"></p>
<p id="height"></p>
<p id="width"></p>
</div>
<div id="box0">
2. BOX
<p id="top"></p>
<p id="left"></p>
<p id="height"></p>
<p id="width"></p>
</div>
</div>
关于javascript - 在父级之外显示子 div,即使它们的标记在 jquery 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49776286/