[英]JQuery draggable item disappears in droppable on droppable.append(draggable)
使用JQuery可拖動/可放置控件允許我將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
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.