Javascript jQueryUI拖放：克隆未拖放

我正在玩一个小的拖放ui，我有点被拖放操作难倒了
您可以

近期目标：
我只需要了解如何将

.draggable

span放入

.dropable

div中。
假设我使用

append（）

的路径正确，我如何访问克隆的内容

最终目标：
最后，我需要添加一种方法，从drop zone div中删除项目，并将

.textfield

input/div限制为只接受一次drop（

.textarea

input/div可以接受无限数量的“有效负载”）

代码：

/* html */
<table>
    <thead>    
        <tr role="row">
            <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 494px;" aria-sort="ascending" aria-label="Company: activate to sort column descending">Company</th>
            <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 66px;" aria-label="Contact">Contact</th>
            <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 79px;" aria-label="&amp;nbsp;">&nbsp;</th>
        </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
        <tr class="odd">
            <td class="sorting_1 has_draggable_children">
                <span draggable="true" class="ui-draggable" data-companyid="0101" data-companyname="**BD">**BD</span>
            </td>
            <td><a href="#4621">Contacts</a></td>
            <td><a href="#4621">Edit</a>
                <a href="#4621">Delete</a>
            </td>
        </tr>
        <tr class="even">
            <td class="sorting_1 has_draggable_children">
                <span draggable="true" data-companyid="0202" data-companyname="0024" class="ui-draggable">0024</span>
            </td>
            <td><a href="#4438">Contacts</a></td>
            <td><a href="#4438">Edit</a>
                <a href="#4438">Delete</a>
            </td>
        </tr>
        <tr class="odd">
            <td class="sorting_1 has_draggable_children">
                <span draggable="true" class="ui-draggable" data-companyid="0303" data-companyname="Acme, Inc.">Acme Anvil Corp</span>
            </td>
            <td><a href="#4621">Contacts</a></td>
            <td><a href="#4621">Edit</a>
                <a href="#4621">Delete</a>
            </td>
        </tr>
   </tbody>
</table>

<section class="offset7" id="dragged-drop-zone" >
    <div class="look-like-input textfield droppable" contenteditable></div>
    <br />
    <div class="look-like-input textarea droppable" contenteditable></div>
</section>

---

欢迎您提供任何帮助和建议

好的。。。追根究底

克隆

似乎并没有按预期的方式运行。
最后，您必须使用自定义函数将自己的克隆打包到一个对象中，然后在

下拉列表中将其从对象中拉出

您可以在JSFIDLE上。

以下是最终奏效的方法：

// Drag
$('span[draggable]').draggable({
    revert: true,
    helper: function() {
        var container = $('<div/>');
        var dragged = $(this);
        container.append(dragged.clone());
        return container;
    }
});

// Drop
$('.droppable').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
        $(this).append($(ui.helper.children()));
    }
});

//拖动
$（'span[draggable]'）。draggable({
回复：对，
助手：函数（）{
变量容器=$（''）；
var=$（此值）；
container.append（drawing.clone（））；
返回容器；
}
});
//下降
$（'.droppable'）.droppable({
公差：“指针”，
drop：函数（事件、用户界面）{
$（this.append（$（ui.helper.children（））；
}
});
在我看来应该被标记为bug。。。我不明白为什么jq团队会选择这样做，因为很明显，对象在被拖动的那一刻就被克隆了，也就是应该复制的时候。
// Drag
$('span[draggable]').draggable({
    revert: true,
    helper: function() {
        var container = $('<div/>');
        var dragged = $(this);
        container.append(dragged.clone());
        return container;
    }
});

// Drop
$('.droppable').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
        $(this).append($(ui.helper.children()));
    }
});