1

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

我已尝试将以下内容作为我的 sortable 的接收：

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。是否有财产或其他事件会给我我所追求的？

4

3 回答 3

2

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

$('#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
});
于 2010-01-05T03:17:16.830 回答
1

我没有尝试过这两种方法，但从理论上讲，它们似乎会起作用。首先，如果你ul#existing也做了一个droppable，你可以对drop事件做一些事情，比如从那个 li 中获取你需要的信息，就像它一样text()，从 DOM 中删除那个对象并生成一个新元素。

Orrr，你可以对stop你的可拖动事件做一些事情，比如检查元素 parents 是否是 now ul#existing。希望这可以帮助。

于 2010-01-05T03:21:20.177 回答
0

不要绑定到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将是您正在寻找的元素

于 2010-01-05T03:21:10.583 回答