当我将可拖动元素(克隆)拖动到可放置容器中时,它们从上到下堆叠,有没有办法将其反转?我已经尝试将相对位置添加到父元素,并将“position:absolute; bottom:0”添加到dragabble,但它不能正常工作,因为它们都保持在完全相同的位置,因此它们不会堆叠在一起。
代码和JSFiddle示例:
https://jsfiddle.net/f3gzrtar/
HTML:
<div class="containtment">
<div class="cube">
</div>
<div class ="makeMeDroppable">
</div>
</div> <!--containtment-->
CSS :
.containtment {
height: 600px;
width: 600px;
border: 1px solid;
}
.cube {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
display: block;
margin: 1%;
}
.cube.ui-draggable-dragging {
background: green;
}
.draggableHelper {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
display: block;
}
.makeMeDroppable {
float: right;
width: 200px;
height: 300px;
border: 1px solid #999;
position: relative;
overflow: hidden;
}
JS :
$(document).ready(function() {
$('.cube').draggable({
containment: "parent",
cursor: 'move',
helper: myHelper,
})
function myHelper() {
return '<div class="draggableHelper"></div>';
}
$('.makeMeDroppable').droppable({
drop: handleDropEvent
});
function handleDropEvent(event, ui) {
var draggable = ui.draggable;
$(".makeMeDroppable").append("<div class='cube'></div>")
}
});
答案 0 :(得分:1)
根据此answer,您可以使用display: table-cell
和vertical-align: bottom
从底部堆叠div。请注意,在放置容器上使用float: right
意味着这不会起作用。您需要一个额外的周围元素,例如this fiddle
或者,如果您不关心某些旧浏览器,则可以使用flexbox:
.makeMeDroppable {
display: flex;
float: none;
width: 200px;
height: 300px;
border: 1px solid #999;
position: relative;
overflow: hidden;
justify-content: flex-end;
flex-direction: column;
}