javascript - 将可拖动项添加到可排序项后进行编辑

嗨，我正在尝试确定需要绑定到哪个事件以及需要使用哪个属性来获取对放置项（即接收列表中的项）的DOM元素的引用。

到目前为止，这就是我所拥有的...

<ul id="toolbox">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
    $('#existing').sortable({
        revert: true
    });
    $('#toolbox li').draggable({
        connectToSortable: '#existing',
        helper: 'clone',
        revert: 'invalid',
    });
</script>

我的目标是，例如，一旦将A放入#existing ul中，就将A变成其他东西（其他任何东西都足够-实际的实现要复杂得多。我只需要使用该DOM元素）。

我已尝试将以下内容作为我的可排序项的接收项：

function receive(ev, ui)
{
    $(this).append('<b>this</b>');
    ui.sender.append('<b>sender</b>');
    ui.item.append('<b>item</b>');
}

但这似乎是＃现有的UL，发送方和项目都是拖到工具箱中的li。我正在寻找的是#existing内部新创建的li。是否有财产或其他事件可以给我带来帮助？

最佳答案

我最近有同样的问题。我用以下方法解决了它：

$('#existing').droppable({
    drop: function(e, ui) {
        // ui.draggable is the node that gets created in #existing
        // ui.draggable[0].originDragger is the node that was
        // dragged from #toolbox
    }
}).sortable({
    revert: true
});