如何使Jquery可拖动元素在放置时附加到可放置

Question

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

我正在尝试将我的 draggable-clone 元素附加到 droppable 元素，当它被删除时。当 draggable 元素在 droppable 元素内时，我希望它（可拖动元素）在 droppable 内是 draggable强>。现在 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'
        });
    }
});