如何使Jquery draggable元素在删除时附加到droppable

Question

编辑：我希望最终的克隆元素可以拖放到droppable中的任何位置，我不希望它是可排序的。

我正在尝试将 draggable-clone 元素追加到 droppable 元素中。当可拖动元素位于可放置元素内部时，我希望它（可拖动元素）在可放置内可拖动 STRONG>。现在， draggable-clone 元素可以从其位置拖动，当它被删除时，它变得不可分割。所以请帮助我实现我的目标。感谢。

这是代码：

$(function () {

    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});

.well {
    width: 150px;
    height: 150px;
    border: 3px solid red;
}
.ii{
  float:left;
  margin-top: 20px;
  margin-right: 20px;
  border: 3px solid blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<div class="well">
    <div id="draggable">CONTENT</div>
</div>
<div id="droppable1" class="ii well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="ii well col-md-9" style="z-index:-1;"></div>

Answer 1

初始元素在文档就绪事件中创建为可拖动元素，但是在删除时创建的新元素永远不会在其上运行此代码。它需要添加到“drop”事件中：

$('#droppable1, #droppable2').droppable({
    drop: function (event, ui) {        
        $(this)
            .append(ui.helper.clone(false).css({
            position: 'relative',
            left: '0px',
            top: '0px'
        }));
        /* New stuff here: */
        $('.ui-draggable').draggable({
            helper: 'clone'
        });
    }
});