javascript - 在添加到可排序对象后编辑可拖动对象

Question

嘿，我正在尝试确定我需要绑定(bind)到什么事件以及我需要使用什么属性来获取对放置项目(即接收列表中的项目)的 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 中，就将它变成其他东西(任何其他东西就足够了 - 真正的实现要复杂得多。我只需要掌握那个 DOM 元素) .

我尝试了以下方法作为我的可排序对象的接收:

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

但这似乎是#existing UL，sender 和 item 都是在工具箱中拖入的li。我正在寻找的是 #existing 中新创建的 li。是否有属性(property)或其他事件可以满足我的需求？

Answer 1

我最近遇到了同样的问题。我用以下方法解决了它:

$('#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
});