javascript - 在父级之外显示子 div，即使它们的标记在 jquery 中

Question

我有动态 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>

这是我需要的:

Answer 1

拖动效果会改变 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>