当我将可拖动元素(克隆)拖放到可拖放容器中时,它们从上到下堆叠,是否有反转该方法的方法?我曾尝试向父元素添加一个相对位置,并向可拖动元素添加“位置:绝对;底部:0”,但它不能正常工作,因为它们都保持在完全相同的位置,所以它们不会堆叠在彼此的顶部。将可拖动元素堆叠到可拖放容器中(底部到顶部)
的代码和一个的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>")
}
});
http://stackoverflow.com/问题/ 18294487/jquery-ui-drag-drop-snap-to-bottom – adeneo
必须有一个更简单的方法。 – Sergi