下端との相対位置が正しくない

Question

上から1つのdivを配置することはできますが、使用するときはbottom :20%が機能しません。私はそのdivにposition:fixedを与えようとしましたが、bottom: 20%を使用しました。ドラッグすると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-wrapperposition: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>