Question

嘿，我正在尝试找出我需要绑定的事件以及我需要使用什么属性来获取对已删除项目的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>');
}

但这似乎是#existing UL，发件人和项目都是在工具箱中拖动的li。我正在寻找的是#existing中新创建的li。是否有财产或其他事件会给我我想要的东西？

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
});

Answer 2

我没有尝试过这两种方法，但从理论上讲，它们看起来似乎有用。首先，如果您将ul#existing设为droppable，则可以对drop事件执行某些操作，例如从该li获取所需信息，例如text() ，从DOM中删除该对象并生成一个新元素。

Orrr，您可以对可拖动的stop事件执行某些操作，例如检查父项元素现在是ul#existing。希望这会有所帮助。

Answer 3

不要绑定到sortreceive，而是绑定到sortout，如此

$("#sortable").bind('sortout', function(event, ui) {
 console.log(ui.item);
});

或

$("#sortable").sortable({ //during initialization out:function(event, ui) { console.log(ui.item); } });

在这种情况下，ui.item将是您要查找的元素

在将其添加到可排序后进行编辑可拖动

3 个答案: