JQuery 可拖动项目在 droppable.append(draggable) 上的 droppable 中消失答案

【问题标题】：JQuery draggable item disappears in droppable on droppable.append(draggable)JQuery 可拖动项目在 droppable.append(draggable) 上的 droppable 中消失
【发布时间】：2015-08-05 13:25:01
【问题描述】：

使用 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;
}

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

这是我理解您想要做的工作示例。

http://jsfiddle.net/tqqLxquL/5/

被拖动的元素在放置时有一个左属性，你必须覆盖它。

    function handleDropEvent( event, ui ) {
       console.log($(ui.draggable[0]));
       var $draggable = $(ui.draggable[0]);  
       $draggable.appendTo(this);
         $draggable.css({
            left: 0
         })
    }

【讨论】：