底部不起作用的亲戚

Question

我能够从顶部定位一个Div，但是当我使用bottom :20%时，我无法正常工作。我试图将position:fixed放在我使用bottom: 20%的Div的情况下，如果我在拖动时，时间div的高度会增加。

$( function() {
  $( "#draggable1,#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false });
});

#containment-wrapper {
    width: 95%;
    height: 400px;
    border: 2px solid #ccc;
    padding: 10px;
}
h3 {
    clear: left;
}
.draggable {
    width: 90px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
}
#draggable1 {
    position: relative;
    border: 2px solid black;
    top: 20%;
}
#draggable2 {
    position: relative;
    border: 2px solid black;
    bottom: 20%;
}

<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="containment-wrapper">
  <div id="draggable1" class="draggable ui-widget-content">
    <p>I'm from top 20%</p>
  </div>
 
  <div class="draggable ui-widget-content">
    <p id="draggable2" class="ui-widget-header">I'm from bottom 20%</p>
  </div>
</div>

Answer 1

希望这对您有帮助。

$( function() {
  $( "#draggable1,#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false });
});

#containment-wrapper {
    width: 95%;
    height: 400px;
    border: 2px solid #ccc;
    padding: 10px;
    position: relative;
}
h3 {
    clear: left;
}
.draggable {
    width: 90px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
}
#draggable1 {
    position: absolute;
    border: 2px solid black;
    top: 20%;
}
#draggable2 {
    position: absolute;
    border: 2px solid black;
    bottom: 20%;
}

<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="containment-wrapper">
  <div id="draggable1" class="draggable ui-widget-content">
    <p>I'm from top 20%</p>
  </div>
 
  <div id="draggable2" class="draggable ui-widget-content">
    <p>I'm from bottom 20%</p>
  </div>
</div>

Answer 2

应用 #containment-wrapper position:relative，而有孩子为 position:absolute

$( function() {
  $( "#draggable1,#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false });
});

#containment-wrapper {
  position: relative;
    width: 95%;
    height: 400px;
    border: 2px solid #ccc;
    padding: 10px;
  background-color: #ccc;
}
h3 {
    clear: left;
}
.draggable {
    width: 90px;
    height: 90px;
    padding: 0.5em;   
    margin: 0 10px 10px 0;
}
#draggable1 {
    position: absolute;
    border: 2px solid black;
    top: 20%;
}
#draggable2 {
    position: absolute;
    border: 2px solid black;   
    left: 20%;
    bottom: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="containment-wrapper">
  
  <div id="draggable1" class="draggable ui-widget-content">
    <p>I'm from top 20%</p>
  </div>
  
  <div id="draggable2" class="draggable ui-widget-content">
    <p>I'm from bottom 20%</p>
  </div>
 
  
</div>