使用 JQuery draggable/droppables 允许我将 div 从一个容器拖到另一个容器并将它们作为子项插入到容器中。我可以在 HTML 中看到移动,但在屏幕上,当我将可拖动对象释放到目标中时,div 消失了。
http://jsfiddle.net/laurencefass/tqqLxquL/2/
<div id="left" class="droppable">
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
<div class="draggable">4</div>
</div>
<div id="right" class="droppable">drag blocks in here</div>
JQuery
$('.draggable').draggable();
$(init);
function init() {
$('.draggable').draggable();
$('.droppable').droppable({
drop: handleDropEvent
});
}
CSS
.draggable {
width:50px;
height:50px;
background:gray;
padding:5px;
margin:5px;
border-radius:10px;
z-index:100;
display:block;
}
.droppable {
box-sizing:border-box;
border:2px solid black;
width:50%;
float:left;
min-height:300px;
}
最佳答案
根据我的理解,这是一个工作示例。
http://jsfiddle.net/tqqLxquL/5/
被拖动的元素在放下时有一个 left 属性,你必须重写它。
function handleDropEvent( event, ui ) {
console.log($(ui.draggable[0]));
var $draggable = $(ui.draggable[0]);
$draggable.appendTo(this);
$draggable.css({
left: 0
})
}
关于javascript - JQuery 可拖动元素在 droppable.append(draggable) 上消失在 droppable 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31833863/