Question

我有动态div，他们有一个绝对位置，位于div中。我希望在父母彼此相邻之后首先显示所有div，但是他们必须是parent的一部分。我使用draggable和resizable soo你可以改变位置并调整div的大小。之后你可以保存所有和下次你将拥有保存位置的div。这就是为什么我需要父母内部的div。

这是我的代码：

a.sc:18: missing argument list for method f in class Pimps
Unapplied methods are only converted to functions when a function type is expected.
You can make this conversion explicit by writing `f _` or `f(_,_)` instead of `f`.
val res_6 = ("".f _).tupled(t) // not working
                ^
Compilation Failed

._1

._2

这就是我需要的：

Answer 1

拖动效果会更改top和left值。

要获得结果，请添加默认的top值。

我做了260px。集装箱边框的容器高度为200，空间为额外的5。

希望这会有所帮助：）

＆＃13;

$('#box').draggable();
$('#box0').draggable();

$('#box').resizable();
$('#box0').resizable();

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

尝试将top属性设置为值>100%，如果有帮助，请告诉我

/*$('#box').draggable();
$('#box0').draggable();

$('#box').resizable();
$('#box0').resizable();*/

$('.inner-box').draggable();
$('.inner-box').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;
}

.inner-box{
  top: 105%;
  
  float:left;
    width:100px;
    height:75px;
    padding:15px;
    margin-right:5px;
    background: red
    
}

<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 class="inner-box" id="box">
            1. BOX
            <p id="top"></p>
            <p id="left"></p>  
            <p id="height"></p>
            <p id="width"></p>          
        </div>

        <div class="inner-box" id="box0"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        <div class="inner-box"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        <div class="inner-box"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        <div class="inner-box"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        <div class="inner-box"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        <div class="inner-box"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        <div class="inner-box"> 
            2. BOX
            <p id="top"></p>
            <p id="left"></p>
            <p id="height"></p>
            <p id="width"></p>
        </div>
        
    </div>

Answer 3

我就是这样做的。您可以将此示例扩展为您想要的任何内容

var numberOfBoxes = 5;
function draw(){
$("#container").html("");
for(let i=0; i<numberOfBoxes; i++){

 
  $("#container").append(`<div class="${(i+1) %2 === 0 ? 'box' : 'boxe'}" id="box-${i+1}">
            ${i+1}. BOX
            <p id="top"></p>
            <p id="left"></p>  
            <p id="height"></p>
            <p id="width"></p>          
        </div>`)
        
         $(`#box-${i+1}`).draggable();
          $(`#box-${i+1}`).resizable();
}
}
draw();
function addBox(){
numberOfBoxes++;
draw();
}

#container {
    
    height: 250px;
    border: 5px dotted #292929;        
    }
.box {
    float:left;
    width:100px;
    height:75px;
    padding:15px;
    margin-right:5px;
    top: 110%;
    background:rgb(107, 193, 243);
}
.btn{
  padding : 10px;
  margin : 10px;
}

.boxe {
    float:left;
    position:relative;
    width:100px;
    height:75px;
    padding:15px;
     top: 110%;
    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>
<button onclick="addBox()" class="btn">Add Box</button>
<div id="container">

 </div>

即使他们的标记在jquery中，显示子父也在父母之外

3 个答案: